記一次Angular2環境搭建及My First Angular App小demo呈現

時間 2019-11-13

標籤一次 angular2 angular 環境搭建 app demo 呈現欄目 AngularJS 简体版

原文原文鏈接

對於一個一直只是用jq，偶爾學習點Knockout js，瞭解一點mvvm結構的前端來講，學習Angular2仍是有點困難的。好了，廢話少說。開始快速起步Demo案例的學習
首先選擇一個編寫前端代碼的IDE.選擇的有不少，好比SublimeText,JetBrains WebStorm等，我選擇的是VsCode，這個更貼近我。一些智能提示，插件，對各個語言的支持比較普遍，固然開發AngularJs2也是合適的。
環境準備
首先下載安裝vscode。下載地址http://code.visualstudio.com/.
下載按照Node.js,https://nodejs.org/en/ 爲何要安裝它，由於要安裝包，而它,Node.js 的包管理器 npm，是全球最大的開源庫生態系統。安裝好以後NPM也安裝好了。在cmd中輸入node -v命令能夠查看版本
輸入npm -v 命令也能夠查看npm的版本。這就爲下面的安裝包打好了基礎。
步驟 1 ：建立並配置本項目
這一步咱們將：
建立項目目錄
建立配置文件
安裝包
建立項目目錄 angular-quickstart。
建立配置文件 html

典型的 Angular 項目須要一系列配置文件前端

package.json 用來標記出本項目所需的 npm 依賴包。就是該項目須要哪些包
tsconfig.json 定義了 TypeScript 編譯器如何從項目源文件生成 JavaScript 代碼。
systemjs.config.js 爲模塊加載器提供了該到哪裏查找應用模塊的信息，並註冊了全部必備的依賴包。它還包括文檔中後面的例子須要用到的包。就是先安裝不少包，須要用的時候導入到項目中就行

在你的項目目錄中建立這些文件，並從下面的例子框中拷貝粘貼文原本填充它們。node

package.jsongit

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "angular-in-memory-web-api": "~0.1.13",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "@types/node": "^6.0.45",
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3"
  }
}

tsconfig.jsongithub

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

systemjs.config.jsweb

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

安裝依賴包

使用 npm 命令來安裝 package.json 中列出的依賴包。請在 Windows 的 cmd 窗口(或者git的bash) 中輸入下列命令：npm install typescript

在安裝期間可能出現紅色的錯誤信息，你還會看到 npm WARN 信息。不過不用擔憂，只要末尾處沒有 npm ERR! 信息就算成功了。npm

Error messages—in red—might appear during the install, and you might see npm WARN messages. As long as there are no npm ERR! messages at the end, you can assume success.json

步驟 2 ：建立應用

咱們用 NgModules 把 Angular 應用組織成了一些功能相關的代碼塊。 Angular 自己也被拆成了一些獨立的 Angular 模塊。這讓你能夠只導入你應用中所需的 Angular 部件，以獲得較小的文件體積。

每一個 Angular 應用都至少有一個模塊：根模塊，在這裏它叫作 AppModule 。

** 在應用的根目錄下建立 app 子目錄：

使用下列內容建立 app/app.module.ts 文件：

1 import { NgModule }      from '@angular/core';
2 import { BrowserModule } from '@angular/platform-browser';
3 
4 @NgModule({
5   imports:      [ BrowserModule ]
6 })
7 export class AppModule { }

View Code

這裏是應用的入口點。

因爲 QuickStart 是運行在瀏覽器中的 Web 應用，因此根模塊須要從 @angular/platform-browser 中導入 BrowserModule 並添加到 imports 數組中。

這是要讓最小的應用在瀏覽器中運行時，對 Angular 的最低需求。

步驟 3 ：建立組件並添加到應用中

每一個 Angular 應用都至少有一個組件：根組件，這裏名叫 AppComponent 。

組件是 Angular 應用的基本構造塊。每一個組件都會經過與它相關的模板來控制屏幕上的一小塊（視圖）。

使用下列內容建立組件文件 app/app.component.ts:

1 import { Component } from '@angular/core';
2 @Component({
3   selector: 'my-app',
4   template: '<h1>My First Angular App</h1>'
5 })
6 export class AppComponent { }

View Code

QuickStart 應用具備和其它 Angular 組件相同的基本結構：

import 語句 。它讓你能訪問 Angular 核心庫中的 @Component 裝飾器函數。
@Component 裝飾器 ，它會把一份元數據關聯到 AppComponent 組件類上：
- selector 爲用來表明該組件的 HTML 元素指定簡單的 CSS 選擇器。
- template 用來告訴 Angular 如何渲染該組件的視圖。
組件類 經過它的模板來控制視圖的外觀和行爲。這裏，你只有一個根組件 AppComponent 。因爲這個簡單的 QuickStart 範例中並不須要應用邏輯，所以它是空的。
A component class that controls the appearance and behavior of a view through its template. Here, you only have the root component,AppComponent. Since you don't need any application logic in the simple QuickStart example, it's empty.

咱們還要導出這個 AppComponent 類，以便讓剛剛建立的這個應用導入它。

編輯 app/app.module.ts 文件，導入這個新的 AppComponent ，並把它添加到 NgModule 裝飾器中的 declarations 和 bootstrap 字段：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

View Code

步驟 4 ：啓動應用

如今，咱們還須要作點什麼來讓 Angular 加載這個根組件。

添加新文件app/main.ts

，內容以下：

1 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 import { AppModule } from './app.module';
3 const platform = platformBrowserDynamic();
4 platform.bootstrapModule(AppModule);

View Code

這些代碼初始化了應用所在的平臺，而後使用此平臺引導你的 AppModule 。

爲何要分別建立 `main.ts` 、應用模塊和應用組件的文件呢？

應用的引導過程與建立模塊或者展示視圖是相互獨立的關注點。若是該組件不會試圖運行整個應用，那麼測試它就會更容易。

步驟 5 ：定義該應用的宿主頁面，就是網頁了

在目錄下建立 index.html 文件，並粘貼下列內容：

 1 <html>
 2   <head>
 3     <title>Angular QuickStart</title>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <link rel="stylesheet" href="styles.css">
 7     <!-- 1. Load libraries -->
 8      <!-- Polyfill(s) for older browsers -->
 9     <script src="node_modules/core-js/client/shim.min.js"></script>
10     <script src="node_modules/zone.js/dist/zone.js"></script>
11     <script src="node_modules/reflect-metadata/Reflect.js"></script>
12     <script src="node_modules/systemjs/dist/system.src.js"></script>
13     <!-- 2. Configure SystemJS -->
14     <script src="systemjs.config.js"></script>
15     <script>
16       System.import('app').catch(function(err){ console.error(err); });
17     </script>
18   </head>
19   <!-- 3. Display the application -->
20   <body>
21     <my-app>Loading...</my-app>
22   </body>
23 </html>

View Code

這裏值得注意的地方有：

JavaScript 庫： core-js 是爲老式瀏覽器提供的填充庫， zone.js 和 reflect-metadata 庫是 Angular 須要的，而 SystemJS 庫是用來作模塊加載的。
SystemJS 的配置文件和一段腳本，它導入並運行了咱們剛剛在 main 文件中寫的 app 模塊。
<body> 中的 <my-app> 標籤是應用程序的入口，表明一個應用！