Angular 初识

Angular 简介

Angular (通常是指 "Angular 2+" 或 "Angular v2 及更高版本")。是一个基于 TypeScript 的 开源 Web 应用框架， 由 Google 的 Angular 团队以及社区共同领导。Angular 是由 AngularJS 的同一个开发团队完全重写的。 — —《维基百科》
是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。

Angular

Angular环境搭建

1. 安装前准备工作

• 安装 nodejs
• 安装 npm

2. 安装Angular脚手架

• 全局安装angular/cli

npm install -g @angular/cli

• 校验是否安装成功，如图

ng version

Angular CLI

3. 创建Angular项目

• 创建项目

ng new my-app

• 运行项目并打开浏览器，如图

ng serve --open

my-app

4. Angluar目录结构

• 目录结构

  
  Angluar目录结构
• Angular根模块： app.module.ts

import { NgModule } from '@angular/core';     //浏览器解析模块
import { BrowserModule } from '@angular/platform-browser';    //Angular核心模块

import { AppComponent } from './app.component';    //根组件

@NgModule({    //@NgModule接受一个元数组对象，该对象的属性用来描述这个模块
  declarations: [    //配置当前项目运行的组件
    AppComponent
  ],
  imports: [    //配置当前模块运行依赖的其他模块
    BrowserModule
  ],
  providers: [],    //配置项目所需要的服务
  bootstrap: [AppComponent]    //应用的主视图（根组件）
})
export class AppModule { }

• Angular根组件：app.component.ts

import { Component } from '@angular/core';    //引入核心模块中的Component

@Component({
  selector: 'app-root',    // 给这个组件的命名
  templateUrl: './app.component.html',      //该组件的html
  styleUrls: ['./app.component.css']    //该组件的css
})
export class AppComponent {
  title = 'my-app';    //组件中的属性
}

5. 创建组件

• 通过Angular CLI创建组件

ng generate component xxx  

举例：

• 输入命令ng generate component components/content创建自定义组件
  

  创建组件

• 在根组件中挂载自定义的content组件
  在app.component.html中引用<app-content></app-content> 结果如图
  

  挂载content组件

Angular的基本使用

1. Angular模板里面绑定：数据、属性、html

• content.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
  public content: string = 'content works!';
  public number: number = 123;
  public people: any = {
    username: '小明',
    age: 20
  };
  public title: any;
  public url: string = 'https://www.baidu.com';
  public html: string = '<h3>这是一个html</h3>';
  public arrays: string[] = ['A', 'B', 'C'];
  constructor() {
    this.title = 'Hello World!';
  }
  ngOnInit(): void {
  }
}

• content.component.html

<hr/>
<h1>绑定数据</h1>
<h2>title: {{title}}</h2>
<h2>content: {{content}}</h2>
<h2>number: {{number}}</h2>
<h3>people-name: {{people.username}}</h3>
<h3>people-age: {{people.age}}</h3>
<ul>
  <li *ngFor="let item of arrays">
    {{item}}
  </li>
</ul>
<hr/>
<h1>动态绑定属性</h1>
<img [src]="url"/>
<hr/>
<h1>绑定HTML</h1>
<div [innerHTML]="html" class="color"></div>
<hr/>

• content.component.css

.color {
  color: red;
}

绑定信息

2. Angular 结构型指令

• ngIf

//content.component.ts
public flag: boolean = false;

//content.component.html
<hr/>
<ul>
  <li *ngIf="flag">
    <h3>true</h3>
  </li>
  <li *ngIf="!flag">
    <h3>false</h3>
  </li>
</ul>
<hr/>

ngIf

• ngFor

//content.component.ts
public arrays: string[] = ['A', 'B', 'C'];

//content.component.html
<hr/>
<ul>
  <li *ngFor="let item of arrays">
    {{item}}
  </li>
</ul>
<hr/>

ngFor

• ngSwitch

//content.component.ts
  public stateA: string = 'A';
  public stateB: string = 'B';
  public stateC: string = 'C';

//content.component.html
<hr/>
<ul [ngSwitch]= "stateA">
  <li *ngSwitchCase = "'A'">
    <h3>A</h3>
  </li>
  <li *ngSwitchCase = "'B'">
    <h3>B</h3>
  </li>
  <li *ngSwitchDefault>
    <h3>error</h3>
  </li>
