05月15, 2015

ng 2.0 开发预览版指南记录

这是一个2.0开发尝试版,在正式版发布之前,应该还会有很多变化,但为了尝鲜还是跟着教程一步一步走了下来,文档坑有不少,建议官方教程现在大概看看就好 =_=~

下面按照文档步骤与实际编写记录个简单例子。

首先创建一个开发目录dev,dev下创建俩个文件index.html与app.ts

同时运行如下代码,检测.ts文件变化并编译为js文件代码

npm install -g typescript@^1.5.0-beta
tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts

ts内容如下

import {Component, View, bootstrap, For, If} from "angular2/angular2"; 

class FriendsService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    }
}

@Component({
    selector: "app",
    injectables: [FriendsService]
})

@View({
    template: `
            <p>Friends:</p>
            <ul>
                <li *for="#name of names">
                    {{ name }}
                </li>
            </ul>
            <p *if="names.length > 3">You have many friends!</p>
            <input #todotext (keyup)="doneTyping($event)">            
            <button (click)="addTodo(todotext.value)">Add Name</button>
            <p>{{todotext.value}}</p>
    `,
    directives: [For, If]
})

// Component controller
class AppComponent {
    names: Array<string>;
    constructor(friendsService: FriendsService) {
        this.names = friendsService.names;
    }
    addTodo(name: string){
        this.names.push(name);
    }
    doneTyping($event) {
        if ($event.which === 13) {
            this.addTodo($event.target.value);
            $event.target.value = null;
        }
    }
}

bootstrap(AppComponent);

index.html内容如下

<!-- index.html -->
<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
      <script src="https://jspm.io/system@0.16.js"></script>
      <script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
  </head>
  <body>

    <!-- The app component created in app.ts -->
    <app></app>

    <script>System.import("app");</script>
  </body>
</html>

浏览访问

npm install -g http-server 
http-server

traceur-runtime 一个es6的支持运行时

system@0.16 是一个第三方的es6模块加载支持

http-server是一个node的本地预览服务器

剩下的看代码即可~

本文链接:https://gmiam.com/post/ng2-dev.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。