angular学习之旅

目录

angular是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。

1、angular项目创建

项目目录结构

​

2、heros之旅

1、英雄编辑器

2、显示英雄列表

3、创建特性组件 

4、添加服务

5、用路由添加导航支持

6、从服务端获取数据

---

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
• 学会了如何使用“可观察对象”