Angular7入门总结篇|博客系列

# 一、Angular 介绍

Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。

根据项目数统计 angular(1.x 、2.x 、4.x、5.x、6.x、7.x)是现在网上使用量最大的框架
Angualr 基于 TypeScript 和 react、vue 相比, Angular 更适合中大型企业级项目。

目前 2018 年 11 月 25 日 angular 最新版本 angular7.x。根据官方介绍，Angular 每过几个月就会更新一个版本。此教程同样适用于后期更新的 Angular8.x、Angular9.x

学习 Angular 必备基础

必备基础:html 、css 、js、es6、Typescript

# 二、Angular 环境搭建及创建项目

# 2.1 环境搭建

1. 安装 nodejs

安装 angular 的计算机上面必须安装最新的 nodejs–注意安装 nodejs 稳定版本

2. 安装 cnpm

npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装https://npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

@前端进阶之旅: 代码已经复制到剪贴板

3. 使用 npm/cnpm 命令安装 angular/cli

npm install -g @angular/cli 

# 或者 
cnpm install -g @angular/cli

@前端进阶之旅: 代码已经复制到剪贴板

ng v 查看版本信息

4. 安装插件

5. 安装chrome扩展

https://augury.angular.io/

用augury查看component结构，更方便调试

# 2.2 创建项目

# 创建项目
ng new my-app

cd my-app

# 运行项目
ng serve --open

@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 目录结构分析

详情参考 https://www.angular.cn/guide/file-structure

app目录（重点）

app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了

