环境搭建：

今天开始重新复习angular：

要使用 npm 命令安装 CLI，请打开终端/控制台窗口，输入如下命令：

npm install -g @angular/cli

你要在 Angular 工作区的上下文中开发应用。

1. 运行 CLI 命令 ng new 并提供 my-app 名称作为参数，如下所示：

2. ng new my-app

3. ng new 命令会提示你提供要把哪些特性包含在初始应用中。按 Enter 或 Return 键可以接受默认值。

Angular CLI 会安装必要的 Angular npm 包和其他依赖包。这可能要花几分钟的时间。

CLI 会创建一个新的工作区和一个简单的欢迎应用，随时可以运行它。

Angular CLI 中包含一个服务器，方便你在本地构建和提供应用。

1. 转到 workspace 文件夹（my-app）。

2. 使用 CLI 命令 ng serve 和 --open 选项来启动服务器。

3. 
   

4. cd my-app

   ng serve --open

   
   

5. ng serve 命令会启动开发服务器、监视文件，并在这些文件发生更改时重建应用。

--open（或者只用 -o 缩写）选项会自动打开你的浏览器，并访问 http://localhost:4200/。

组件生成：

ng generate

简写：        

ng g compontent  组件位置/组件名字

例子：ng g compontent   compontent/news

这个模块类的名字叫做 AppRoutingModule，并且位于 src/app 下的 app-routing.module.ts 文件中。

使用 CLI 生成它。

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

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

实际使用：：：

插值 {{...}}

括号间的素材是一个模板表达式，Angular 先对它求值，再把它转换成字符串

可以调用宿主组件的方法；

模板表达式

模板表达式会产生一个值，并出现在双花括号 {{ }} 中。 Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。

{{1 + 1}} 中所包含的模板表达式是 1 + 1。 在属性绑定中会再次看到模板表达式，它出现在 = 右侧的引号中，就像这样：[property]="expression"。

在语法上，模板表达式与 JavaScript 很像。很多 JavaScript 表达式都是合法的模板表达式，但也有一些例外。

你不能使用那些具有或可能引发副作用的 JavaScript 表达式，包括：

• 赋值 (=, +=, -=, ...)

• new、typeof、instanceof 等运算符。

• 使用 ; 或 , 串联起来的表达式

• 自增和自减运算符：++ 和 --

• 一些 ES2015+ 版本的运算符

和 JavaScript 语法的其它显著差异包括：

指令：

[ngClass]

[ngStyle]

*ngSwicth

*ngIf

*ngfor

原理：

app-root这类标签：

当你通过 main.ts 中的 AppComponent 类启动时，Angular 在 index.html 中查找一个 <app-root> 元素， 然后实例化一个 AppComponent，并将其渲染到 <app-root> 标签中。

运行应用。它应该显示出标题和英雄名：

在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。

模块：

NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。

• declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。

• exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。

• imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。

• providers —— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供者，这通常是首选方式。）

• bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap 属性。

在这个目录中会生成四个文件：

• 作为组件样式的 CSS 文件。

• 作为组件模板的 HTML 文件。

• 存放组件类 HeroDetailComponent 的 TypeScript 文件。

• HeroDetailComponent 类的测试文件。

CLI 自动生成了三个元数据属性：

1. selector— 组件的选择器（CSS 元素选择器）

2. templateUrl— 组件模板文件的位置。

3. styleUrls— 组件私有 CSS 样式表文件的位置。

组件控制屏幕上被称为视图的一小片区域

组件：

这个例子展示了一些最常用的 @Component 配置选项：

• selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。 比如，如果应用的 HTML 中包含 <app-hero-list></app-hero-list>，Angular 就会在这些标签中插入一个 HeroListComponent 实例的视图。

• templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还可以用 template 属性的值来提供内联的 HTML 模板。 这个模板定义了该组件的宿主视图。

• providers：当前组件所需的服务提供者的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 HeroService 实例，以获取要显示的英雄列表。

