Angular学习

一、快速上手

步骤1、设置开发环境

安装nodejs和npm

配置淘宝镜像

全局安装AngularCLI

npm install -g @angular/cli

步骤2、创建新项目

ng new [项目名称]

步骤3、启动开发服务器

在项目所在的根目录打开命令行终端

ng serve --open或者 npm start

步骤4、进行组件开发

接下就进入到项目的正式开发

项目文件概览

src 文件夹

你的应用代码位于 src 文件夹中。 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。

文件	用途
app/app.component.{ts,html,css,spec.ts}	根组件。随着应用的成长它会成为一颗树的根节点
app/app.module.ts	定义AppModule,根模块为描述如何组装应用，目前，他只声明了AppComponet。不久，它将声明更多组件
assets/*	这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。
environments/*	这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。
browserslist	一个配置文件，用来在不同的前端工具之间共享目标浏览器。
favicon.ico	每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html	这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI 会自动把所有 js 和 css 文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。
karma.conf.js	给Karma的单元测试配置，当运行 ng test 时会用到它。
main.ts	这是应用的主要入口点。 使用JIT 编译器编译本应用，并启动应用的根模块 AppModule，使其运行在浏览器中。 你还可以使用AOT 编译器，而不用修改任何代码 —— 只要给 ng build 或 ng serve 传入 --aot 参数就可以了。
polyfills.ts	不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本（polyfill）能把这些不同点进行标准化。 你只要使用 core-js 和 zone.js 通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。
styles.css	这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。
test.ts	这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。
tsconfig.{app|spec}.json	TypeScript 编译器的配置文件。tsconfig.app.json 是为 Angular 应用准备的，而 tsconfig.spec.json 是为单元测试准备的。
tslint.json	额外的 Linting 配置。当运行 ng lint 时，它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性。

根目录

src/ 文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和 src/ 平级。

文件	用途
e2e/	在 e2e/ 下是端到端（end-to-end）测试。 它们不在 src/ 下，是因为端到端测试实际上和应用是相互独立的，它只适用于测试你的应用而已。 这也就是为什么它会拥有自己的 tsconfig.json。
node_modules/	Node.js 创建了这个文件夹，并且把 package.json 中列举的所有第三方模块都放在其中。
.editorconfig	给你的编辑器看的一个简单配置文件，它用来确保参与你项目的每个人都具有基本的编辑器配置。 大多数的编辑器都支持 .editorconfig 文件，详情参见 http://editorconfig.org 。
.gitignore	一个 Git 的配置文件，用来确保某些自动生成的文件不会被提交到源码控制系统中。
angular.json	Angular CLI 的配置文件。 在这个文件中，你可以设置一系列默认值，还可以配置项目编译时要包含的那些文件。 要了解更多，请参阅它的官方文档。
package.json	npm 配置文件，其中列出了项目使用到的第三方依赖包。 你还可以在这里添加自己的自定义脚本。
protractor.conf.js	给Protractor使用的端到端测试配置文件，当运行 ng e2e 的时候会用到它。
README.md	项目的基础文档，预先写入了 CLI 命令的信息。 别忘了用项目文档改进它，以便每个查看此仓库的人都能据此构建出你的应用。
tsconfig.json	TypeScript 编译器的配置，你的 IDE 会借助它来给你提供更好的帮助。
tslint.json	给TSLint和Codelyzer用的配置信息，当运行 ng lint 时会用到。 Lint 功能可以帮你保持代码风格的统一。

二、英雄教程指南

1. 组件模板HTML差值绑定语法：<h1>{{title}}</h1>，双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。
2. 创建组件：ng generate component [组件名称]
3. 导入import { Component, OnInit } from '@angular/core'；
4. @Component装饰器函数：@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据，

   CLI 自动生成了三个元数据属性：selector— 组件的选择器（CSS 元素选择器）、templateUrl— 组件模板文件的位置。、styleUrls— 组件私有 CSS 样式表文件的位置。

5. 组件类实现了OnInit接口

6. ngOnInit ：OnInit接口定义的函数，Agular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。组件加载完成时调用。

7. 组件类在ts中就是一个模块，具体查看ts的模块导入到出， 始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。

8. 使用声明的选择器在模版中构建视图

9. 使用*ngFor显示列表

10. *ngIf根据条件包含或者排除一段HTML

11. 可以使用class绑定来切换CSS样式类

12. 创建独立的HeroDetailComponent组建ng generate component hero-detail

13. 使用属性绑定语法让父组建HeroComponent可以退控制子组建HeroDetailComponent。

14. 用装饰器注解@Input来让hero属性可以在外部的HeroComponent中绑定。

15. 数据访问逻辑重构到HeroService类中；

16. 在root节点注入HeroService类为该服务的提供商；

17. ng generate sevice xxxx生成服务类

18. 使用依赖注入机制把服务类注入到组件类

19. HeroService使用Observable<T[]>使用rxjs库的of方法返回了一个模板英雄数据的可观察对象

20. 在组建的ngOnInit生命周期钩子中调用HeroService方法，而不是构造函数中初始化。

21. 创建MessageService类在类之间实现松耦合通信。

22. 添加路由器在各个组件之间导航

23. <router-outler>和<a>把AppComponent变成以恶搞导航用的外壳

24. 在approutermodule中配置路由