从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);
}
}