ngOnInit:生命周期钩子

@Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。 在下面的范例代码中，你可以看到 HeroListComponent 只是一个普通类，完全没有 Angular 特有的标记或语法。 直到给它加上了 @Component 装饰器，它才变成了组件。

组件的元数据告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。 具体来说，它把一个模板（无论是直接内联在代码中还是引用的外部文件）和该组件关联起来。 该组件及其模板，共同描述了一个视图。

除了包含或指向模板之外，@Component 的元数据还会配置要如何在 HTML 中引用该组件，以及该组件需要哪些服务等等。

模板语法::

模板很像标准的 HTML，但是它还包含 Angular 的模板语法，这些模板语法可以根据你的应用逻辑、应用状态和 DOM 数据来修改这些 HTML。 你的模板可以使用数据绑定来协调应用和 DOM 中的数据，使用管道在显示出来之前对其进行转换，使用指令来把程序逻辑应用到要显示的内容上。

管道

Angular 的管道可以让你在模板中声明显示值的转换逻辑。 带有 @Pipe 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。

Angular 自带了很多管道，比如 date 管道和 currency 管道，完整的列表参见 Pipes API 列表。你也可以自己定义一些新管道。

要在 HTML 模板中指定值的转换方式，请使用 管道操作符 (|)。

{{interpolated_value | pipe_name}}

服务：

服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。

Angular 把组件和服务区分开，以提高模块性和复用性。 通过把组件中和视图有关的功能与其他类型的处理分离开，你可以让组件类更加精简、高效。

理想情况下，组件的工作只管用户体验，而不用顾及其它。 它应该提供用于数据绑定的属性和方法，以便作为视图（由模板渲染）和应用逻辑（通常包含一些模型的概念）的中介者。

组件应该把诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作委托给各种服务。通过把各种处理任务定义到可注入的服务类中，你可以让它被任何组件使用。 通过在不同的环境中注入同一种服务的不同提供者，你还可以让你的应用更具适应性。

Angular 不会强迫你遵循这些原则。Angular 只会通过依赖注入来帮你更容易地将应用逻辑分解为服务，并让这些服务可用于各个组件中。

路由：

const routes: Routes = [

  { path: 'heroes', component: HeroesComponent }

];

 Routes 告诉路由器，当用户单击链接或将 URL 粘贴进浏览器地址栏时要显示哪个视图。

典型的 Angular Route 具有两个属性：

• path: 用来匹配浏览器地址栏中 URL 的字符串。

• component: 导航到该路由时，路由器应该创建的组件。

这会告诉路由器把该 URL 与 path：'heroes' 匹配。 如果网址类似于 localhost:4200/heroes 就显示 HeroesComponent。

RouterModule.forRoot()

@NgModule 元数据会初始化路由器，并开始监听浏览器地址的变化。

下面的代码行将 RouterModule 添加到 AppRoutingModule 的 imports 数组中，同时通过调用 RouterModule.forRoot() 来用这些 routes 配置它：

imports: [ RouterModule.forRoot(routes) ],

<nav>  <a routerLink="/heroes">Heroes</a></nav>

routerLink 属性的值为 "/heroes"，路由器会用它来匹配出指向 HeroesComponent 的路由。 routerLink 是 RouterLink 指令的选择器，它会把用户的点击转换为路由器的导航操作。 它是 RouterModule 中的另一个公共指令。

使用注意：

• 使用 CLI 创建了第二个组件 HeroesComponent。会自动把 HeroesComponent 添加到了壳组件 AppComponent 中，以便显示它。

• 使用 管道处理{{}}内的数据。

• 用 ngModel 指令实现了双向数据绑定。

• 知道了 AppModule的各个属性上面有；

• 把 FormsModule 导入了 AppModule，以便 Angular 能识别并应用 ngModel 指令。

• 知道了把组件声明到 AppModule 是很重要的，并认识到 CLI 会自动帮你声明它。