angular2初入眼簾之－搭個環境

時間 2019-11-09

標籤 angular2 angular 眼簾環境欄目 AngularJS 简体版

原文原文鏈接

angular2是什麼？我猜不容我贅述，各位必定略有耳聞，不管是曾經AngularJS的擁躉，亦或是React的粉絲，都或多或少的對她有過一點了解。未見其物、先聞其聲，angular2在問世以前已經作足了宣傳，想必諸位也必定被下面各類詞彙所震懾，什麼：TypeScript、 ES5、 ES6、 Dart、 Immutable、 Unidirectional Data Flow、 Reactive Programming、 Decorators、 System.js、 webpack...，天花亂墜，美不勝收！但咱們不由要問，「都說AngularJS學習曲線陡峭，也沒陡出這些個莫名詞彙！」，angular2究竟該如何上手？看了這些個知識點，有木有嚇得手抖，都搞不清從何處入手了！？javascript

本教程主旨：多些操做、少點說教(理論是進階必須的，千萬不要誤讀)，讓咱們從實踐中追尋真理吧！html

本章源碼：environmentjava

本章使用angular2版本爲：2.4.5, webpack版本爲: 2.2.0node

建立項目

mkdir environment
cd environment
npm init

根據npm init提問，建立package.json文件，建立後去掉沒必要要的字段，像這樣便可：webpack

{
  "name": "environment",
  "version": "1.0.0",
  "description": "I will show you how to set up angular2 development environment",
  "keywords": [
    "angular2",
    "environment"
  ],
  "scripts": {
    "start": "webpack-dev-server --hot--host 0.0.0.0"
  },
  "author": "Howard.Zuo",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/forms": "^2.4.5",
    "core-js": "^2.4.1",
    "rxjs": "5.0.3",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.5",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

安裝依賴

npm install

@angular: 這個必須的，沒意見吧？之因此分了多個包，這是最新2.1.2的變化，能夠按需引入，增長靈活性git
core-js: javascript的一個標準庫實現，包含了大量ES2015, ES2016的ES5實現angularjs
rxjs: 一個Reactive Programming的JavaScript實現。這裏對她的依賴是由於angular2支持多種數據更新模式，好比：flux、Rx.jses6
zone.js: 用來對異步任務提供Hooks支持，使得在異步任務運行以前/以後作額外操做成爲可能。在angular2裏的主要應用場景是提升髒檢查效率、下降性能損耗。github
webpack: 咱們這裏使用webpack2對源碼進行編譯、打包，而不是用官網介紹的System.js的運行時加載、解釋、執行。合併打包的好處不用我多說吧？減小請求數、uglify、預檢查...
webpack-dev-server: 一個輕量級的，支持webpack編譯的靜態服務器(調試工具)，本章節咱們就用它啓動程序
ts-loader: TypeStrong出品的TypeScript加載器，經過該加載器，TypeScript源碼能夠順利被編譯成ES5代碼
typescript: angular2官方推薦的開發語言，咱們在教程裏也將使用該語言進行代碼編寫
@types/core-js: 自typescript 2.0.0之後，使用@types管理聲明文件，因爲angular2依賴ES2015的諸多特性，譬如：Promise、Map等，因此須要引入這些API的聲明

第一個示例

建立`index.html`

touch index.html

向剛纔建立的index.html裏添加以下內容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>environment</title>
</head>
<body>
    <!--這裏引用咱們的第一個component-->
    <my-app></my-app>
    <!--加載使用webpack編譯後的bundle-->
    <script type="text/javascript" src="/dist/bundle.js"></script>
</body>
</html>

建立`app.ts`

mkdir ts
touch ts/app.ts

向剛纔建立的ts/app.ts裏添加以下內容：

import {Component} from '@angular/core';

//聲明第一個Component
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

建立`index.ts`

touch ts/index.ts

向剛纔建立的ts/index.ts裏添加以下內容：

//不顯示引入，你會獲得"Uncaught reflect-metadata shim is required when using class decorators"的錯誤
import 'core-js/es6';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

//引入NgModule裝飾器
import { NgModule }      from '@angular/core';

//引入瀏覽器模塊
import { BrowserModule } from '@angular/platform-browser';

//引入啓動器
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

//引入咱們剛纔建立的第一個component
import { AppComponent }  from './app';

//聲明一個應用模塊
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
class AppModule { }

//啓動應用
platformBrowserDynamic().bootstrapModule(AppModule);

建立`webpack.config.js`

touch webpack.config.js

向剛纔建立的webpack.config.js裏添加以下內容：

const {resolve} = require('path');

module.exports = {
    entry: {
        index: './ts/index.ts'
    },
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader']
            }
        ]
    },
    resolve: {
        extensions: [
            '.js',
            '.ts'
        ]
    }
};

建立`tsconfig.json`

touch tsconfig.json

向剛纔建立的tsconfig.json裏添加以下內容：

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "moduleResolution": "node",
        "noImplicitAny": true,
        "removeComments": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "declaration": false
    },
    "buildOnSave": false,
    "compileOnSave": false,
    "exclude": [
        "node_modules"
    ]
}