如果不是去年换工作接触到AngularJS，估计是不会花时间去学习这个框架的，毕竟是前端的框架，不是自己熟悉的领域。但是为了混得下去，去年就学习了AngularJS的一些用法，当时还整理了一些积累 《AnguarJS测试的实施步骤整理》。
原以为可以凑合够用应付项目开发，没想到上个月公司前端扛大旗的人就说要使用Angular2，现有的AnagularJS 1.XX版本的代码会逐步升级到Angular2。去年就听说了AngularJS已经升级了，并且跟typescript联姻了，还听说typescript的语法跟C#很类似，说什么后台程序员学Angular2没有什么问题。也没有实际去学习，但目前项目需要用到，所以最近就启动了Angular2的学习过程，不指望在短期内精通，总得在新技术落地之前自己有个基础的知识，不至于手忙脚乱，也显得自己淡定。
接着讲讲Angular2，为什么少了JS？这就是最大的升级嘛？这也是个升级，没毛病。之前AngularJS的名称用于1.XXX版本，去年7月份Angular正式发布了2.0版本，也就这里说的Angular2。2.0版本几乎是break changes，也就是说跟之前的版本不兼容了，几乎推翻重来了，所以苦逼开发者还得重复学习轮子。新版本引入了typescript，typescript是javascript的超集，通过typescript可以生成javascript代码。然后还提出了很多新的概念，比如component，import，新的module，新的指令等等。总之有得你去学习。
这里不深入分析各个模块，自己也刚了解不久，这篇博文演示用Angular2创建一个Demo例子，用于直观感受，提提学习兴趣，找找自信心。
一、准备环境
a.安装Node.js和NPM
步骤不说了，安装完成之后命令行node –v, npm -v看看版本，比如我的分别是v6.9.2和3.10.9
b.找个开发工具，这里使用visual studio code，简单快捷
二、准备项目
a.准备package.json文件
新建一个目录todo/app
mkdir –p todo/app
然后cd到todo目录，新建一个package.json文件，使用过node.js的应该知道这是干嘛的，类似于asp.net core的project.json，定义了一些依赖内容。
package.json
{
"dependencies": {
"@angular/common": "2.2.0",
"@angular/compiler": "2.2.0",
"@angular/core": "2.2.0",
"@angular/forms": "2.2.0",
"@angular/platform-browser": "2.2.0",
"@angular/platform-browser-dynamic": "2.2.0",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26",
"core-js": "2.4.1",
"classlist.js": "1.1.20150312",
"systemjs": "0.19.40",
"bootstrap": "4.0.0-alpha.4"
},
"devDependencies": {
"lite-server": "2.2.2",
"typescript": "2.0.3",
"typings": "1.4.0",
"concurrently": "3.1.0"
},
"scripts": {
"start": "concurrently \"npm run tscwatch\" \"npm run lite\" ",
"tsc": "tsc",
"tscwatch": "tsc -w",
"lite": "lite-server",
"typings": "typings"
}
}
看起来又是一堆面条，这里暂时从字面意思知道三大块的意思
dependencies:运行程序需要用到的依赖组件
dveDependencies:用于开发环境的依赖组件
scripts:可在命令行运行的脚本，这里包含了TypeScript的编译器和开发时用到的HTTP server
准备了package.json之后，执行如下命令
npm install
这是讲package.json的依赖的包下载到本地，可以理解为nuget的restore，这个命令需要些时间，稍等。
下载完成之后，那么在todo目录下会新增一个node_modules目录，都是些依赖包信息。
b.配置TypeScript编译器
之前提到Angular2可用Typescript生成JS代码，这是新版的重大卖点，用typescript可以利用些高级特性生成复杂的JS代码，同时也为开发人员省去了对兼容性的考虑。
在todo目录下创建如下tsconfig.json文件
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules"
]
}
c.新建一个Index.html
好了回到最原始的一个文件，还是在todo目录下，内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ToDo</title> <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> </head>
<body>
<h1>Content will go here</h1>
</body>
</html>
到此基本项目已经准备好，在todo目录运行用visual studio code打开，目录结构应该是这样的
然后好奇这个简单的项目能运行吗，当然可以。在todo目录下运行如下命令
npm start
然后根据提供的Access URL，在浏览器打开就可以了（实际运行之后FireFox自动就开打了这个URL）
就显示一行内容而已，不过也证明了是可以运行的。
通过上面的命令行可以看到实际上是运行了一个简单的HTTP Server，这个server还会监控index.html的页面变化，并实时在浏览器自动刷新显示最新的内容。比如我们把index.html更新为如下内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ToDo</title> <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> </head> <body class="m-a-1">
<h3 class="bg-primary p-a-1">Junwen's To Do List</h3>
<div class="m-t-1 m-b-1">
<input class="form-control" />
<button class="btn btn-primary m-t-1">Add</button>
</div> <table class="table table-striped table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
</tbody>
</table>
</body>
</html>
那么浏览器的内容会自动更新为如下
。
三、将Angular框架引入到项目中
更新index.html文件，更新为
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>ToDo</title> <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="node_modules/classlist.js/classList.min.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script> </head>
<body class="m-a-1">
<todo-app>Angular placeholder</todo-app>
</body>
</html>
这里引入了一些Angular项目需要依赖的JS文件，并且将body的内容更改成了一个自定义的标记，是不是感觉又回到了ASP.NET Core。
目前这里todo-app的标记，浏览器是没法识别和解析的，所以直接原样输出了内容
实现todo-app指令
接下来就是要实现todo-app的内容，切换到todo/app目录
a.新建model.ts文件
没错这就是我们要写的第一个typescript文件，内容如下
export class Model{
user:
items;
constructor(){
this.user = "Junwen Luo";
this.items = [
new ToDoItem("Firt Item", false),
new ToDoItem("Second Item", true),
new ToDoItem("Third Item", false),
new ToDoItem("Fourth Item", false)
];
}
}
export class ToDoItem{
action;
done;
constructor(action, done){
this.action = action;
this.done = done;
}
}
大致的意思就是新建了两个类，分别是Model和ToDoItem，然后有各自的构造方法，是不是很熟悉的套路呢。
这个语法浏览器当然不认账啦，.ts什么鬼，之前提到ts是javascript的超集，那么会在typescript编译器会将.ts文件生成对应的.js代码文件，保存.ts之后应该会生成一个model.js文件，代码如下
"use strict";
var Model = (function () {
function Model() {
this.user = "Junwen Luo";
this.items = [
new ToDoItem("Firt Item", false),
new ToDoItem("Second Item", true),
new ToDoItem("Third Item", false),
new ToDoItem("Fourth Item", false)
];
}
return Model;
}());
exports.Model = Model;
var ToDoItem = (function () {
function ToDoItem(action, done) {
this.action = action;
this.done = done;
}
return ToDoItem;
}());
exports.ToDoItem = ToDoItem;
如果代码没有自动生成，可以重新运行npm start。
b.新建一个模板，还是在app目录下，新建文件名为app.component.html
<h3 class="bg-primary p-a-1">{{getName()}}'s To Do List</h3>
<div class="m-t-1 m-b-1">
<input class="form-control" #todoText>
<button class="btn btn-primary m-t-1" (click)="addItem(todoText.value)">
Add
</button>
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Description</th>
<th>Done</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of getTodoItems(); let i = index">
<td>{{i+1}}</td>
<td>{{item.action}}</td>
<td><input type="checkbox" [(ngModel)]="item.done" /></td>
<td [ngSwitch]="item.done">
<span *ngSwitchCase="true">Yes</span>
<span *ngSwitchDefault>No</span>
</td>
<td>
<button (click)="removeItem(i)">Delete</button>
</td>
</tr>
</tbody>
</table>
这里{{}}表示的是绑定的内容，应该很好理解。
这个模板提供了显示列表，添加和删除Item的功能，其中使用了*ngFor,*ngSwitch,*ngSwitchDefault,ngModel等这些指令。
ngModel是用于双向绑定
(click)是绑定单击事件
*ngFor都比较好理解，for循环嘛
c.新建app.component.ts,内容如下
import { Component } from "@angular/core";
import { Model, ToDoItem } from "./model";
@Component({
selector: "todo-app",
templateUrl: "app/app.component.html"
})
export class AppComponent {
model = new Model();
getName() {
return this.model.user;
}
getTodoItems() {
return this.model.items;
}
addItem(newItem) {
if (newItem != "") {
this.model.items.push(new ToDoItem(newItem, false));
}
}
removeItem(index) {
console.log(index);
if (index >= ) {
this.model.items.splice(index, );
}
}
}
这里创建一个组件，意思是匹配到todo-app的标记都要通过templateUrl对应的模板来解析显示。
然后还定义一个类和方法，感觉像Controller。
import的作用就是导入需要依赖的内容，类似于命名空间引入吧。
d.新建app.module.ts
上一个文件只是一个Component，当然还是不能够直接运行，需要通过一个Module来封装，更1.XXX版本的思想理念是一致的。
app.module.ts内容如下
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
@NgModule({
imports:[BrowserModule, FormsModule],
declarations:[AppComponent],
bootstrap:[AppComponent]
})
export class AppModule{}
e.新建main.ts
到此还不能运行了，还需要一个入口，可以理解为main方法吧。
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
f.更新index.html文件
上面都定义好了Angular的内容，那需要加入到index.html页面中，在原有的head加入如下scripts
<script>
var paths = {
"rxjs/*": "node_modules/rxjs/bundles/Rx.min.js",
"@angular/*": "node_modules/@angular/*"
}
var packages = { "app": {} };
var angularModules = ["common", "compiler", "core", "forms",
"platform-browser", "platform-browser-dynamic"];
angularModules.forEach(function (pkg) {
packages["@angular/" + pkg] = {
main: "/bundles/" + pkg + ".umd.min.js"
};
});
System.config({ paths: paths, packages: packages });
System.import("app/main").catch(function(err){ console.error(err); });
</script>
看起来很麻烦吧，没错就是这样，到这里应该就完成了，这样html页面就跟Angular胜利会师了，看看运行的效果
CRD没有U的功能就这么简单实现，只当做第一个体验学习吧。
代码路径
https://github.com/shenba2014/ProAngular2ndExamples/tree/master/FirstAngularApp/
