前言
今天是2017年3月7日，Angular 2.0目前最新版本是 2.0.0-beta.17。網絡上搜索到的Augular項目及實例，大部分都是1.x版本的，即使是使用2.x版本的Demo，由于寫作時間關系，部分的代碼顯得有些過時。
本系列希望通過一步步實現一個郵件發送應用，講解Angular 2.0中的Route、Module、Component、Service、Dependency Inject等的實現。
準備工作
打開網站 https://plnkr.co/edit，點擊“New”->"Angular 2.x"，新建一個基本的Angular 2.0腳手架項目。
腳手架項目包含6個文件，分別是 config.js、index.html、README.md、src/app.ts、src/main.ts、style.css。其中，style.css是一個空文件，可以忽略之；README.md文件，熟悉Github這個全球最大的gay gay land的同學應該知道，這是markdown語法的項目說明文件，目前也可以忽略之。
Plunker編輯器
- index.html
<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
Index.html文件后面基本不會進行任何修改，有興趣了解其中包含JS文件的含義及作用的，請自行Google，俺就不做大自然的搬運工了。
按照慣例，先給index.html，<title></title>標簽后添加Bootstrap 資源鏈接。
<title>angular2 playground</title>
......
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
......
index.html文件中有一段這樣的代碼
<my-app>
loading...
</my-app>
<my-app>標簽是非HTML標準標簽，這是一個Angular Component （組件），需要有一個文件實現對應的my-app組件。
在index.html文件中還引用了config.js文件。
- config.js
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
config.js文件，基本不需要修改，改名控的同學可以修改的位置就兩個地方，分別是'/src'（源代碼路徑）和'./main.ts'（應用程序入口）：
'app': './src',
......
main: './main.ts',
- main.ts 應用程序入口
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
//從當前文件（main.ts）同文件夾內的app.ts（不需要寫ts后綴）文件中導入AppModule類
platformBrowserDynamic().bootstrapModule(AppModule)
//啟動AppModule
- app.ts
//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
//組件模板
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
</div>
`,
})
//組件類
export class App {
name:string;
constructor() {
this.name = 'Angular2'
}
}
// 啟動模塊 AppModule
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
Template 中使用 ` 而不是單引號 ' ，原因請看 模板字符串 說明。
因為代碼不多，Module、Component、Template三個部分寫在同一個ts文件中。
我們的目標
- 美觀大方的界面
- 實現SPA頁面路由
- 實現組件Javascript、HTML代碼文件分離
界面布局實現
把app.ts拆分為app.ts、app.component.ts、app.template.html
- app.ts
//our root app component
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {App} from './app.component'
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
- app.component.ts**
import {Component} from '@angular/core'
@Component({
selector: 'my-app',
moduleId: __moduleName,
templateUrl: './app.template.html'
})
export class App {
name:string;
constructor() {
this.name = 'Angular2'
}
}
- app.template.html
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">AngularJS Demo</a>
</div>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">Page 1</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 navbar-text">? 2017 | <a href="http://www.lxweimin.com/u/15de06e8d059" target="_blank" class="navbar-link">程序員長春</a>
</div>
</div>
</div>
</nav>
組件代碼分離
為簡單起見，只實現兩個路由頁面，home和login。
- 添加文件 src/home/home.component.ts、src/home/home.template.html
** home.component.ts **
import {Component} from '@angular/core'
@Component({
selector: 'home',
moduleId: __moduleName,
templateUrl: './home.template.html'
})
export class HomeComponent {
}
** home.template.html **
// 這部分HTML只是為了頁面好看，隨便寫了點，如果沒有，也是可以的。
<div class="jumbotron">
<div class="container">
<div class="page-header text-center">
<h1>AngularJS Demo</h1>
</div>
<p>AngularJS 演示程序，包括且不限于Module, Route, LocalStorageService, ajax web API consumer等功能。</p>
</div>
</div>
- 添加文件 src/login/login.component.ts、src/login/login.template.html
** login.component.ts **
import {Component} from '@angular/core'
@Component({
selector: 'login',
moduleId: __moduleName,
templateUrl: './login.template.html'
})
export class LoginComponent{
}
** login.template.html **
// 這部分HTML只是為了頁面好看，隨便寫了點，如果沒有，也是可以的。
<div class="container">
<div id="loginbox" style="margin-top:100px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign In</div>
</div>
<div style="padding-top:30px" class="panel-body">
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-success">Login </a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
頁面路由實現
- 修改app.ts, app.template.html
** app.ts **
//our root app component
import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {App} from './app.component'
--- 添加路由代碼 ---
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' }
];
@NgModule({
imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ],
declarations: [ App, HomeComponent, LoginComponent ],
bootstrap: [ App ]
})
--- 修改結束 ---
export class AppModule {}
** app.template.html **
修改超級鏈接為路由鏈接，加入路由選擇器"<router-outlet></router-outlet>"。
--- 新代碼 ---
<a class="navbar-brand" routerLink="/home">{{ name }} Demo</a>
... ...
<li><a routerLink="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
......
<router-outlet></router-outlet>
總結
在本文中，我們從一個最基本的Angular腳手架，一步步添加內容，實現了Bootstrap布局，Angular 路由，一個簡單的首頁和一個登陸頁面。
首頁
登陸
在線預覽請點擊: Angular 2.0 Demo
下篇預告
添加一個受保護頁面，只有通過驗證后才能訪問收保護頁面。
