关于介绍,只说一句: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文件,你总要有个页面看效果是不是?
<!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],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压缩,我真的不知道是否有别的办法进一步压缩它了。
希望通过这篇文章,能把你从一头雾水的状态,提升为略懂吧!