一、快速上手
步骤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/
平级。
文件 | 用途 |
---|---|
| 在 |
|
|
| 给你的编辑器看的一个简单配置文件,它用来确保参与你项目的每个人都具有基本的编辑器配置。 大多数的编辑器都支持 |
| 一个 Git 的配置文件,用来确保某些自动生成的文件不会被提交到源码控制系统中。 |
| Angular CLI 的配置文件。 在这个文件中,你可以设置一系列默认值,还可以配置项目编译时要包含的那些文件。 要了解更多,请参阅它的官方文档。 |
|
|
| 给Protractor使用的端到端测试配置文件,当运行 |
| 项目的基础文档,预先写入了 CLI 命令的信息。 别忘了用项目文档改进它,以便每个查看此仓库的人都能据此构建出你的应用。 |
| TypeScript 编译器的配置,你的 IDE 会借助它来给你提供更好的帮助。 |
| 给TSLint和Codelyzer用的配置信息,当运行 |
二、英雄教程指南
- 组件模板HTML差值绑定语法:<h1>{{title}}</h1>,双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的
title
属性的值绑定到 HTML 中的h1
标记中。 - 创建组件:ng generate component [组件名称]
- 导入import { Component, OnInit } from '@angular/core';
- @Component装饰器函数:
@Component
是个装饰器函数,用于为该组件指定 Angular 所需的元数据,CLI 自动生成了三个元数据属性:
selector
— 组件的选择器(CSS 元素选择器)、templateUrl
— 组件模板文件的位置。、styleUrls
— 组件私有 CSS 样式表文件的位置。 -
组件类实现了OnInit接口
-
ngOnInit
:OnInit接口定义的函数,Agular 在创建完组件后很快就会调用ngOnInit
。这里是放置初始化逻辑的好地方。组件加载完成时调用。 -
组件类在ts中就是一个模块,具体查看ts的模块导入到出, 始终要
export
这个组件类,以便在其它地方(比如AppModule
)导入它。 -
使用声明的选择器在模版中构建视图
-
使用*ngFor显示列表
-
*ngIf根据条件包含或者排除一段HTML
-
可以使用class绑定来切换CSS样式类
-
创建独立的HeroDetailComponent组建ng generate component hero-detail
-
使用属性绑定语法让父组建HeroComponent可以退控制子组建HeroDetailComponent。
-
用装饰器注解@Input来让hero属性可以在外部的HeroComponent中绑定。
-
数据访问逻辑重构到HeroService类中;
-
在root节点注入HeroService类为该服务的提供商;
-
ng generate sevice xxxx生成服务类
-
使用依赖注入机制把服务类注入到组件类
-
HeroService使用Observable<T[]>使用rxjs库的of方法返回了一个模板英雄数据的可观察对象
-
在组建的ngOnInit生命周期钩子中调用HeroService方法,而不是构造函数中初始化。
-
创建MessageService类在类之间实现松耦合通信。
-
添加路由器在各个组件之间导航
-
<router-outler>和<a>把AppComponent变成以恶搞导航用的外壳
-
在approutermodule中配置路由