angularjs2.0 五分鍾入門教程之typescript版本


貌似沒看到一個中文的講解ng2入門五分鍾教程,所以親自整理了下整個入門教程的步驟,希望對后來者學習有所幫助。PS:我在win7中碼的。
新建一個project目錄,以下所有操作都在這個目錄下進行。
 
1.安裝tsd編譯typescript代碼命令工具
$ npm install -g tsd@^0.6.0
 
2.安裝angular2,es6-promiserx,rx,rx-lite
$ tsd install angular2 es6-promise rx rx-lite
注意這里可能報網絡錯誤,需要翻**牆你懂的
 
3.新建兩個空文件
app.ts index.html
 
4.安裝typescript編譯器,后面需要把typescript代碼編譯成瀏覽器能夠識別的javascript代碼
$ npm install -g typescript@^1.5.0-beta  
 
5.實時監控typescript文件,檢測到變化后執行自動編譯
$ tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts  
以上是官網給出的代碼,本人執行時遇到如下錯誤,提示
error TS6064:Option 'experimentalDecorators' must also be specified when option ‘emitDecoratorMetadata’ is sepecified
這話提示我們還需要配置experimentalDecorators,所以我們需要修改下執行以下命令

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

 
6.在app.ts中引入angular
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap} from 'angular2/angular2';  
 
7. 在app.ts中 定義一個組件
// Annotation section
@Component({
selector: 'my-app' //定義一個自定義標簽,在html中對應為<my-app></my-app>
})
@View({
template: '<h1>Hello {{ name }}</h1>' //給這個自定義組件指定的html模板代碼
})
// Component controller
class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
}

  

8. 在app.ts中 使用bootstrap()方法,將我們上面定義的MyAppComponent組件作為參數傳入,通過這個方法我們才能將組件內容渲染到頁面中
bootstrap(MyAppComponent);
 
9.回到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.28/angular2.dev.js"></script>
  </head>
  <body>
    <!-- The app component created in app.ts -->
    <my-app></my-app>
<script>System.import('app');</script>
  </body>
</html>  

System.js這貨是一個開源的第三方庫,給瀏覽器擴展添加ES6模塊加載的,所以你看到上面的代碼中有System.import('app')這行代碼,通俗講就是加載app.ts編譯生成的app.js。

System is a third-party open-source library that adds ES6 module loading functionality to browsers.

 

10.最后一步是運行,你可以按照以下代碼安裝http-server,也可以使用自己其他服務器配置如IIS - -!
# From the directory that contains index.html:
npm install -g http-server  # Or sudo npm install -g http-server
http-server                 # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html  
在project根目錄下運行http-server就可以看到類似如下的界面,我的端口8080被占用所以變成自動分配成了8082
 然后訪問localhost:8082你就能夠看到最終的效果了。
 
 
 
原文英文鏈接地址:https://angular.io/docs/js/latest/quickstart.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM