从安装认识Angular 2

摘要：首先，要确认安装了，并且创建了目录并执行初始化。想必看见上面的那么多包会一脸懵逼，没关系，我第一眼看见这些的那刻，和你现在的表情一样，下面在适当的时候我会逐个解释的，你只需要相信我上面的包都是跑所必须的，缺一不可。

关于介绍，只说一句：Angular 2是一个强大、全面、庞大的MVVM框架。

安装，也算是一个坎，因为你需要安装一大堆东西，却不知道每个东西是做什么的，尽管有Angular-cli全家桶，但是个人觉得：一开始学就安装全家桶，就像你直接用自动挡学开车一样，虽然上手快，但还是有些弊端的……

总之，我个人更倾向从底层学起。

首先，要确认安装了NodeJS，并且创建了目录并执行npm init初始化。

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。

我是2017年3月20日安装的，各版本号如下：

需要额外说明一下的是zone.js这个库，这对于Angular 2来说是个比较重要的库，可以看到我上面的安装命令里的最后一项，zone.js@^0.7.2, 它是取代脏检查的一个很重要的库，用于解决异步操作，这里就不详述了。

Anyway，如果安装这个库的时候不带版本号，它会报出以下错误。有心折腾的小伙伴尽管试试~

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

OK，我们安装完运行时依赖了，现在安装开发依赖。

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这里给出了答案。愿意折腾的小伙伴尽管试试。

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文件，你总要有个页面看效果是不是？

    
    
    
    


    加载中……
    

我们先创建一个文件夹叫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: `
Hello World
`
})
class AppComponent { }

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

platformBrowserDynamic()
    .bootstrapModule(AppModule);
    

现在需要创建的文件都创建完了，怕路径搞错了，来贴张图：

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: `
Hello World
`
})
class AppComponent { }

这段代码的意思是：我现在要解析一个组件了。
它的名字叫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端口，即可看到结果，不知道你有没有跑起来，反正我是跑起来了！(^__^)

回头看终端，会报出两个警告：

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，就会忽略所有的警告了。

我们再看看package.json,噢，好像有个叫rxjs的依赖包我们并没有用到哦，那是不是跑Hello World不需要它呢？

No, 你如果删掉它，会报错的哦！愿意折腾的同学尽管试试！

在网上看其他Angular 2 的教程，可能会看见配置项中有typings这样的东西，是的，它跟Typescript相关，但是在Typescript2.0之后已经不需要这个东西了。

这次是为了简单，所以将组件和模块以及渲染写在同一个文件里，但几乎所有的Angular教程都不会这么做，因为这不是最佳实践，在实际的开发中，组件、模块和引导都是分开的。

我们看一下终端的输出，哇塞，打包之后的JS文件才3M而已哦！

没办法，谁让人家组件多呢？本来体积就不小。

首先这是开发环境，打包出来大是正常的，如果你在package.json里添加一个命令：

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

在终端执行npm run build

是不是就小了很多？这才是放进浏览器的代码，不过这也是挺大的，如果你不用gzip压缩，我真的不知道是否有别的办法进一步压缩它了。

希望通过这篇文章，能把你从一头雾水的状态，提升为略懂吧！