从安装认识Angular 2
|
关于介绍，只说一句：Angular 2是一个强大、全面、庞大的MVVM框架。 安装安装，也算是一个坎，因为你需要安装一大堆东西，却不知道每个东西是做什么的，尽管有Angular-cli全家桶，但是个人觉得：一开始学就安装全家桶，就像你直接用自动挡学开车一样，虽然上手快，但还是有些弊端的…… 总之，我个人更倾向从底层学起。 首先，要确认安装了NodeJS，并且创建了目录并执行 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来说是个比较重要的库，可以看到我上面的安装命令里的最后一项， 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 看上面的
写配置文件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我们先创建一个文件夹叫 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，我们来逐行讲解 首先是
呃……我们终于可以讲解正式的代码了。 @Component({
selector: 'hello-world',template: `<h3>Hello World</h3>`
})
class AppComponent { }
这段代码的意思是：我现在要解析一个组件了。 @NgModule({
declarations: [AppComponent],bootstrap: [AppComponent]
})
class AppModule { }
这段代码的意思是：我现在要解析一个模块了。
OK,最后我们还需要配置一下 "scripts": {
"dev": "webpack-dev-server --inline --colors --progress --port 3000"
},
现在在终端输入命令： 在浏览器打开本地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自带的 另外还有个很简单的方法，在 没有用到的RxJS我们再看看 No,你如果删掉它，会报错的哦！愿意折腾的同学尽管试试！ 在网上看其他Angular 2 的教程，可能会看见配置项中有typings这样的东西，是的，它跟Typescript相关，但是在Typescript2.0之后已经不需要这个东西了。 关于写法这次是为了简单，所以将组件和模块以及渲染写在同一个文件里，但几乎所有的Angular教程都不会这么做，因为这不是最佳实践，在实际的开发中，组件、模块和引导都是分开的。 关于体积我们看一下终端的输出，哇塞，打包之后的JS文件才3M而已哦！
没办法，谁让人家组件多呢？本来体积就不小。 首先这是开发环境，打包出来大是正常的，如果你在 "scripts": {
"dev": "webpack-dev-server --inline --colors --progress --port 3000","build": "webpack -p"
},
在终端执行
是不是就小了很多？这才是放进浏览器的代码，不过这也是挺大的，如果你不用gzip压缩，我真的不知道是否有别的办法进一步压缩它了。 希望通过这篇文章，能把你从一头雾水的状态，提升为略懂吧！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |