從安裝認識Angular 2

時間  2019-11-07
標籤 安裝 認識 angular 欄目 AngularJS 简体版
原文   原文鏈接

關於介紹，只說一句：Angular 2是一個強大、全面、龐大的MVVM框架。html

安裝

安裝，也算是一個坎，由於你須要安裝一大堆東西，殊不知道每一個東西是作什麼的，儘管有Angular-cli全家桶，可是我的以爲：一開始學就安裝全家桶，就像你直接用自動擋學開車同樣，雖然上手快，但仍是有些弊端的……node

總之，我我的更傾向從底層學起。webpack

首先，要確認安裝了NodeJS，而且建立了目錄並執行npm init初始化。git

npm i -S @angular/core @angular/common @angular/compiler @angular/platform-browser @angular/platform-browser @angular/platform-browser-dynamic rxjs core-js zone.js@^0.7.2

想必看見上面的那麼多包會一臉懵逼，不要緊，我第一眼看見這些的那刻，和你如今的表情同樣，下面在適當的時候我會逐個解釋的，你只須要相信我：上面的包都是跑Hello World所必須的，缺一不可。咱們先儘快跑起可愛的Hello World。es6

我是2017年3月20日安裝的，各版本號以下：github

clipboard.png

須要額外說明一下的是zone.js這個庫，這對於Angular 2來講是個比較重要的庫，能夠看到我上面的安裝命令裏的最後一項，zone.js@^0.7.2, 它是取代髒檢查的一個很重要的庫，用於解決異步操做，這裏就不詳述了。web

Anyway，若是安裝這個庫的時候不帶版本號，它會報出如下錯誤。有心折騰的小夥伴儘管試試~typescript

npm WARN @angular/core@2.4.10 requires a peer of zone.js@^0.7.2 but none was installed.

OK，咱們安裝完運行時依賴了，如今安裝開發依賴。express

npm i -D webpack webpack-dev-server typescript ts-loader @types/core-js@0.9.36

看上面的@types/core-js@0.9.36，是的，這是另外一個坑，我默認安裝的最新版0.9.37會報錯，必須下降版本，在Github這裏給出了答案。願意折騰的小夥伴儘管試試。npm

clipboard.png

寫配置文件

OK，咱們如今開始編寫配置文件

咱們如今根目錄配置webpack.config.js，沒有它就無法打包了！

// webpack.config.js
module.exports = {
  // 入口文件
  entry: './src/main.ts',
  // 輸出目錄 
  output: {
    filename: 'dist/bundle.js'
  },
  // 聲明解析上述格式的組件
  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
};

而後是typescript的配置，畢竟咱們的程序是用ts寫的。這個配置文件就不講解了，由於基本每一個項目的配置都徹底同樣。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules"
  ]
}

咱們再加一個index.html文件，你總要有個頁面看效果是否是？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Angular 2</title>
</head>
<body>
    <hello-world>加載中……</hello-world>
    <script src="dist/bundle.js"></script>
</body>
</html>

編寫Hello World

咱們先建立一個文件夾叫src, 源碼都會被放進這個文件夾裏，如今咱們再建立一個main.ts文件，粘貼如下代碼，這是Typescript的寫法，看不懂的話就用心看註釋:

import 'core-js';
import 'zone.js';
import {Component, NgModule} from '@angular/core';

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';

@Component({
    selector: 'hello-world',
    template: `<h3>Hello World</h3>`
})
class AppComponent { }

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
class AppModule { }

platformBrowserDynamic()
    .bootstrapModule(AppModule);

如今須要建立的文件都建立完了，怕路徑搞錯了，來貼張圖：

clipboard.png

OK，咱們來逐行講解

首先是import的導入部分。

core-js - 爲全局上下文(window)打的補丁，提供了ES2015(ES6)的不少基礎特性。主要是提供es6-shim，雖然Typescript是ES6的超集，但畢竟ES6纔是Javascript的正根，Typescript仍是不得不向着ES6靠攏，如Promise及Generator這種ES6的專有特性，ts沒法轉譯。

zone.js - 用來幫助處理瀏覽器異步事件的工具庫，Angular2的變化檢測機制基於這個庫實現的。

{Component, NgModule} - 這兩個是Angular 2本身定義好的修飾器，或者叫裝飾器，Component是組件，一個或多個組件能夠組成一個模塊，模塊就是NgModule。

