angularJS基础一

angularJS项目搭建

angular与react、vue的总体区别

脚手架工具安装

1. 使用npm命令安装npm install -g @angular/cli
2. 使用cnpm命令安装cnpm install -g @angular/cli

创建项目
ng new my-app

启动服务
cd my-app
npm(cnpm) install //安装依赖
ng serve --open

目录解说

• app.module.ts
  根模块，告诉angular应该如何组装应用
  
• app.component.ts
  根组件
  
• header.component.ts
  组件模块
  

创建组件

1. 手动新添文件
2. ng g component components/header
   在components文件夹中自动添加header组件文件

定义属性的方式

1. title=‘XXX’
2. msg:any(数据类型)
   然后在构造函数中this.msg='xxx'
3. msg1:string='xxx'

声明属性时的修饰符

名称	类型	作用
public	共有（默认）	可以在类里面使用，也可以在类外面使用
protected	保护类型	只有在当前类及它的子类里访问
private	私有	只有当前类可以访问

绑定属性的方法

1. id='{{id}}'
2. [id]='id'

绑定后台HTML数据—-解析HTML语句
[innerHTML] = 'h'

数据循环

• 普通循环
  *ngFor = let item of items
template = “ngFor let item of items” 作用一样
  添加获取索引值key

<ul> 
    <li *ngFor="let item of list;let key = index;"> 
        {{item}} --{{key}} 
    </li> 
</ul> 

执行方法
(click)="getData()" angular都使用（）

条件判断 *ngIf
表单处理
双向数据绑定
必须引入import { FormsModule } from '@angular/forms';
然后在@NgModule（{imports：[FormsModule]}） //引入FormsModule
使用时(ngModel)