angular2 啓動步驟

時間 2019-11-08

標籤 angular2 angular 啓動步驟欄目 AngularJS 简体版

原文原文鏈接

如下內容轉自網絡html

1. 建立項目文件夾

建立一個新的文件夾來保存你的項目，好比一開始有個self就行了node

2.安裝基礎庫

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

咱們使用 npm package manager 來安裝須要的開發庫和開發工具。json

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

npm install瀏覽器

若是在執行npm install命令時沒有出現npm ERR!，一塊兒都好。可能會有幾個npm WARN消息，這也沒有影響。
咱們會常常在一連串的gyp ERR!（gyp: generate your project）消息後看到一個npm WARN消息。不用管他們。一個包會使用node-gyp從新編譯本身。若是從新編譯失敗，包會恢復（場使用一個預編譯版本），一切正常工做。
只要保證在npm install命令最後面沒有npm ERR!就好。網絡

以後再執行下面的命令angular2

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

這些命令將會建立名爲 package.json 的項目文件，安裝相應的軟件包，如今的 package.json 看起來應該以下所示。app

{
  "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 將在這裏顯示咱們的應用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。