天天看點

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

繼續閱讀