Angular项目的创建及案例解释

   初学angular 其实前端的难度本身不大  但是一些框架在自主理解上还是有一些不好理解的 所以如果可以多向别人请教一下 或者自行百度搜索 毕竟每个人的理解程度不同 

          建议查看有道云笔记的链接   有些格式和图片不能同步

http://note.youdao.com/noteshareid=cbe3907fea4268015d879ba5c463147d&sub=B2932DAF36BC445789D3D31D051C9AE2

1. 新建准备项目工作

利用cmd创建项目基础工作

每一个工作空间都包含有一些供一个或多个项目使用的文件 每个项目都是由 应用~库或端~端（e2e)测试构成的文件

安装angular-cli ng new my-app

还将创建下列工作空间和初始项目文件：

• 一个新的工作空间，根目录名叫 my-app
• 一个初始的骨架应用项目，也叫 my-app（但位于 src 子目录下）
• 一个端到端测试项目（位于 e2e 子目录下）
• 相关的配置文件

第一个案例 实现了在component.ts 中 给title属性传值 又在component.css里面进行样式渲染

 

2. 创建英雄列表组件

使用命令 ng generate component heroes 创建完成后出现相应的三个文件

类文件 ts 页面进来导入 Component（装饰器函数 用于提供所需原数据） OnInit（钩子函数）

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

• • • • • 1. selector— 组件的选择器（CSS 元素选择器）
          2. templateUrl— 组件模板文件的位置。
          3. styleUrls— 组件私有 CSS 样式表文件的位置。

ngoninit 是一个生命周期钩子函数（回调函数） 在创建完组件之后很快就会调用ngOnInit，这里是放置初始化逻辑的地方

添加 HeroesComponent 中的一个属性 表示一个英雄 hero = ‘Windstorm’；

然后在 模板文件中使用{{}} 显示出来

 

3. 显示创建heros组件

想要去显示就必须把它加在壳组件 AppComponent的模板中

app-heros 就是HerosComponent 的元素选择器 所以要把 <app-heroes></app-heroes> 添加到APPComponent的模板文件中就可以

 

4. 运行 使用 命令行 ng serve --open 这样就会自动去运行出来 ctrl + s 也会自动刷新

 

5. 再去创建一个 Hero 类 去模拟更多的数据

在 src/app 下面 创建 hero.ts 并且添加 id和name 属性

export class Hero {

id: number;

name: string;

}

回到heroes的 类文件中 去引入这个类 去进行传值 把原来的 hero=“变量内容” 替换为

hero:Hero = {

id:1,

name:"WindStorm"

}

这样会出现显示错误 因为这是一个对象 我们可以使用 hero.id .name 进行显示 同时还可以进行格式化 <h2>{{hero.name | uppercase}} Details</h2> name值就变成了大写 有很多管道 黑可以自己创建

 

6. 英雄的名字改为可编辑 就得需要用到输入框 能够同时进行显示和修改英雄的name属性 数据流从 组件类流出到屏幕，再从屏幕回到屏幕的组件类 要在表单元素<input>和组件的 hero.name 属性之 间建立双向的数据绑定

<div>

<label>name:

<input [(ngModel)]="hero.name" placeholder="name">

</label>

</div>

[(ngModel)] 是 Angular 的双向数据绑定语法。

这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以双向流动：从 hero.name 属性流动到 textbox，并且从 textbox 流回到 hero.name 。

但是不能够显示了 因为 ngModel 在默认情况下是不可用的 要自己进行添加

但是实际测试是可以的 可能是因为官网没有更新

 

小结：

你使用 CLI 创建了第二个组件 HeroesComponent。

• 你把 HeroesComponent 添加到了壳组件 AppComponent 中，以便显示它。
• 你使用 UppercasePipe 来格式化英雄的名字。
• 你用 ngModel 指令实现了双向数据绑定。
• 你知道了 AppModule。
• 你把 FormsModule 导入了 AppModule，以便 Angular 能识别并应用 ngModel 指令。
• 你知道了把组件声明到 AppModule 是很重要的，并认识到 CLI 会自动帮你声明它。

 

 

7 . 显示一个英雄数据列表（还是创建一些模拟数据） 就是利用for 进行展示

创建一个 mock-heroes.ts 文件 包含是十个常量数组 HEROES

这个类其实一开始还是进行了引入 只是把格式进行了传值

import { Hero } from './hero';