@angular/core - 咱們看到組件和模塊都是來自於這個包，angular/core是框架中的核心模塊，每個應用都須要它。 包括全部的裝飾器、指令、變化監測、依賴注入、渲染等核心功能，以及組件生命週期鉤子。

{platformBrowserDynamic} - 這是動態引導，用於將你寫的全部程序編譯的組件，編譯完後才能啓動應用並渲染界面，能夠說是打包前的最後一步，該組件來自於angular/platform-browser-dynamic。此外，還有個靜態引導，名曰{platformBrowser}，來自於angular/platform-browser。
兩者的區別是：動態引導是在瀏覽器執行編譯，靜態引導則省掉了瀏覽器編譯的這一步，體積更小、速度更快，直接能夠啓動應用。至關高深的說！

{BrowserModule} - 這是在瀏覽器運行時的一些工具庫，將某些模塊打包導出，總之是必不可少的。@angular/platform-browser - 與DOM和瀏覽器相關的每樣東西，特別是幫助往DOM中渲染的那部分。

帶有platform字樣的包，包含的都是引導啓動的相關工具。

呃……咱們終於能夠講解正式的代碼了。

@Component({
    selector: 'hello-world',
    template: `<h3>Hello World</h3>`
})
class AppComponent { }

這段代碼的意思是：我如今要解析一個組件了。
它的名字叫hello-world，或者說叫<hello-world></hello-world>，這個組件是個類哦，它的類名叫AppComponent。

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
class AppModule { }

這段代碼的意思是：我如今要解析一個模塊了。
declarations - 導入本模塊所依賴的組件——AppComponent;
imports - 導入本模塊所需的其餘模塊，這裏的BrowserModule就是每一個應用的根模塊都要導入的，當前它的名字叫AppModule；
bootstrap - 標記出引導組件，也就是要渲染的那個。

platformBrowserDynamic().bootstrapModule(AppModule);最後一步，編譯啓動！

OK, 最後咱們還須要配置一下package.json,找到scripts這一項：

"scripts": {
    "dev": "webpack-dev-server --inline --colors --progress --port 3000"
},

如今在終端輸入命令：npm run dev

在瀏覽器打開本地3000端口，便可看到結果，不知道你有沒有跑起來，反正我是跑起來了！(^__^)

clipboard.png

額外的一些提醒

終端上的警告

回頭看終端，會報出兩個警告：

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
87:15-102 Critical dependency: the request of a dependency is an expression

若是你心大，能夠忽略它，若是想解決這兩個警告，能夠配置一下webpack自帶的webpack.ContextReplacementPlugin插件！具體怎麼作很容易谷歌到，我就不演示了。

另外還有個很簡單的方法，在webpack.config.js裏面的module里加一句exprContextCritical: false，就會忽略全部的警告了。

沒有用到的RxJS

咱們再看看package.json,噢，好像有個叫rxjs的依賴包咱們並無用到哦，那是否是跑Hello World不須要它呢？

No, 你若是刪掉它，會報錯的哦！願意折騰的同窗儘管試試！

在網上看其餘Angular 2 的教程，可能會看見配置項中有typings這樣的東西，是的，它跟Typescript相關，可是在Typescript2.0以後已經不須要這個東西了。

關於寫法

此次是爲了簡單，因此將組件和模塊以及渲染寫在同一個文件裏，但幾乎全部的Angular教程都不會這麼作，由於這不是最佳實踐，在實際的開發中，組件、模塊和引導都是分開的。

關於體積

咱們看一下終端的輸出，哇塞，打包以後的JS文件才3M而已哦！

clipboard.png

沒辦法，誰讓人家組件多呢？原本體積就不小。

首先這是開發環境，打包出來大是正常的，若是你在package.json裏添加一個命令：

"scripts": {
    "dev": "webpack-dev-server --inline --colors --progress --port 3000",
    "build": "webpack -p"
},

在終端執行npm run build

clipboard.png

是否是就小了不少？這纔是放進瀏覽器的代碼，不過這也是挺大的，若是你不用gzip壓縮，我真的不知道是否有別的辦法進一步壓縮它了。

但願經過這篇文章，能把你從一頭霧水的狀態，提高爲略懂吧！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程