IT博客汇 | Angular2使用体验

Angular2使用体验

TAT.simplehuang发表于 2015-07-31 15:51:45

Angular2开发者预览版出来已有一段时间，这个以速度与移动性能为目的的框架到底如何，今天我们来尝试一下。

在官网有一段号称5分钟入门的教程：

quick start： https://angular.io/docs/js/latest/quickstart.html

Angular团队在这个版本上所做的改变可以用激进来形容，我们可以看得到无论是在代码书写亦或是结构组织上都有了非常大的差异，那么，既然Angular1.x已经如此成熟了，那为何我们还需要Angular2这样大的改变呢？

其实无论是Angular2还是ReactNative，他们都肩负了前端许多的愿景，既然目前的前端环境调优已经基本达到巅峰，那么从原生、另一门语言的角度去审视改良只是我们突破与超越的小小尝试而已。

那么Angular2与1.x对比在写法与上手难度上到底有什么区别呢？

下面我将用Angular2来制作一个Todo示例应用：

在完成了初始化任务后，首先，确保我们的TypeScript编译监控处于启用状态，以下语句是作为ts文件修改编译监控：

$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts

整理一下我们的思路，文件结构应该是这样的：

我们看到了熟悉的app.js文件,这是以app.ts编译过后的产物，app.ts:

/// <reference path="../../typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, For, If} from "angular2/angular2";
import {TodoStore} from 'services/todo/TodoStore';

@Component({
    selector: 'app',
    injectables: [TodoStore]//注入TodoStore
})

@View({
    template: `<div class="page-header">
    		 <div class="form-group">
		    <div class="input-group">
		      <div class="input-group-addon">Todo</div>
		      <input type="text" class="form-control" id="exampleInputAmount" placeholder="输入TodoItem" autofocus #newtodo (keyup)="add($event,newtodo)">
		    </div>
		 </div>
               	 <ul class="list-group">
  		    <li class="list-group-item" *for="#todo of todoStore.todoList">
  		       <input type="checkbox" [checked]="todo.done" (click)="toggleTodoState(todo)"/> 
                       <span [class.done]="todo.done">{{todo.text}}</span>
  		    </li>
  		 </ul>
               </div>`,
    directives: [For, If]
})

class AppComponent {
    todoStore : TodoStore;

    constructor(todoStore: TodoStore) {
	this.todoStore = todoStore;
    }

    add($event,newtodo){
	if($event.which === 13){//判断是否回车键
	    this.todoStore.add(newtodo.value);
	    newtodo.value = '';
	}
    }

    toggleTodoState(todo){
	todo.done = !todo.done;//反转done值
    }
}

bootstrap(AppComponent);

在当前版本中，Template关键字已经被替换为View关键字，文档传送门：View

inde.html（墙内用户推荐将traceur-runtime.js/system.src.js/angular2.dev.js这几个文件保存在本地，这样可以不必忍受各种404，超时加载）:

<html>
<head>
    <title>Angular 2 Test</title>
    <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
    <script src="lib/traceur-runtime.js"></script>
    <script src="lib/system.src.js"></script>
    <script src="lib/angular2.dev.js"></script>
</head>

<body>
    <!-- The app component created in app.ts -->
    <app></app>
    <script>
    System.import('app');
    </script>
</body>
</html>

services/todo/todo.ts:

export class TodoStore {
    constructor(){
        this.todoList = [];
    }
    add(item){
        this.todoList.unshift({text:item,done:false,style:'bg-success'});
    }
}

运行示例：