天天看點
傳回

Angular2初探

　　Angular2是Google下一代MV*架構，用于建構複雜浏覽器應用。Angular2給WEB或移動Apps帶來了一攬子解決方案，從模闆渲染到資料綁定，從Http服務到表單處理等等，總之，你想要的，Angular2基本上都已封裝好了。

　　萬事始于Hello World，不論Angular2怎麼牛，咱們先得把官方的例子跑起來再說。這裡使用基于webpack建立Angular應用。

環境準備

　　node v5.x.x

　　npm v3.x.x

step1：建立并配置本項目

建立項目目錄：

mkdir angular2Demo
cd angular2Demo

建立配置檔案

典型的 Angular 項目需要一系列配置檔案

package.json 用來标記出本項目所需的 npm 依賴包。

tsconfig.json 定義了 TypeScript 編譯器如何從項目源檔案生成 JavaScript 代碼。

typings.json 為那些 TypeScript 編譯器無法識别的庫提供了額外的定義檔案。

webpack.config.js為建構Angular應用所進行的一系列webpack配置。

package.json

{
  "name": "angular2demo",
  "version": "1.0.0",
  "description": "Angular 2 demo.",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "awesome-typescript-loader": "^2.2.4",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/HalZhan/angular2Demo.git"
  },
  "author": "halzhan",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/HalZhan/angular2Demo/issues"
  },
  "homepage": "https://github.com/HalZhan/angular2Demo#readme"
}

tsconfig.json

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

typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

webpack.config.js

module.exports = require('./config/webpack.dev.js'); // 待補充

karma.conf.js

module.exports = require('./config/karma.conf.js'); // 待補充

下面我們繼續完善配置檔案。

公共配置

　　我們可以為開發、産品和測試環境定義分别各自的配置檔案。 但三者總會有一些公共配置。 于是我們把那些公共的配置收集到一個名叫 webpack.common.js 的獨立檔案中。

config/webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts', // 運作Angular時所需的一些标準js
    'vendor': './src/vendor.ts', // Angular、Lodash、bootstrap.css......
    'app': './src/main.ts' // 應用代碼
  },

  resolve: {
    extensions: ['', '.js', '.ts'] // 加載的檔案類型(明确的擴充名、.js、.ts)
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader',
                  'angular2-template-loader' // 用于加載 Angular 元件的模闆和樣式
        ]
      }, // ts - 将typescript代碼轉譯成es5的加載器，由tsconfig.json檔案指導
      {
        test: /\.html$/,
        loader: 'html' // 為元件模闆準備的加載器
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]' // 圖檔和字型檔案也能被打包
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      }, // 模式比對應用級樣式
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      } // 模式比對元件局部樣式 ( 在元件中繼資料的 styleUrls 屬性中指定的那些 ) 
    ]
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }), // 提取公共代碼

    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }) // 自動向目标.html檔案注入script和link标簽
  ]
};

config/helpers.js

var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
  args = Array.prototype.slice.call(arguments, );
  return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

開發環境配置

config/webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:8080/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  }
});

産品環境配置

config/webpack.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

module.exports = webpackMerge(commonConfig, {
  devtool: 'source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
  },

  htmlLoader: {
    minimize: false // workaround for ng2
  },

  plugins: [
    new webpack.NoErrorsPlugin(), //  如果出現任何錯誤，就終止建構
    new webpack.optimize.DedupePlugin(), // 檢測完全相同 ( 以及幾乎完全相同 ) 的檔案，并把它們從輸出中移除
    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
                                          // 最小化 (minify) 生成的包
      mangle: {
        keep_fnames: true
      }
    }),
    new ExtractTextPlugin('[name].[hash].css'), // 把内嵌的 css 抽取成外部檔案，并為其檔案名添加“緩存無效哈希”
    new webpack.DefinePlugin({ // 用來定義環境變量，以便我們在自己的程式中引用它
      'process.env': {
        'ENV': JSON.stringify(ENV)
      }
    })
  ]
});

(可選)測試環境配置

config/webpack.test.js

var helpers = require('./helpers');

module.exports = {
  devtool: 'inline-source-map',

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'

      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: 'null'
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  }
}

(可選)Karma單元測試配置

config/karma.conf.js

var webpackConfig = require('./webpack.test');

module.exports = function (config) {
  var _config = {
    basePath: '',

    frameworks: ['jasmine'],

    files: [
      {pattern: './config/karma-test-shim.js', watched: false}
    ],

    preprocessors: {
      './config/karma-test-shim.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      stats: 'errors-only'
    },

    webpackServer: {
      noInfo: true
    },

    reporters: ['progress'],
    port: ,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['PhantomJS'],
    singleRun: true
  };

  config.set(_config);
};

config/karma-test-shim.js

　　告訴 Karma 哪些檔案需要預加載，首要的是：帶有“測試版提供商”的 Angular 測試架構是每個應用都希望預加載的。

Error.stackTraceLimit = Infinity;

require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

var appContext = require.context('../src', true, /\.spec\.ts/);

appContext.keys().forEach(appContext);

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

step2：編寫源碼

src/index.html

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

public/css/styles.css

body {
    background: #0147A7;
    color: #fff;
}

src/app/app.component.ts

import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

src/app/app.component.html

這裡需要用到Angular Logo，下載下傳後放入”public/images/”目錄下。

<main>
  <h1>Hello from Angular App with Webpack</h1>
  <img src="../../public/images/angular.png">
</main>

src/app/app.component.css

main {
  padding: em;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: px;
  display: block;
}

(用于單元測試，可選)src/app/app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('App', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({ declarations: [AppComponent]});
  });
  it ('should work', () => {
    let fixture = TestBed.createComponent(AppComponent);
    expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
  });
});

src/app/app.module.ts

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 { }

src/vendor.ts

// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

src/polyfills.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
  // Production
} else {
  // Development
  Error['stackTraceLimit'] = Infinity;
  require('zone.js/dist/long-stack-trace-zone');
}

step3：編譯運作

1. 在項目根目錄下，執行

(–progress –colors是為了檢視進度，可以不用加)

2. 全局安裝webpack-dev-server

npm install -g webpack-dev-server --verbose

(–verbose可以顯示安裝詳細資訊，可以不用加上)

3. 啟動webpack server

(設定靜态檔案通路路徑)

step4：檢視結果

通路localhost:8080，如果一切順利，我們能夠看到最終的結果：

Angular2初探

樣例源碼已托管至github，如有興趣可自行clone

開發日志 前端 javascript Angular web 架構
上一篇: 如何繞過IsDebuggerPresent的反調試
下一篇: 在？送你個開源社群版 AirTag——GitHub 熱點速覽 v.21.21

繼續閱讀