水文，写个小项目来熟悉下ng2啵，过程碰到什么记什么～

几个命令

通过angular-cli脚手架初始项目：ng new project-name（project-name是项目名）

启动项目：ng serve

创建组件：ng g component component-name （g是generator的缩写 生成）

angualr启动过程

angular-cli.json文件里，root->index的index.html是启动页面，root->main是启动脚本

ng2中的指令

class，*ngFor

1
<span class="glyphicon glyphicon-star" [class.glyphicon-star-empty]="star" *ngFor="let star of stars" ></span>

class的选择，star为true的时候class中加上glyphicon-star-empty

*ngFor和ng-repeat一个作用

component（组件）

必备元素

  • 装饰器@Component
  • 模版Template
  • 控制器Controller

@Input

组件内需要外界注入的属性，需要Input进来(不能直接Input，要先把这个服务import进来)

1
2
3
4
5
6
7
//小组件
import { Component,Input, OnInit } from '@angular/core';
@Input()
  rating:number = 0;
//调用组件的地方(父级？)
<app-stars [rating]="stock.rating"></app-stars>

Router 路由

  • Routes：路由配置

    1
    2
    3
    4
    const routes: Routes = [
      { path: '', component: HomeComponent},
      { path: 'product',component: ProductComponent}
    ];

    定义路由，path对应相对应的组件

    path里最前面不用加”/“，这是定义的跟路由，但在routerLink的时候是要加的

    设置404不存在页面，path:’**’即可，就代表了404的路径

    优先匹配原则，所以越广的越放在后面，比如404的

  • router-outlet：占位符指令

    是个插座，路由到的组件显示在它的后面

  • RouterLink：html中声明路由导航的指令

    1
    <a [routerLink]="['/product']">product</a>

    在a标签中加上这个属性，指向了这个路由地址。”/“是导航到跟路由

  • Router：负责在运行时执行路由的对象，可以用navigate等方法导航到指定路径

    1
    2
    3
    gotoProPage(){
        this.router.navigate(['product']);
    }

    html中(click)事件绑定到这个方法，Router依赖注入进来定义为router，达到跳转

  • ActivatedRoute:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    constructor(public routerInfo:ActivatedRoute) { }
    ngOnInit() {
        //快照
        // this.productId = this.routerInfo.snapshot.params["id"];
        //订阅
        this.routerInfo.params.subscribe((params:Params)=>{
          this.productId = params["id"];
        });
     }

    快照的方式，在一个页面切换到另一个路由就不会改变productId，因为ngOnInit就执行一次；但订阅的等于在监听变量的变化，获得现在的值

重定向路由

1
{ path: '', redirectTo:'/home',pathMatch: 'full'},

在路由配置中这样配置达到重定向的效果

子路由

数据绑定

  • 事件绑定，如(click)=”gotoDetail()”
  • html属性绑定
  • dom属性绑定

依赖注入

提供器的作用域

声明在app.module的provider中的提供器是全局可用的，什么组件内都可以注入这里的服务。

声明在组件的@Component中的provider只能在组件中使用，并且如果组件中声明的provider名字和全局中的一样时，会覆盖全局的（在这个组件里）

@Injectable装饰器

在provider中加上@Injectable才能在这个服务中注入别的服务，所以为了一致性，也为了不遗漏，每个provider创建的时候就加上@Injectable()

组件中没有这个装饰器也可以注入别的服务是因为有@Component装饰器，它是@Injectable装饰器的子类

响应式编程