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

推荐阅读更多精彩内容