微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

Angular2使用体验

2015-08-10 20:06 前端大全

(点击上方,可快速关注)


作者:AlloyTeam

网址:http://www.alloyteam.com/2015/07/angular2-shi-yong-ti-yan/


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"

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关键字,文档传送门:https://angular.io/docs/js/latest/api/annotations/ViewAnnotation-class.html


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

}

}


运行示例:




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

招聘和猎头服务QQ:2302462408

投稿网址:top.jobbole.com





 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 热点 | 来至互联网大会的6种声音 东京OpenStack峰会归来:与容器云结合新的思考 vSAN6.1“豪华”测试体验 我为什么喜欢用C#来做并发编程 程序员装逼指南