angular2 啟動步驟


以下內容轉自網絡

1. 創建項目文件夾

創建一個新的文件夾來保存你的項目,比如一開始有個self就好了

2.安裝基礎庫

首先確保已經安裝了node.js

我們使用 npm package manager  來安裝需要的開發庫和開發工具。

打開終端窗口,輸入下面的命令。

npm install

如果在執行npm install命令時沒有出現npm ERR!,一起都好。可能會有幾個npm WARN消息,這也沒有影響。
我們會經常在一連串的gyp ERR!(gyp: generate your project)消息后看到一個npm WARN消息。不用管他們。一個包會使用node-gyp重新編譯自己。如果重新編譯失敗,包會恢復(場使用一個預編譯版本),一切正常工作。
只要保證在npm install命令最后面沒有npm ERR!就好。

之后再執行下面的命令

npm init -y
npm i angular2@2.0.0-alpha.44 --save --save-exact
npm i live-server --save-dev

這些命令將會創建名為 package.json 的項目文件,安裝相應的軟件包,現在的 package.json 看起來應該如下所示。

復制代碼
{
  "name": "angular2-getting-started",
  "version": "1.0.0",
  "dependencies": {
    "angular2": "2.0.0-alpha.44"
  },
  "devDependencies": {
    "live-server": "^0.8.1"
  }
}
復制代碼

 

還需要一個 scripts 的配置節,找到並替換為如下的內容, 如果在你的文件中沒有這個配置節, 那就加上好了.

 

"scripts": {
    "start": "live-server"
  }

3. 第一個 Angular Component

添加一個名為 app.js 的文件,輸入下面的內容。

復制代碼
var AppComponent = ng
  .Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
  })
  .Class({
    constructor: function () { }
  });
復制代碼

我們正在創建一個名為 AppComponent 的可視組件,通過使用全局的 ng 命名空間下的 Component 和 Class 方法來完成。

var AppComponent = ng
    .Component({...})
    .Class({...})

Component 方法需要一個包含兩個屬性的配置對象。selecter 屬性告訴 Angular 需要控制名為 "my-app" 的元素。一旦遇到 my-app 元素,Angular 將會創建和顯示 AppComponent 實例

template 屬性定義了組件的可視外觀。在這個示例中,我們使用了內聯的模板,我們也可以把這個模板調整到一個模板文件中,然后通過 templateUrl 來關聯模板文件的名稱來使用它。

我們使用 Class 方法實現這個組件本身的內容,可以定義屬性,方法並綁定到這個視圖

現在的組件是一個最小化的實現,構造函數中沒有內容。在以后的示例中,我們會看到很多有趣的內容。

4. 啟動應用

我們需要在應用中做點什么,在 app.js 的最后,添加下面的內容。

document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(AppComponent);
});

我們等到瀏覽器通知我們說,內容已經加載完成了,然后再調用 bootstrap 方法。

bootstrap 方法通知 Angular 使用 AppComponent 作為應用的根來啟動應用,

應該可以猜到, 在應用變得復雜的情況下, 我們會創建一個 Component 的樹來完成復雜的工作.

 Wrapped in an IIFE

我們不希望污染全局命名空間,但是,現在還不需要應用到命名空間,我們直接使用 IIFE ( Immediately Invoked Function Execution ) 來封裝我們的代碼。

復制代碼
(function() {
var AppComponent = ng
  .Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
  })
  .Class({
    constructor: function () { }
  });
document.addEventListener('DOMContentLoaded', function() {
  ng.bootstrap(AppComponent);
});
})();
復制代碼

 

 5. 創建 index.html

在項目文件夾中添加名為 index.html 的頁面,內容如下:

復制代碼
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>
復制代碼

 

在 head 中,我們的應用加載了兩個腳本

angular2.sfx.dev.js, Angular2 的開發庫

app.js, 我們剛剛開發的腳本。

在 body 中,使用了名為 <my-app> 的元素,這是應用的根的占位,Angular 將在這里顯示我們的應用。


免責聲明!

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



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