Angular2使用笔记1--搭建Angular2项目
更新日期:
最近在学习Angular2作为前端的框架，《Angular2使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录初步搭建项目的过程。
初步使用Angular2应用
学习Angular2教程快速起步搭建
Angular2有个比较好的地方，就是有很详细（甚至啰嗦？玩笑话…）的教程文档。
这里面会有个五分钟快速起步教程，基本步骤如下：
- 环境准备 : 安装 Node.js
- 步骤 1 ：创建本应用的项目文件夹，并且定义包的依赖以及特别的项目设置
- 步骤 2: 创建本应用的 Angular 根组件
- 步骤 3: 创建一个 Angular 模块
- 步骤 4: 添加 main.ts ，用来告诉 Angular 哪个是根组件
- 步骤 5: 添加 index.html ，本应用的宿主页面
- 步骤 6: 构建并运行本应用
感兴趣的小伙伴们可以按照这个教程试一遍。
自动化搭建
其实说白了，自动化搭建也就是把别人搭建好整理好的项目样板下载下来，然后安装和使用罢了。
其中Angular2 Webpack Starter和angular2-webpack算是里面比较完善和有一定使用者的吧。
这里我们使用前者，Angular2 Webpack Starter。
git上自带有比较详细的目录组织以及安装使用说明，这里我就贴过来简单讲述一下吧。
Angular2 Webpack Starter搭建
快速搭建
首先确保你的Node版本 >= 5.0，NPM版本 >= 3。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17# 拷贝分支
git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git
# 进入该文件夹
cd angular2-webpack-starter
# 安装npm依赖
npm install
# 启动服务
npm start
# 使用热部署
npm run server:dev:hmr
# 若你在中国，请使用cnpm
# https://github.com/cnpm/cnpm
安装和启动服务过后，我们可以看到页面效果如下:
目录组织
使用Angular2 Webpack Starter搭建后，我们能看到详细的目录组织如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31angular2-webpack-starter/
├──config/ * 配置文件
| ├──helpers.js * helper functions for our configuration files
| ├──spec-bundle.js * angular2测试环境配置文件
| ├──karma.conf.js * 单元测试karma配置文件
| ├──protractor.conf.js * protractor端到端测试配置文件
│ ├──webpack.dev.js * 开发环境webpack配置文件
│ ├──webpack.prod.js * 生产环境webpack配置文件
│ └──webpack.test.js * 测试webpack配置文件
│
├──src/ * 将会被编译成js文件的源文件
| ├──main.browser.ts * 浏览器环境的入口文件
│ │
| ├──index.html * Index.html
│ │
| ├──polyfills.ts * polyfills文件
│ │
| ├──vendor.ts * vendor文件
│ │
│ ├──app/ * WebApp文件夹
│ │ ├──app.spec.ts * app.ts中组件测试
│ │ ├──app.e2e.ts * 端到端测试
│ │ └──app.ts * App.ts组件
│ │
│ └──assets/ * 静态资源
│
├──tslint.json * typescript lint配置
├──typedoc.json * typescript文件生成
├──tsconfig.json * 设置使用typescript的webpack
├──package.json * npm依赖
└──webpack.config.js * webpack配置文件
这样搭建的angular2应用有个好处是带有完整的模板文件，包括组件、路由、测试等等，对如何使用angular2很有帮助。
常用命令
1 | # server相关命令 |
生成后的文件要注意在index.html中设置根目录位置哦。1
2<!-- 根目录位置 -->
<base href="/">
结束语
Angular2使用的最大感受就是，遇见未来。
即使angular 1和2已经是完全的改革，但是2的一些理念和标准真的很棒呢。
此处查看项目代码（仅包含src部分）
此处查看页面效果
码生艰难，写文不易，给我家猪囤点猫粮了喵~
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