从安装认识Angular 2

时间 2019-11-07

原文原文链接

关于介绍，只说一句：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

须要额外说明一下的是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

写配置文件

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);

如今须要建立的文件都建立完了，怕路径搞错了，来贴张图：

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端口，便可看到结果，不知道你有没有跑起来，反正我是跑起来了！(^__^)

额外的一些提醒

终端上的警告

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

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而已哦！

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

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

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

在终端执行npm run build

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

但愿经过这篇文章，能把你从一头雾水的状态，提高为略懂吧！