5分鐘快速入門angular2.0

時間 2019-11-30

標籤 5分快速入門 angular2.0 angular 欄目 AngularJS 简体版

原文原文鏈接

　　讓咱們從零開始，在JavaScript中創建一個超級簡單的角angular2.0的應用。css

請看demohtml

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfill -->
    <script src="https://npmcdn.com/core-js/client/shim.min.js"></script>

    <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>

    <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script>
    <script src="https://npmcdn.com/@angular/core/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>

    <!-- 2. Load our 'modules' -->
    <script src='app/app.component.js'></script>
    <script src='app/app.module.js'></script>
    <script src='app/main.js'></script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>


<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

讓咱們從 0 開始建立一個簡單的 Angular 2 應用。node

下載任何版本的 angularjs, 訪問：https://code.angularjs.org/angularjs

不想用 JavsScript 語言？npm

雖然咱們這裏使用 JavaScript, 你也可使用 TypeScript，或者 Dart 來開發 Angular 2 應用。json

咱們將用 6 步完成bootstrap

1. 建立項目文件夾瀏覽器

2. 安裝基礎庫服務器

3. 建立應用組件angular2

4. 啓動應用

5. 建立 index.html

6. 運行

1. 建立項目文件夾

建立一個新的文件夾來保存你的項目，應該相似下面的樣子。

mkdir angular2-quickstart
cd    angular2-quickstart

2. 安裝基礎庫

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

angular2 - Angular 2 庫

live-server - 一個靜態文件服務器，能夠在修改文件以後，自動從新加載到瀏覽器中。

咱們既能夠直接引用 Web 上的庫，也能夠下載項目中。

尚未安裝 NPM？趕忙安裝它，咱們在這裏將會不斷使用這個工具。

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

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