1. 程式人生 > >angularjs2 學習筆記(一) 開發環境搭建 (vs2013)

angularjs2 學習筆記(一) 開發環境搭建 (vs2013)

開發環境,vs2013 update 5,win7 x64,目前最新angular2版本為beta 17

第一步:安裝node.js

安裝node.js(https://nodejs.org/en/),為的是能夠使用npm獲得angular2.0的開發包

驗證是否安裝成功

cmd下輸入 node -v

npm -v

第二步:在vs2013上安裝typescript

安裝完成後在專案中可以新增typescript專案了,並且在專案屬性欄中會有typescript頁

第三步:建立專案

可以將沒用的都刪除

第四步:新增package.json檔案用於獲取angularjs2包及依賴項

編輯檔案,新增內容

{

   "name": "angular2demo",

   "version": "1.0.0",

   "license": "ISC",

   "dependencies": {

     "angular2": "2.0.0-beta.17",

     "systemjs": "0.19.27",

     "es6-promise": "^3.2.1",

     "es6-shim": "^0.35.0",

     "reflect-metadata": "0.1.2",

     "rxjs": "5.0.0-beta.6",

     "zone.js": "0.6.12"

   },

   "devDependencies": {

     "typescript": "^1.7.5"

   }

}

對於所需要的包可通過npm查詢最新版本,如

npm info angular2

下一步:配置package.config使用npm獲取angular2相關包

在右鍵專案,選擇power command 下的cmd下執行npm install

如果出現錯誤,需要安裝“tsd”包的話,需要執行

npm install tsd -g

然後再進行安裝

安裝完成後

下一步:建立個人應用,注意在入口處需要新增browser.d.ts引用

新建一個app目錄,並新增app.component.ts,main.ts

App.component.ts中新增angularjs模組

import {Component} from 'angular2/core';
@Component({
    selector: 'angular2-demo',
    template: '<h1>這是我的第一個應用</h1>'
})
export class AppComponent { }
此時編譯會出現錯誤“connot find promise”等
這時需要在App.component.ts頂部新增引用

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

完整如下:

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

import {Component} from 'angular2/core';

@Component({

    selector: 'angular2-demo',

    template: '<h1>這是我的第一個應用</h1> <h2>太神奇了</h2>'

})

export class AppComponent { }

在mian.ts中新增app模組

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

下一步:新增index.html頁

<html>
<head>
    <title>Angular 2 Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main').then(null, console.error.bind(console));
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <angular2-demo>Loading...</angular2-demo>
</body>
</html>

下一步:更改typescript編譯選項,修改專案檔案

如果此時編譯會出現錯誤,錯誤資訊“connot find name promise"
此時需要修改專案屬性,如下選擇system,同時修改專案檔案在PropertyGroup中的debug和release中同時新增

<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>

    <TypeScriptModuleResolution>Node</TypeScriptModuleResolution>

    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>

最後,檔案編譯成功,在app下的main.ts和app.component.ts會自動編譯成.js檔案,終於在瀏覽器上看到了第一個angular2的頁面了,這中間好多坑,實驗了很多個版本,各個版本出現的錯誤都不是一樣的,畢竟還是beta版,先拿這個版本學習了!