app.component.ts：这个文件表示组件，
组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html 我们来看看app.component.ts中的代码，并解释下代码的意义

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据  所有的组件都必须使用这个装饰器来注解*/
@Component({
  /*组件元数据  Angular会通过这里面的属性来渲染组件并执行逻辑
  * selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
  *templateUrl  组件的模板，定义了组件的布局和内容
  *styleUrls   该模板引用那个css样式
  * */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
  /*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
  title = '学习Angular';
}

@前端进阶之旅: 代码已经复制到剪贴板

组件相关的概念

组件元数据装饰器（@Component）简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类. Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
模板（Template）我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
控制器（controller）控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。

装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如：

输入属性（@inputs）:是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据提供器（providers）：这个是用来做依赖注入的
生命周期钩子（LifeCycle Hooks）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期
样式表：组件可以关联一些样式表
动画（Animations）： Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等
输出属性（@Outputs）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据

组件的中关系就如下图所示

下面我们来看看模块文件

app.module.ts：这个文件表示模块
与AppComponent类似，模块也需要装饰器来装饰

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
   // 声明模块里有什么东西 只能声明：组件/指令/管道
    AppComponent,
    HeroesComponent
  ],
  // 声明该模块所依赖的模块
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // 默认情况下是空的
  providers: [],
  // 声明模块的主组件是什么
  bootstrap: [AppComponent]
})
export class AppModule { }

@前端进阶之旅: 代码已经复制到剪贴板

# 2.4 Angular cli

https://cli.angular.io

通过ng g列出当前命令

1. 创建新组件 ng generate component component-name

ng g component components/header 指定生成到哪个目录

该命令会把生成的组件，添加到 src/app/app.module.ts 文件中 @NgModule 的 declarations 列表中声明

2. 使用 Angular CLI 创建一个名叫 hero 的服务

ng generate service hero

@前端进阶之旅: 代码已经复制到剪贴板

该命令会在 src/app/hero.service.ts 中生成 HeroService 类的骨架。 HeroService 类的代码如下：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

@前端进阶之旅: 代码已经复制到剪贴板

3. 添加 AppRoutingModule

ng generate module app-routing --flat --module=app

@前端进阶之旅: 代码已经复制到剪贴板

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule的 imports 数组中。

生成的文件是这样的：

src/app/app-routing.module.ts (generated)
content_copy
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

@前端进阶之旅: 代码已经复制到剪贴板

修改后

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

@前端进阶之旅: 代码已经复制到剪贴板

# 三、angular组件及组件里的模板

# 3.1 创建angualr组件

1. 创建组件

ng g component components/header

@前端进阶之旅: 代码已经复制到剪贴板

2. 使用组件

<app-header></app-header>

@前端进阶之旅: 代码已经复制到剪贴板

# 3.2 Angular 绑定数据

1. 数据文本绑定

定义数据几种方式

<h1>{{title}}</h1>

@前端进阶之旅: 代码已经复制到剪贴板

2. 绑定HTML

 this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

@前端进阶之旅: 代码已经复制到剪贴板

 <div [innerHTML]="h"></div>

@前端进阶之旅: 代码已经复制到剪贴板

# 3.3 声明属性的几种方式

public 共有（默认）可以在类里外使用
protected 保护类型只能在当前类和子类中使用
private 私有类型只能在当期类使用

# 3.4 绑定属性

用[]包裹

 <div [id]="id" [title]="msg">调试工具看看我的属性</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 3.5 数据循环 *ngFor

*1. ngFor 普通循环

# 一、Angular 介绍

Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。

根据项目数统计 angular(1.x 、2.x 、4.x、5.x、6.x、7.x)是现在网上使用量最大的框架
Angualr 基于 TypeScript 和 react、vue 相比, Angular 更适合中大型企业级项目。

目前 2018 年 11 月 25 日 angular 最新版本 angular7.x。根据官方介绍，Angular 每过几个月就会更新一个版本。此教程同样适用于后期更新的 Angular8.x、Angular9.x

学习 Angular 必备基础

必备基础:html 、css 、js、es6、Typescript

# 二、Angular 环境搭建及创建项目

# 2.1 环境搭建

1. 安装 nodejs

安装 angular 的计算机上面必须安装最新的 nodejs–注意安装 nodejs 稳定版本

2. 安装 cnpm

npm 可能安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装https://npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

@前端进阶之旅: 代码已经复制到剪贴板

3. 使用 npm/cnpm 命令安装 angular/cli

npm install -g @angular/cli 

# 或者 
cnpm install -g @angular/cli

@前端进阶之旅: 代码已经复制到剪贴板

ng v 查看版本信息

4. 安装插件

5. 安装chrome扩展

https://augury.angular.io/

用augury查看component结构，更方便调试

# 2.2 创建项目

# 创建项目
ng new my-app

cd my-app

# 运行项目
ng serve --open

@前端进阶之旅: 代码已经复制到剪贴板

# 2.3 目录结构分析

详情参考 https://www.angular.cn/guide/file-structure

app目录（重点）

app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了

app.component.ts：这个文件表示组件，
组件是Angular应用的基本构建模块，可以理解为一段带有业务逻辑和数据的Html 我们来看看app.component.ts中的代码，并解释下代码的意义

/*这里是从Angular核心模块里面引入了component装饰器*/
import {Component} from '@angular/core';

/*用装饰器定义了一个组件以及组件的元数据  所有的组件都必须使用这个装饰器来注解*/
@Component({
  /*组件元数据  Angular会通过这里面的属性来渲染组件并执行逻辑
  * selector就是css选择器，表示这个组件可以通过app-root来调用，index.html中有个<app-root>Loading...</app-root>标签，这个标签用来展示该组件的内容
  *templateUrl  组件的模板，定义了组件的布局和内容
  *styleUrls   该模板引用那个css样式
  * */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/*AppComponent本来就是一个普通的typescript类，但是上面的组件元数据装饰器告诉Angular，AppComponent是一个组件，需要把一些元数据附加到这个类上，Angular就会把AppComponent当组件来处理*/
export class AppComponent {
  /*这个类实际上就是该组件的控制器，我们的业务逻辑就是在这个类中编写*/
  title = '学习Angular';
}

@前端进阶之旅: 代码已经复制到剪贴板

组件相关的概念

组件元数据装饰器（@Component）简称组件装饰器，用来告知Angular框架如何处理一个TypeScript类. Component装饰器包含多个属性，这些属性的值叫做元数据，Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
模板（Template）我们可以通过组件自带的模板来定义组件的外观，模板以html的形式存在，告诉Angular如何来渲染组件，一般来说，模板看起来很像html，但是我们可以在模板中使用Angular的数据绑定语法，来呈现控制器中的数据。
控制器（controller）控制器就是一个普通的typescript类，他会被@Component来装饰，控制器会包含组件所有的属性和方法，绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯，模板展现控制器的数据，控制器处理模板上发生的事件。

装饰器，模板和控制器是组件的必备要素。还有一些可选的元素，比如：

输入属性（@inputs）:是用来接收外部传入的数据的,Angular的程序结构就是一个组件树，输入属性允许在组件树种传递数据提供器（providers）：这个是用来做依赖注入的
生命周期钩子（LifeCycle Hooks）：一个组件从创建到销毁的过程中会有多个钩子会被触发，类似于Android中的Activity的生命周期
样式表：组件可以关联一些样式表
动画（Animations）： Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果，比如淡入淡出等
输出属性（@Outputs）：用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据

组件的中关系就如下图所示

下面我们来看看模块文件

app.module.ts：这个文件表示模块
与AppComponent类似，模块也需要装饰器来装饰

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
   // 声明模块里有什么东西 只能声明：组件/指令/管道
    AppComponent,
    HeroesComponent
  ],
  // 声明该模块所依赖的模块
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  // 默认情况下是空的
  providers: [],
  // 声明模块的主组件是什么
  bootstrap: [AppComponent]
})
export class AppModule { }

@前端进阶之旅: 代码已经复制到剪贴板

# 2.4 Angular cli

https://cli.angular.io

通过ng g列出当前命令

1. 创建新组件 ng generate component component-name

ng g component components/header 指定生成到哪个目录

该命令会把生成的组件，添加到 src/app/app.module.ts 文件中 @NgModule 的 declarations 列表中声明

2. 使用 Angular CLI 创建一个名叫 hero 的服务

ng generate service hero

@前端进阶之旅: 代码已经复制到剪贴板

该命令会在 src/app/hero.service.ts 中生成 HeroService 类的骨架。 HeroService 类的代码如下：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

@前端进阶之旅: 代码已经复制到剪贴板

3. 添加 AppRoutingModule

ng generate module app-routing --flat --module=app

@前端进阶之旅: 代码已经复制到剪贴板

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule的 imports 数组中。

生成的文件是这样的：

src/app/app-routing.module.ts (generated)
content_copy
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

@前端进阶之旅: 代码已经复制到剪贴板

修改后

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

@前端进阶之旅: 代码已经复制到剪贴板

# 三、angular组件及组件里的模板

# 3.1 创建angualr组件

1. 创建组件

ng g component components/header

@前端进阶之旅: 代码已经复制到剪贴板

2. 使用组件

<app-header></app-header>

@前端进阶之旅: 代码已经复制到剪贴板

# 3.2 Angular 绑定数据

1. 数据文本绑定

定义数据几种方式

<h1>{{title}}</h1>

@前端进阶之旅: 代码已经复制到剪贴板

2. 绑定HTML

 this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"

@前端进阶之旅: 代码已经复制到剪贴板

 <div [innerHTML]="h"></div>

@前端进阶之旅: 代码已经复制到剪贴板

# 3.3 声明属性的几种方式

public 共有（默认）可以在类里外使用
protected 保护类型只能在当前类和子类中使用
private 私有类型只能在当期类使用

# 3.4 绑定属性

用[]包裹

 <div [id]="id" [title]="msg">调试工具看看我的属性</div>

@前端进阶之旅: 代码已经复制到剪贴板

# 3.5 数据循环 *ngFor

*1. ngFor 普通循环