angular4系列之初识

亮点

• 脚手架
• 服务端渲染
• 移动和桌面兼容

初识

• 1. 安装angular-cli
     
     • npm install -g angular-cli@latest
• 1. 因为angular-cli是用typescript写的，安装typescript typings：
     
     • npm install -g typescript typings
• 1. 如果安装出现失败时试一下这个命令
     
     • npm cache clean –force
     • 删除缓存目录下的所有数据。从 npm@5 开始，为了保证缓存数据的有效性和完整性，需要加上 –force 参数。

差值表达式{{}}

• 双大括号是Angular中的插值表达式绑定语法
• 单向数据绑定的一种形式

[{ngModel}]=”属性名称”

• Angular 2 中 ==[] 实现了模型到视图的数据绑定，() 实现了视图到模型的事件绑定。两个结合在一起 [()] 就实现了双向绑定==。
• [(ngModel)]是一个Angular语法，用与把hero.name绑定到输入框中。 它的数据流是双向的：从属性到输入框，并且从输入框回到属性。

*ngFor=”let item of arry”

• ngFor的*前缀表示 < li > 及其子元素组成了一个主控模板。
• 循环

(click)=”onSelect(hero)” 点击事件

• （事件名称）=”点击事件函数名(参数)”

*ngIf=”true/false”

[class.selected]=”hero === selectedHero”

• 当hero === selectedHero时 会给此标签添加selected这个类样式

  属性绑定

<img [src]="imgUrl" />

• [属性]=’变量名’

样式绑定

<span [class.stylename]="isTrue" ></span>

• [class.样式类名]=”变量（true/false）”

组件

• 在类中定义组件的应用逻辑，为视图提供支持。 组件通过一些由属性和方法组成的 API 与视图交互。
• 装饰器 组件元数据装饰器

组件的必要素

• 装饰器@Component()
• 模板Template
• 控制器Controller
• 模板和控制器通过数据绑定联系

import { Component } from "@angular/core";@Component({    selector:'hero-detail'})export class HeroDetailComponent{}

• 要定义一个组件，总是要先导入符号Component。
• @Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名，用于在父组件的模板中标记出当前组件的位置。
• 总是export这个组件类，因为你必然会在别处import它。

父组件像子组件传值 输入属性

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

• 在等号的左边，是方括号围绕的hero属性，这表示它是属性绑定表达式的目标。
• 我们要绑定到的目标属性必须是一个输入属性，否则Angular会拒绝绑定，并抛出一个错误。

• 输入属性：

  • 引入Input

      import { Component, Input } from '@angular/core';    export class HeroDetailComponent {         @Input() hero: Hero;    }

声明组件

• 每个组件都必须在一个（且只有一个）Angular模块中声明。
• 倒入模块：import { HeroDetailComponent } from ‘./hero-detail.component’;
• 将组件添加到该模块的declarations数组中：declarations: [AppComponent,HeroDetailComponent]
• 通常，declarations数组包含应用中属于该模块的组件、管道和指令的列表。 组件在被其它组件引用之前必须先在一个模块中声明过。

服务

• 命名规则：
  
  • 遵循的文件命名约定是：服务名称的小写形式（基本名），加上.service后缀。 如果服务名称包含多个单词，我们就把基本名部分写成中线形式 (dash-case)。 例如，SpecialSuperHeroService服务应该被定义在special-super-hero.service.ts文件中。
• 可注入的服务 导入了 Angular 的Injectable函数，并作为@Injectable()装饰器使用这个函数。

import { Injectable } from "@angular/core";@Injectable()export class HeroService{}

• Service可以从任何地方获取Hero数据 —— Web服务、本地存储或模拟数据源

