从安装认识Angular 2
脚本宝典收集整理的这篇文章主要介绍了从安装认识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": [
"./@R_126_121@/@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压缩，我真的不知道是否有别的办法进一步压缩它了。
脚本宝典总结
以上是脚本宝典为你收集整理的从安装认识Angular 2全部内容，希望文章能够帮你解决从安装认识Angular 2所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 在Angular中使用类Redux工具—ngrx/store 2019-06-13
- AngularJs代码实例教程-Angular浏览器插件Batarang介绍及使用 2019-01-07
- AngularJs代码实例教程-详解Angular6.0使用路由步骤(共7步) 2019-01-07
- AngularJs代码实例教程-详解angular如何调用HTML字符串的方法 2019-01-07
- AngularJs代码实例教程-angular中子控制器向父控制器传值的实例 2019-01-07
- AngularJs代码实例教程-angularJS实现不同视图同步刷新详解 2019-01-07
- AngularJs代码实例教程-angularjs通过过滤器返回超链接的方法 2019-01-07
- AngularJs代码实例教程-详解angularjs跨页面传参遇到的一些问题 2019-01-07
- AngularJs代码实例教程-浅谈ng-zorro使用心得 2019-01-07
- AngularJs代码实例教程-Angular(5.2->6.1)升级小结 2019-01-07