angular2的尝试

从angular1进入angular2还是有一些不适应的，我原本1是使用原生js进行编写，angular2提供了typescript的方式进行编写，强类型可以比较方便在代码交付前检查出绝大部分问题，所以我选择使用ts编写代码。
在2里面，angular的一个文件做一个模块开发理念做的更加彻底。
一些常见的指令也改变了

//1的循环渲染指令
<li ng-repeat="name in nameList" >
//2的循环渲染指令
<li *ngFor="#Hero of Herolist" >

下面我用代码讲解下

提供一个main.ts做为主入口

//这个是自举平台
import {bootstrap}  from 'angular2/platform/browser';
// 这个是路由支持，可以写在单模块里，但是我在实践的过程中发现，它只允许一个实例，而我需要多个模块使用，所以就直接在构造入口直接声明。这样所有模块都能得到支持。
import {ROUTER_PROVIDERS} from 'angular2/router';
// 我们软件的入口
import {AppComponent} from './app.component';
//自举，（自举任务可以多开）
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

我们自己的软件主文件app.component.ts

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {LoginComponent} from './login.component';
import {RegistComponent} from './regist.component';
import {DefaultComponent} from './default.component';
import {SearchComponent} from './search.component';
import {Pagecomponent} from './page.component';

@Component({
  selector: "my-app",
  // 如果需要独立模版文件，可以这样写
  // templateUrl: 'app/search.component.html',
  // 这里是直接将模版文件嵌套到模块文件内
  template: `
    <div class="topbar">
      <div class="topbar-menu">
        <a [routerLink]="['Default']" class="topbar-button">{{title}}</a>
        <a [routerLink]="['Login']" class="topbar-button">登录</a>
        <a [routerLink]="['Regist']" class="topbar-button">注册</a>
      </div>
    </div>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app/index.component.css', 'app/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
})
// 注意项目Route配置只能有一个，除非，你再声明一个bootstrap
@RouteConfig([
  {
    path: '/default',
    name: 'Default',
    component: DefaultComponent,
    //这里我原本想设置为默认页面，但是发现如果这样会导致浏览区读取服务器文件路径的错误。如果作为默认页面估计是要单独一个'/'反斜杠吧
  },
  {path: '/login', name: 'Login', component: LoginComponent},
  {path: '/regist', name: 'Regist', component: RegistComponent},
  {path: '/search/:name', name: 'search', component: SearchComponent},
  {path: '/page/:id', name: 'Page', component: Pagecomponent}
])
export class AppComponent {
    public title = "主页";
}

上面基本就是静态模版模块的样子了，接下来介绍下使用http这个模块，

import { Component, Input, OnInit} from 'angular2/core';
import { RouterOutlet, Router, RouteParams } from 'angular2/router';
import {Observable} from "rxjs/Observable";//这个用来解决获取服务器响应数据的
import {HTTP_PROVIDERS} from "angular2/http";// 这个是http支持

import {Hero, HeroService} from './herolist.service';// 这个是获取服务器数据的独立模块

@Component({
  selector: 'cate-search-detail',
  templateUrl: 'app/search.component.html',
  styleUrls: ['app/index.component.css', 'app/search.component.css'],
  providers: [HTTP_PROVIDERS, HeroService]
})
export class SearchComponent implements OnInit {
  herolist: Hero[];
  errorMessage: string;
  constructor(
    private _routerParams: RouteParams,
    private _router: Router,
    private _Heroserve: HeroService){}

  ngOnInit() {
    let name = this._routerParams.get('name');
    // 这里做一个回调函数，当请求数据完成，赋值给this.herolist，而这个变量一改变，模版文件也就会跟着改变，直接渲染出结果。
    //(注解：x => x，typescript会解释成function(x){ return x})
    this._Heroserve.getReq(name)
      .subscribe(
          herolist => this.herolist = herolist,
          error => this.errorMessage = <any>error);
  }

//我在模版文件里采用 (click)="gotoPage(offer.id)" 来触发路由请求
  gotoPage(id: number){
    let link = ["Page", {id: id}];
    this._router.navigate(link);
  }
}

下面是获取服务器数据的独立模块

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from "rxjs/Observable";
import "rxjs/Rx";

@Injectable()
export class HeroService{
  constructor(private http: Http){}

  private _url = "/data/cate?name="
  getReq(name: string){
    return this.http.get(this._url + name)
        .map(res => res.json())
        .do(data => console.log(data))
        .catch(this.handlerError);
  }

}