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 销毁指令或组件之前立即调用。

Angular 初识

Angular 简介

Angular环境搭建

1. 安装前准备工作

2. 安装Angular脚手架

3. 创建Angular项目

4. Angluar目录结构

5. 创建组件

Angular的基本使用

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

2. Angular 结构型指令

3. 内置属性型指令

4. Angular中的管道

Angular的生命周期

推荐阅读更多精彩内容