export const HEROES: Hero[] = [

{ id: 11, name: 'Mr. Nice' },

{ id: 12, name: 'Narco' },

{ id: 13, name: 'Bombasto' },

{ id: 14, name: 'Celeritas' },

{ id: 15, name: 'Magneta' },

{ id: 16, name: 'RubberMan' },

{ id: 17, name: 'Dynama' },

{ id: 18, name: 'Dr IQ' },

{ id: 19, name: 'Magma' },

{ id: 20, name: 'Tornado' }

];

在 heroes.component 里面进行引入HEROES 然后声明属性进行赋值 heroes = HEROES;

<li *ngFor="let hero of heroes">

*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。

在这个例子中

<li> 就是 *ngFor 的宿主元素

heroes 就是来自 HeroesComponent 类的列表。

当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。

8. 进行相关的css样式绑定

你曾在 styles.css 中为整个应用设置了一些基础的样式。 但那个样式表并不包含英雄列表所需的样式。固然，你可以把更多样式加入到 styles.css，并且放任它随着你添加更多组件而不断膨胀。但还有更好的方式。你可以定义属于特定组件的私有样式，并且让组件所需的一切（代码、HTML 和 CSS）都放在一起。这种方式让你在其它地方复用该组件更加容易，并且即使全局样式和这里不一样，组件也仍然具有期望的外观。你可以用多种方式定义私有样式，或者内联在 @Component.styles 数组中，或者在 @Component.styleUrls 所指出的样式表文件中。

@Component 元数据中指定的样式和样式表都是局限于该组件的。 heroes.component.css 中的样式只会作用于 HeroesComponent，既不会影响到组件外的 HTML，也不会影响到其它组件中的 HTML。

 

9 。 主从结构 进行相关的监听英雄条目的点击事件 并且更新英雄的详情

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> //这是格式

click 外面的圆括号会让Angular 监听这个<li> 元素的click事件 当用户点击<li>时 就会执行表达式 onSelect(hero) 并且onSelect() 是HeroComponent 上的一个方法

添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

selectedHero: Hero;

onSelect(hero: Hero): void { 这句就是传进来的英雄详情

this.selectedHero = hero;

}

重点： 我不明白是因为我笨还是啥 我这个地方想了好久

原来的时候这地方是数据绑定 现在他把原来的传值赋值 给不用了 你这么想他是想做一个详情的东西 你点击她把点击的数据英雄给你 然后你就要把数据附上去 付给那个格式 这样你点击哪一个就是把那个模板改了进行传值 然后进行显示

还有就是一开始 selectedHero 传的值就是引入进来的Hero 是空的 所以详情是没办法显示的 所以上来要先判断否为空 用到 *ngIf="selectedHero" 他会帮你一处

格式 外面包裹 <div *ngIf="selectedHero">

绑定点击之后的样式 意思就是点击了之后 给他添加一个css名

Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。

[class.selected]="hero === selectedHero" 所在点击的 <li>

10. 主从组件 意义就是能够把多次复用的组件进行拆开多次利用 忽然想到在在写多个页面的时候，我们就把每个页面都写成一个组件有自己的配置文件 然后呢 你把每个页头当作一个组件，进行复用 这样就是一个网站的大体想法 暂时先这么理解 后面想到更全面的再来补充

官网上边说 把所有特性都房子啊同一个组件中 将会使应用“长大：后不可维护 你要把大型组件拆分成小一点的子组件 每个组件都要集中精力处理某个特定的任务或工作流

这节就是拆分英雄详情 制作HeroDetailComponent

利用 CLI 生成 hero-detail的组件

 

首先 把原来组件中的HTML英雄详情 剪切 粘贴

官网说 要把selectedHero 替换成 hero 这样的话 就是不只是显示点击英雄的详情 都要显示

所以用到一个 @Input() hero 属性 Input需要在本组件中进行 导入因为他是angular的属性

 

@Input() hero: Hero;

 

 

 

显示组件 HeroDetailComponent

你想 HerosComponent 是主组件是父组件 要在它里面显示详情所以 你不用修改他的类文件 但是要修改他的模板文件 HeroDetailComponent 的选择器是 <app-hero-detail> 所以就是

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

[hero]="selectedHero" 是 Angular 的属性绑定语法。 这是单向数据绑定 从 HeroesComponent 的 selectedHero 属性绑定到目标元素的 hero 属性，并映射到了 HeroDetailComponent 的 hero 属性。现在，当用户在列表中点击某个英雄时，selectedHero 就改变了。 当 selectedHero 改变时，属性绑定会修改 HeroDetailComponent 的 hero 属性，HeroDetailComponent 就会显示这个新的英雄。

