目录
angular是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。
angular是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。
1、angular项目创建
第一步：安装angular cli工具
npm install -g @angular/cli第二步：使用cli工具里的cli命令，创建angular项目
ng new my-app第三步：运行项目
cd my-app
ng serve --open项目目录结构
2、heros之旅
1、英雄编辑器
- 使用cli创建第二个组件HeroesComponent
- 把heroesComponent添加到壳组件appComponent中，以显示heroesComponent组件
- 使用UppercasePipe来格式化英雄的名字
- 使用ngModel指令实现双向数据绑定
- 找到appModule
- 把FormsModule导入到AppModule，以便angular能识别并应用ngModel指令
- 了解把组件声明到AppModule，并认识到cli创建的组件会自动声明组件
2、显示英雄列表
- 英雄之旅应用在一个主从视图中显示英雄列表
- 用户可以选择一个英雄，并查看该英雄的详情。
- 使用*ngFor显示一个列表
- 使用*ngIf来根据条件包含或排除一段HTML
- 用class绑定来切换css的样式类
- （该组件既显示英雄列表、也显示英雄详情）
3、创建特性组件?
- 创建一个独立的、可复用的HeroDetailComponent组件
- 用属性绑定语法来让父组件HeroesComponent可以控制子组件HeroDetailComponent
- 用@Input装饰器来让hero属性可以在外部的HeroesComponent中绑定
4、添加服务
- ?把数据访问逻辑重构到HeroService类中
- 在根注入器中把HeroService注册为该服务的提供者，以便在别处可以注入它
- 使用Angular依赖注入机制把它注入到组件中
- 给HerService中获取数据的方法提供了一个异步的函数签名
- 发现了Observable以及RxJS库
- 使用RxJS的of()方法返回了一个模拟英雄数据的可观察对象（Observable<Hero[]>）
- 在组件的ngOnInit生命周期钩子中调用HeroService方法，而不是构造函数中
- 创建了一个MessageService，以便在类之间实现松耦合通讯
- HeroService连同注入到它的服务MessageService一起，注入到组件中。
5、用路由添加导航支持
- 添加了Angular路由器在各个不同组件之间导航
- 使用一些<a>链接和一个<router-outlet>把AppComponent转换成了一个导航用的壳组件。
- 在AppRoutingModule中配置了路由器
- 定义了一些简单路由、一个重定向路由和一个参数化路由
- 在<a>元素中使用了routerLink指令
- 把一个紧耦合的主从视图构成了带路由的详情试图
- 在多个组件之间共享了HeroService服务
6、从服务端获取数据
增删改查
- 添加了在应用程序中使用HTTP的必备依赖
- 重构了HeroService，以通过web API来加载英雄数据
- 扩展了HeroService来支持post（）、put()、delete()方法
- 修改了组件，以允许用户添加、编辑和删除英雄
- 配置了一个内存webAPI
- 学会了如何使用“可观察对象”