1.背景介绍
angular-cli它是angular框架官方的一个构建工具,当你使用 ng new xxx(项目名) 创建一个项目时,会自动生成项目结构。
angular-cli的核心是webpack,以及npm做为依赖包。正确的安装依赖包的姿势应该是:
1.Windows下必须是【管理员模式】下运行CMD;再使用 ng 命令。
2.当 ng new xx 创建项目时会自动执行 npm install 下载依赖包,耐心等待
3.如果你网络没有问题的情况下,此时 ng serve 就可以正常运行。
2.知识剖析
常见命令:
new: ng new new_project初始化新项目
Component: ng g component my-new-component新建一个组件
Directive: ng g directive my-new-directive新建一个指令
Pipe: ng g pipe my-new-pipe新建一个管道
Service: ng g service my-new-service新建一个服务
Class: ng g class my-new-class新建一个类
Interface: ng g interface my-new-interface新建一个接口
Enum: ng g enum my-new-enum新建一个枚举
Module: ng g module my-module新建一个模块
测试及检测
e2e: ng e2e 跑自动化测试-自己写测试测试用例
test: ng test 跑单元测试 – 自己写
lint:ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,–force –fix –format可以帮助格式和修复部分问题
Angular CLI主要特性:
1.可以快速搭建框架,创建module,service,class,directive等具有webpack的功能,代码分割code splitting,按需加载
2.代码打包压缩,模块测试,端到端测试
3.热部署,有改动立即重新编译,不用刷新浏览器;而且速度很快
4.有开发环境,测试环境,生产环境的配置
5.sass,less的预编译Angular-CLI都会自动识别后缀来编译
6.typescript的配置,Angular-CLI在创建应用时都可以自己配置
Angular CLI用法:
1.通过ng help命令来获取相关的命令信息
2.创建本地开发环境生成和运行angular2项目:ng serve
3.启动成功后,在浏览器输入 http://localhost:4200/ 就可以看到app works!
4.可以配置默认的 HTTP 端口和一个 LiveReload server 用 -- :
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
创建component的几种方式:
1. ng generate component my-new-component
#创建my-new-component的组件<组件支持相对路径生成,如果在src/app/model/这个目录下运行
2. ng g component new-cmp
# 组件将会被创建在src/app/model/new-cmp
3. ng g component ../newer-cmp
组件将会在被创建在 src/app/newer-cmp
3.常见问题
为什么选择Angular CLI?
在开发中,搭建一个良好的前端架构非常重要,他对后续的开发,维护,团队协作,易读性具有重要意义
4.编码实战
搭建一个简单的路由:
创建一个home的module:ng g component home
创建一个创建一个about的module:ng g component about
在app.module.ts中添加路由代码:
const appRoutes:Routes = [
{ path:'', redirectTo:'home',pathMatch:'full'},
{ path:'home',component:HomeComponent },
{ path:'about',component:AboutComponent}]
import引入路由模块,同时在@ngModule声明路由
在app.component.html中添加路由的代码:
router-outlet就是输出的地方
5.参考文献
Angular CLI使用教程指南参考:
http://www.cnblogs.com/bh4lm/p/6638057.html
如何利用angular-cli组织项目结构:
http://www.jb51.net/article/80454.htm">http://www.jb51.net/article/80454.html
PPT链接: http://chowhengguang.oschina.io/demo/PPT8.html