文章目录
  1. 1. 初步使用Angular2应用
    1. 1.1. 学习Angular2教程快速起步搭建
    2. 1.2. 自动化搭建
  2. 2. Angular2 Webpack Starter搭建
    1. 2.1. 快速搭建
    2. 2.2. 目录组织
    3. 2.3. 常用命令
  3. 3. 结束语

最近在学习Angular2作为前端的框架,《Angular2使用笔记》系列用于记录过程中的一些使用和解决方法。
本文记录初步搭建项目的过程。

初步使用Angular2应用

学习Angular2教程快速起步搭建

Angular2有个比较好的地方,就是有很详细(甚至啰嗦?玩笑话…)的教程文档
这里面会有个五分钟快速起步教程,基本步骤如下:

  • 环境准备 : 安装 Node.js
  • 步骤 1 :创建本应用的项目文件夹,并且定义包的依赖以及特别的项目设置
  • 步骤 2: 创建本应用的 Angular 根组件
  • 步骤 3: 创建一个 Angular 模块
  • 步骤 4: 添加 main.ts ,用来告诉 Angular 哪个是根组件
  • 步骤 5: 添加 index.html ,本应用的宿主页面
  • 步骤 6: 构建并运行本应用

感兴趣的小伙伴们可以按照这个教程试一遍。

自动化搭建

其实说白了,自动化搭建也就是把别人搭建好整理好的项目样板下载下来,然后安装和使用罢了。
其中Angular2 Webpack Starterangular2-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

安装和启动服务过后,我们可以看到页面效果如下:
image

目录组织

使用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
31
angular2-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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# server相关命令
npm run server // 开发环境
npm run server:prod // 生产环境
% build相关命令
npm run build:dev // 开发环境
npm run build:prod // 生产环境
# 热部署
npm run server:dev:hmr
# 监视文件
npm run watch
# 测试
npm run test
# 监视并测试
npm run watch:test
# 端到端测试
npm run e2e

生成后的文件要注意在index.html中设置根目录位置哦。

1
2
<!-- 根目录位置 -->
<base href="/">

结束语


Angular2使用的最大感受就是,遇见未来。
即使angular 1和2已经是完全的改革,但是2的一些理念和标准真的很棒呢。
此处查看项目代码(仅包含src部分)
此处查看页面效果

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 初步使用Angular2应用
    1. 1.1. 学习Angular2教程快速起步搭建
    2. 1.2. 自动化搭建
  2. 2. Angular2 Webpack Starter搭建
    1. 2.1. 快速搭建
    2. 2.2. 目录组织
    3. 2.3. 常用命令
  3. 3. 结束语