类似于点击事件 只不过传参变成了属性绑定 这样就可以 进行组件之间的相互通信 然后相互的数据显示

 

小总结 感觉还可以

 

11. 服务 截止到目前 还都是模拟数据

 

官网说 服务会了之后 HeroComponent 变得更加精简 并且聚焦于为它的视图提供支持 这也让它更加 容易模拟服务进行单元测试

官网还说了 组价不应该直接获取或者保存数据 他们不应该了解是否展示的是假的数据 他们应该聚焦于展示数据 而把数据访问的职责委托给某个服务

我说 我知道 哈哈 Android就是这样 因为人家还有5各组件来 其实无非就是站在大的角度上看着 你做你的 我做我的 我们之间相互来往 减少不必要的损耗 减少代码冗余

官网又说了 你要创建一个HeroService 应用中的所用的类都可以找他来获取英雄列表 不要用new来创建此服务 而要依靠Angular的 依赖注入机制（我靠 这个我一直没懂）把它注入到HeroesComponent的构造函数里面

官网我觉得你要闭嘴--------上图

 

创建 服务 ng generate service hero

他可以从任何地方获取数据 web服务 本地存储 或 一个模拟的数据源

OK 出现 hero.service.ts @Injectable() 服务 (说真的我到这真的没懂）

 

提供(provide) HeroService （还是没懂）

 

当你在顶层提供服务时 angular就会为 HeroService 创建一个单一的，共享的实例，并把它注入到任何想要他的类上 在@Injectable 元数据中注册过提供商 还能让Angular 可以通过移除那些完全没有用过的服务 来进行优化

实现步骤

1 操作 修改 HeroesComponent 不要HEROES 了 要 HeroService(说的是导包）、

2在 服务的代码里面 写一个 getHeroes(): Hero[] {return HEROES;} 模拟返回数据

3在跟组件里面 的 构造函数里面 进行 constructor(private heroService: HeroService) { }

这个参数同时做了两件事：1. 声明了一个私有 heroService 属性，2. 把它标记为一个 HeroService 的注入点。当 Angular 创建 HeroesComponent 时，依赖注入系统就会把这个 heroService 参数设置为 HeroService 的单例对象。

4. 创建一函数 从服务里面去接收值

getHeroes(): void {

this.heroes = this.heroService.getHeroes();

}

5. 调用这个函数 他会把 heroes的值改成对象返回过来的

6 。 在 ngOnInit(){ } 进行调用 这是生命周期钩子函数 他会在构造出HeroesComponent 的实例之后的某个合适的时机调用

 

个人理解： 这个案例的意思就是 把原来的 HEROES 的数据改为 服务去获取在服务里面去写一个方法然后返回 HEROES 的数据 然后在 主组件里面 的构造函数里面 声明一个私有化类型为 HeroService 其实就是在创建一个服务类的对象 然后通过对象去拿数值 注意angular6 才会有Injection root 如果不是 那就在APP module里面声明那个服务类

 

12 . 可观察（Observable） 的数据 （我不知道这是什么东西）

Observable 是 RxJS库 中的一个关键类 Angular HttpClient 的方法会返回 RxJS 的 Observable。 使用 RxJS 的 of() 函数来模拟从服务器返回数据。

说白了其实在上面的获取模拟数据里面是不对的 请求数据是异步加载 要不然你拿不到啊 所以前端必须用 RxJS

这个案例 就是 创建一个组件 进行服务的嵌套 模拟服务器端的数据 所以暂时不看了 等有空再看 直接去HTTP 下一节路由

13. 路由

添加 APPRoutingModule Angular的最佳实践就是在一个独立顶尖模块中加载和配置路由器 他专注于路由功能 然后由根模块 AppModule 导入他

 

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

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。

--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

一般不会在路由模块中声明组件 所以可以删除@NgModule.declarations 并删除对CommonModule的引用 会使用RouterModule 中的Routers类来配置路由器 所以还要从 @angular/router 库中导入这两个符号。添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。（其实就是需要一个固有的配置）

 

路由定义 会告诉路由器 当用户点击某个链接或者在浏览器的地址栏输入某个URL时 要显示哪个视图

典型的Angular 路由（router）有两个属性：

1. path ： 一个用于匹配浏览器地址栏中的URL的字符串

2.component： 当导航到此路由时 路由器应该创建哪个组件

例如 such as (就会这一个单词了）

如果你希望当URL为 localhost：4200/heros 时 就导航到Heroescomponent

首先要导入 HeroesComponent 以便于在Router中引用他 然后定义一个路由数组 其中某个路由是指向这个组件的 例如 上图

 

完成这些设置后 路由器将会把URL 匹配到 path:'heroes ' 并显示 HeroesComponent组件

RouterModule。forRoot（）

你必须要先初始化路由器 并让他开始监听浏览器中的地址变化

把 RouterModule 添加到 @NgModule.imports 数组中，并用 routes 来配置它。你只要调用 imports 数组中的 RouterModule.forRoot() 函数就行了。

 

添加路由出口（RouterOutlet)

把原来的模板的<app-heroes>替换成<router-outlet> 之所以会替换 说是因为只有用户导航到这里时 才需要显示 HeroesComponent 但是<router-outlet>会告诉路由器要在哪里显示路由到的视图

在APPcomponent的模板文件里面 写一个nav 包含a 属性 routerLink=“/heros” 这样就可以进行跳转

继续

添加仪表盘视图 路由只有在视图的时候 才管用

所以 添加一个组件 就是仪表盘的组件 ng generate component dashboard

这个仪表盘里面就只有4个英雄 只是为了显示 利用的是 HeroService的数据进行截取

getHeroes(): void {

this.heroService.getHeroes()

.subscribe(heroes => this.heroes = heroes.slice(1, 5));

}

然后使用 *ngFor 进行相应的循环输出

然后进行仪表盘的路由添加 导包 和 path

再然后 我们需要进行 默认路由的添加 你想 在APPcomponent 的HTML里面 就只有两个按钮只有你点了才会出现下面的内容 所以我们希望是先要显示仪表盘里的Dashboard

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

这个路由会把一个与空路径“完全匹配”的 URL 重定向到路径为 '/dashboard' 的路由。

现在你就可以看见 显示出现 四个英雄的相关组件 上面有两个超链接

 

导航到英雄的详情 1 我们需要在那四个的页面可以进行点击进入详情

2 我们需要在英雄列表里面进行点击去进入详情

3 在地址栏里面进行相应的地址粘贴去显示英雄

删除在HeroesComponent里面的英雄详情

思路

那我们应该怎么想呢 其实 路由的作用就是 切换相应的视图显示与不显示 在那个主要的APPcomponent模板文件里面 有一个路由入口 然后还有两个显示谁的超链接 这样的话 我们就进行切换的显示 在那个显示的详情 首先你要有点击事件就是跳转的连接也可以 那么重点就是谁点击的所以我们把原来点击的连接 routerLink=“./ashboard/{{hero.id}}" 写在这个位置同时这个不是用的ngFor吗，那就可以进行相应的本元素数据获取heroid 就是真么来的 ， 就是给他们用循环进行添加这个 然后我们在 详情里面有方法获取URL 然后ID的区分获取相应的显示数据

 

具体实现： 我们去看官网吧 他的那个详情图的显示使用了很多的方法 我不明白 所以我就不想写了用到在看 但是套路得知道 要不然及时没懂

14. HTTP

到时候回来重新写 因为官网的案例比较乱 而且有很多没用的东西 所以需要重新进行操作重新记录

 

实现要求

1.HeroService通过HTTP 请求获取英雄数据

2.可以添加，编辑，删除 保存HTTP的更改

3. 可以根据名字搜索英雄

启用 HTTP 服务

打开根模块 AppModule，

从 @angular/common/http 中导入 HttpClientModule 符号，

 

15.架构模式

Angular 是一个HTML 和 TS 构建客户端 应用的平台与框架

 

5. 调用这个函数 他会把 heroes的值改成对象返回过来的

6 。 在 ngOnInit(){ } 进行调用 这是生命周期钩子函数 他会在构造出HeroesComponent 的实例之后的某个合适的时机调用

 

个人理解： 这个案例的意思就是 把原来的 HEROES 的数据改为 服务去获取在服务里面去写一个方法然后返回 HEROES 的数据 然后在 主组件里面 的构造函数里面 声明一个私有化类型为 HeroService 其实就是在创建一个服务类的对象 然后通过对象去拿数值 注意angular6 才会有Injection root 如果不是 那就在APP module里面声明那个服务类

 

12 . 可观察（Observable） 的数据 （我不知道这是什么东西）

Observable 是 RxJS库 中的一个关键类 Angular HttpClient 的方法会返回 RxJS 的 Observable。 使用 RxJS 的 of() 函数来模拟从服务器返回数据。

说白了其实在上面的获取模拟数据里面是不对的 请求数据是异步加载 要不然你拿不到啊 所以前端必须用 RxJS

这个案例 就是 创建一个组件 进行服务的嵌套 模拟服务器端的数据 所以暂时不看了 等有空再看 直接去HTTP 下一节路由

13. 路由

添加 APPRoutingModule Angular的最佳实践就是在一个独立顶尖模块中加载和配置路由器 他专注于路由功能 然后由根模块 AppModule 导入他

 

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

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。

--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

一般不会在路由模块中声明组件 所以可以删除@NgModule.declarations 并删除对CommonModule的引用 会使用RouterModule 中的Routers类来配置路由器 所以还要从 @angular/router 库中导入这两个符号。添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。（其实就是需要一个固有的配置）

 

路由定义 会告诉路由器 当用户点击某个链接或者在浏览器的地址栏输入某个URL时 要显示哪个视图

典型的Angular 路由（router）有两个属性：

1. path ： 一个用于匹配浏览器地址栏中的URL的字符串

2.component： 当导航到此路由时 路由器应该创建哪个组件

例如 such as (就会这一个单词了）

如果你希望当URL为 localhost：4200/heros 时 就导航到Heroescomponent

首先要导入 HeroesComponent 以便于在Router中引用他 然后定义一个路由数组 其中某个路由是指向这个组件的 例如 上图

 

完成这些设置后 路由器将会把URL 匹配到 path:'heroes ' 并显示 HeroesComponent组件

RouterModule。forRoot（）

你必须要先初始化路由器 并让他开始监听浏览器中的地址变化

把 RouterModule 添加到 @NgModule.imports 数组中，并用 routes 来配置它。你只要调用 imports 数组中的 RouterModule.forRoot() 函数就行了。

 

添加路由出口（RouterOutlet)

把原来的模板的<app-heroes>替换成<router-outlet> 之所以会替换 说是因为只有用户导航到这里时 才需要显示 HeroesComponent 但是<router-outlet>会告诉路由器要在哪里显示路由到的视图

在APPcomponent的模板文件里面 写一个nav 包含a 属性 routerLink=“/heros” 这样就可以进行跳转

继续

添加仪表盘视图 路由只有在视图的时候 才管用

所以 添加一个组件 就是仪表盘的组件 ng generate component dashboard

这个仪表盘里面就只有4个英雄 只是为了显示 利用的是 HeroService的数据进行截取

getHeroes(): void {

this.heroService.getHeroes()

.subscribe(heroes => this.heroes = heroes.slice(1, 5));

}

然后使用 *ngFor 进行相应的循环输出

然后进行仪表盘的路由添加 导包 和 path

再然后 我们需要进行 默认路由的添加 你想 在APPcomponent 的HTML里面 就只有两个按钮只有你点了才会出现下面的内容 所以我们希望是先要显示仪表盘里的Dashboard

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },

这个路由会把一个与空路径“完全匹配”的 URL 重定向到路径为 '/dashboard' 的路由。

现在你就可以看见 显示出现 四个英雄的相关组件 上面有两个超链接

 

导航到英雄的详情 1 我们需要在那四个的页面可以进行点击进入详情

2 我们需要在英雄列表里面进行点击去进入详情

3 在地址栏里面进行相应的地址粘贴去显示英雄

删除在HeroesComponent里面的英雄详情

思路

那我们应该怎么想呢 其实 路由的作用就是 切换相应的视图显示与不显示 在那个主要的APPcomponent模板文件里面 有一个路由入口 然后还有两个显示谁的超链接 这样的话 我们就进行切换的显示 在那个显示的详情 首先你要有点击事件就是跳转的连接也可以 那么重点就是谁点击的所以我们把原来点击的连接 routerLink=“./ashboard/{{hero.id}}" 写在这个位置同时这个不是用的ngFor吗，那就可以进行相应的本元素数据获取heroid 就是真么来的 ， 就是给他们用循环进行添加这个 然后我们在 详情里面有方法获取URL 然后ID的区分获取相应的显示数据

 

具体实现： 我们去看官网吧 他的那个详情图的显示使用了很多的方法 我不明白 所以我就不想写了用到在看 但是套路得知道 要不然及时没懂

14. HTTP

到时候回来重新写 因为官网的案例比较乱 而且有很多没用的东西 所以需要重新进行操作重新记录

 

实现要求

1.HeroService通过HTTP 请求获取英雄数据

2.可以添加，编辑，删除 保存HTTP的更改

3. 可以根据名字搜索英雄

启用 HTTP 服务

打开根模块 AppModule，

从 @angular/common/http 中导入 HttpClientModule 符号，

 

15.架构模式

Angular 是一个HTML 和 TS 构建客户端 应用的平台与框架