Question

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';
}

组件相关的概念

1. 组件元数据装饰器（ @Component ） 简称组件装饰器，用来告知 Angular 框架如何处理一个 TypeScript 类. Component 装饰器包含多个属性，这些属性的值叫做元数据， Angular 会根据这些元数据的值来渲染组件并执行组件的逻辑
2. 模板（ Template ） 我们可以通过组件自带的模板来定义组件的外观，模板以 html 的形式存在，告诉 Angular 如何来渲染组件，一般来说，模板看起来很像 html ，但是我们可以在模板中使用 Angular 的数据绑定语法，来呈现控制器中的数据。
3. 控制器（ 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 { }