import { Injectable } from "@angular/core";import {Hero} from './hero';import { HEROES } from "./mock-heroes";@Injectable()export class HeroService{    // 添加一个桩方法    getHeroes():Hero[] {        return HEROES;    }}

• 注入服务
  
  • 添加一个构造函数，并定义一个私有属性。
  • 添加组件的providers元数据。

@Component({    providers:[服务名称]})export class AppComponent {  // 构造函数  constructor(private heroService:HeroService){}}

• 构造函数：构造函数是为了简单的初始化工作而设计的，例如把构造函数的参数赋值给属性。

生命周期函数

• 组件生命周期的几个关键时间点：刚创建时、每次变化时，以及最终被销毁时
• 每个接口都有唯一的一个方法。只要组件实现了这个方法，Angular 就会在合适的时机调用它。
• ngOnInit

接口

• OnInit
• OnDestroy
• DoCheck
• OnChanges
• AfterContentInit
• AfterContentChecked
• AfterViewInit
• AfterViewChecked

函数名

• ngOnChanges - 当输入/输出绑定的值改变时调用
• ngOnInit - 在第一次 ngOnChanges 后调用【组件实例化之后会调用一次】
• ngDoCheck - 自定义的方法，检测和处理值的改变
• ngAfterContentInit - 在组件内容初始化之后调用
• ngAfterContentChecked - 组件每次检查内容时调用
• ngAfterViewInit - 组件相应的视图初始化之后调用
• ngAfterViewChecked - 组件每次检查视图时调用
• ngOnDestroy - 指令销毁前调用。

异步请求

• 可以使用承诺（Promise），它是一种异步技术，我们得修改这个实现，把它变成基于承诺的，并在承诺的事情被解决时再行动。 一旦承诺的事情被成功解决（Resolve）

export class HeroService {  getHeroes(): Promise<Hero[]> {    return Promise.resolve(HEROES);  }}

• 把回调函数作为参数传给承诺对象的then方法

getHeroes(): void {  this.heroService.getHeroes().then(heroes => this.heroes = heroes);}

• 我们可以模拟慢速连接。导入Hero类，并且在HeroService中添加如下的getHeroesSlowly()方法：

getHeroesSlowly(): Promise<Hero[]> {  return new Promise(resolve => {    // Simulate server latency with 2 second delay    setTimeout(() => resolve(this.getHeroes()), 2000);  });}

• 从HeroesComponent的providers数组中移除了HeroService服务， 并把它添加到AppModule的providers数组中。 这个改动创建了一个HeroService的单例对象，应用中的所有组件都可以使用它

@NgModule({    providers:[HeroService]})

路由

• Angular 路由器是一个可选的外部 Angular NgModule，名叫RouterModule。 路由器包含了多种服务(RouterModule)、多种指令(RouterOutlet、RouterLink、RouterLinkActive)、 和一套配置(Routes)。
• 打开index.html，确保它的区顶部有一个元素（或动态生成该元素的脚本）。【这个标签是必须的，代表基地址】

• 配置路由

  • 在 app.module.ts文件中引入路由模块并进行配置

  import { RouterModule }   from '@angular/router';import { HeroesComponent } from "./heroes.component";@NgModule({    imports:[         RouterModule.forRoot([          {            path: 'heroes',            component: HeroesComponent          }        ])    ]})

  • Path: 路由器会用它来匹配浏览器地址栏中的地址
  • Component: 导航到此路由时，路由器需要创建的组件
• 路由出口

<router-outlet> </router-outlet>

• 路由链接

<a routerLink="/heroes">Heroes</a>

• 重定向路由

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

• 带参数路由

  • /detail/:id
  • URL中的/detail/部分是固定不变的，但结尾的数字id部分会随着英雄的不同而变化。 我们要把路由中可变的那部分表示成一个参数 (parameter) 或令牌 (token) ，代表英雄的id。
  • 路径中的冒号 (:) 表示:id是一个占位符，当导航到这个HeroDetailComponent组件时，它将被填入一个特定英雄的id

  {  path: 'detail/:id',  component: HeroDetailComponent},

• 点击路由到详情页

  • 修改之前的detailsComponent文件
  • 从ActivatedRoute服务的可观察对象params中取得id参数， 并通过HeroService服务获取具有这个指定id的英雄数据。
  • 先倒入

  import { Component, Input, OnInit } from '@angular/core';import { ActivatedRoute, ParamMap } from '@angular/router';import { Location }                 from '@angular/common';import { HeroService } from './hero.service';

  • switchMap是angular官方给的拿取url参数的方法，也是需要预先导入才可以使用：

  import 'rxjs/add/operator/switchMap';

  • 然后注入ActivatedRoute和HeroService服务到构造函数中，将它们的值保存到私有变量中：
  • JavaScript 的 (+) 操作符把路由参数的值转成数字。

  ngOnInit(): void {  this.route.paramMap    .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))    .subscribe(hero => this.hero = hero);}

  • 注意switchMap运算符如何将可观察的路由参数中的 id 映射到一个新的Observable， 即HeroService.getHero()方法的结果。如果用户在 getHero 请求执行的过程中再次导航这个组件，switchMap 再次调用HeroService.getHero()之前， 会取消之前的请求。

  ？？？？？？？

• routerLinkActive指令

  • Angular路由器提供了routerLinkActive指令，我们可以用它来为匹配了活动路由的 HTML 导航元素自动添加一个 CSS 类

  <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>

名词

• 路由
• 子路由
• 保护路由
• 辅助路由
• 视图状态集合

基础知识

• ng new router –routing
• webstorm中，倒入某个模块的快捷键command+1
• path: ” 冒号中不要在开头写/
• RoutLink中要写/开头，相当于路由到跟路由，=[“/router”] ,是数组
• 显示不存在多路由页面时候配置路由

{path:'**',component:code404Component}

• 路由器采用先匹配者优先，所以**陪在最后

文件上传

• 参考文档

• 参考文档2