</ul>
<hr/>

<ul [ngSwitch]= "stateB">
  <li *ngSwitchCase = "'A'">
    <h3>A</h3>
  </li>
  <li *ngSwitchCase = "'B'">
    <h3>B</h3>
  </li>
  <li *ngSwitchDefault>
    <h3>error</h3>
  </li>
</ul>
<hr/>

<ul [ngSwitch]= "stateC">
  <li *ngSwitchCase = "'A'">
    <h3>A</h3>
  </li>
  <li *ngSwitchCase = "'B'">
    <h3>B</h3>
  </li>
  <li *ngSwitchDefault>
    <h3>error</h3>
  </li>
</ul>
<hr/>

ngSwitch

3. 内置属性型指令

• NgClass

//content.component.ts
public flag: boolean = false;
public arrays: string[] = ['A', 'B', 'C'];

//content.component.css
.red {
  color: red;
}

.yellow {
  color: yellow;
}

.pink {
  color: pink;
}

//content.component.html
<hr/>
<div [ngClass]="{red: flag == true, yellow: flag == false}">
  <h1>content1</h1>
</div>
<hr/>
<div [ngClass]="{red: !flag, yellow: flag}">
  <h1>content2</h1>
</div>
<hr/>
<ul>
  <li *ngFor="let item of arrays; let key = index;" [ngClass]="{red: key == 0, yellow: key == 1, pink: key == 2}">
    {{item}}-{{key}}
  </li>
</ul>
<hr/>

ngClass

• NgStyle

//content.component.ts
  public flag: boolean = false;
  public color: string = 'blue';

//content.component.html
<hr/>
<div [ngStyle]="{'color': 'red'}">
  <h1>content1</h1>
</div>
<div [ngStyle]="{'color': color}">
  <h1>content1</h1>
</div>
<div [ngStyle]="{'color': flag ? 'red' : 'yellow'}">
  <h1>content1</h1>
</div>
<hr/>

ngStyle

4. Angular中的管道

• DatePipe：根据本地环境中的规则格式化日期值

public date = new Date();

<hr/>
  <h1>{{date | date: 'YYYY/MM/dd HH:mm:ss'}}</h1>
<hr/>

date

• UpperCasePipe: 把文本全部转换成大写

public content = 'hello world';

<hr/>
  <h1>{{content | uppercase}}</h1>
<hr/>

uppercase

• LowerCasePipe: 把文本全部转换成小写

public content = 'HELLO WORLD';

<hr/>
  <h1>{{content | lowercase}}</h1>
<hr/>

lowercase

• DecimalPipe: 把数字转换成带小数点的字符串
  参数的格式为{最少整数位数}.{最少小数位数}-{最多小数位数}

public value = 3.1415926;

<hr/>
  <h1>{{value | number: '3.4-5'}}</h1>
<hr/>

DecimalPipe

• PercentPipe: 把数字转换成百分比字符串
  参数的格式为{最少整数位数}.{最少小数位数}-{最多小数位数}

public value = 3.1415926;

<hr/>
  <h1>{{value | percent: '3.4-5'}}</h1>
<hr/>

percent

Angular的生命周期

• ngOnChanges()
  用途：当 Angular 设置或重新设置数据绑定的输入属性时响应。
  时机：在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。

• ngOnInit()
  用途：在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件
  时机：在第一轮 ngOnChanges() 完成之后调用，只调用一次。

• ngDoCheck()
  用途：检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应
  时机：紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用

• ngAfterContentInit()
  用途：当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。
  时机：第一次 ngDoCheck() 之后调用，只调用一次。

• ngAfterContentChecked()
  用途：每当 Angular 检查完被投影到组件或指令中的内容之后调用。
  时机：ngAfterContentInit() 和每次 ngDoCheck() 之后调用

• ngAfterViewInit()
  用途：当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用
  时机：第一次 ngAfterContentChecked() 之后调用，只调用一次。

• ngAfterViewChecked()
  用途：每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。
  时机：ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。

• ngOnDestroy()
  用途：每当 Angular 每次销毁指令/组件之前调用并清扫
  时机：在 Angular 销毁指令或组件之前立即调用。