1、创建项目

安装：npm install -g @angular/cli

新建：ng new projectName

打开：ng serve —open

2、创建组件

创建组件：ng g component components/news
(在app下的components文件夹新建news组件，此种方式可以让app.module.ts自动引入此组件)

使用组件：在html中使用 即可引入组件，此名称在news.components.ts中的selector更改

3、app.module.ts详解

  1. import { BrowserModule } from '@angular/platform-browser'; //浏览器解析模块
  2. import { NgModule } from '@angular/core'; //angular核心模块
  4. import { AppRoutingModule } from './app-routing.module';  //引入路由
  5. import { AppComponent } from './app.component'; //根组件
  6. import { NewsComponent } from './components/news/news.component'; //引入页面组件
  8. //@NgModule 装饰器，接收一个元数据对象，告诉Angular如何编译和启动应用
  9. @NgModule({
  10.   declarations: [  //配置当前项目运行的组件
  11.     AppComponent, NewsComponent
  12.   ],
  13.   imports: [  //配置当前模块运行依赖的其他模块
  14.     BrowserModule,
  15.     AppRoutingModule
  16.   ],
  17.   providers: [], //配置项目需要的服务
  18.   bootstrap: [AppComponent] //指定应用的主视图（根组件），通过引导AppModule来启动应用，这里一般写的是根组件。
  19. })
  20. export class AppModule { } //根模块不需要到处任何东西，因为其他组件不需要导入根模块

4、声明数据—public protected private

在xxx.components.ts 中声明变量(属性)，可以通过 {{title}} 引入

  1. export class NewsComponent implements OnInit {
  2.   public title:string = '我是一个新闻组件';
  3. //不加修饰符 默认为public、不加类型,默认为首次被赋值的类型,如果首次不赋值，默认为any
  4. //声明属性的方式:
  5. //公有public  可以在当前类里访问 也可以在类外访问
  6. //保护protected 可以在当前类和其子类访问
  7. //私有private 只可以在当前类访问
  8.   constructor() {
  9.     //此处用于改变数据
  10.   }
  11.   ngOnInit() {
  13.   }
  14. }

5、绑定数据—[]

  1. //绑定数据
  2. <div [title]="student">
  3.   鼠标放上
  4. </div>
  6. //绑定html
  7. <div [innerHTML]="content">
  8. </div>
  10. //绑定图片
  11. <img src="assets/images/文件说明.png" alt=""> //普通引入图片
  12. <img [src]="baiduImg" alt=""> //绑定数据引入图片

6、循环数据—*ngFor

  1. <ul>
  2.   <li *ngFor="let item of userList;let key=index;trackBy:trackByUserList">
  3.     {{item.name}}---{{item.age}}----索引{{key}}
  4.   </li>
  5. </ul>
  7. //components.ts中定义trackBy 用于优化diff算法
  8. trackByUserList(index: number, item: any): number { return item.id; }

7、条件判断—*ngIf

  1. <div *ngIf="flag">
  2.   {{test1}}
  3. </div>
  4. <div *ngIf="!flag">
  5.   {{test2}}
  6. </div>

8、[ngSwitch]、ngSwitchCase、ngSwitchDefault

  1. <div [ngSwitch]="status">
  2.   <div *ngSwitchCase="1">已支付</div>
  3.   <div *ngSwitchCase="2">已发货</div>
  4.   <div *ngSwitchCase="3">已收货</div>
  5.   <div *ngSwitchDefault>无效</div>
  6. </div>

9、[ngClass]、[ngStyle]

  1. <div [ngClass]="isSpecial ? 'special' : ''">This div is special</div>
  2. <div [ngClass]="{'red':key==1,'blue':key==2}">This div is special</div>
  4. <div [ngStyle]="{'background-color':'red'}">
  5. <div [style.font-size]="isSpecial ? 'x-large' : 'smaller'">

10、[(ngModel)] 双向数据绑定

在app.module.ts中引入FormsModule模块 才可以使用双向数据绑定

  1. import { FormsModule } from '@angular/forms';
  2. @NgModule({
  3.     imports: [
  4.         FormsModule
  5.     ]
  6. })

在组件中使用

  1. <input type="text" [(ngModel)]="student">
  3.  <select name="city" id="city" [(ngModel)]="peopleInfo.city">
  4.     <option [value]="item" *ngFor="let item of peopleInfo.cities">{{item}}</option>
  5. </select>

11、管道

  1. //component.ts
  2. public today:any = new Date()
  3. //component.html
  4. {{today | date:'yyyy-mm-dd hh:mm:ss'}}

12、执行事件 — (click)

  1. <button (click)="clickBtn()">按钮</button>
  3. <input type="text" (keydown)="keyUp($event)">
  5. keyUp(e){
  6.     console.log(e.target.value);
  7. }