Angular-CLI简介


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


Angular-CLI简介_腾讯视频

你可能感兴趣的:(Angular-CLI简介)