Angular2使用Angular CLI快速搭建工程(一)


Posted in Javascript onMay 21, 2017

前言:

本文适合Angular2的初学者阅读;

时下web前端发展迅猛,新框架层出不穷,大家都知道三驾马车VueJS,Angular2,React。国内VueJS非常热门,百度热点趋势以1000%的涨幅在增加。Angular2在国外非常受欢迎,在国内的粉丝还非常少,文章不多,究其原因有这么几点主要是学习曲线陡峭,上手困难,(1)angular本身概念难懂,(2)使用typescript开发,用到很多es6特性;(3)配置太多,复杂,工程架构搭建上手难度大。本文为了解决项目搭建的问题,详细的一步步演示了如何搭建angular2项目;

为什么选择Angular CLI?

在开发中,搭建一个良好的前端架构非常重要,他对后续的开发,维护,团队协作,易读性具有重要意义;

生产中搭建Angular2的前端架构一般有三种选择:

第一种是自己一点点的搭建,这种对开发者要求比较高,必须对框架具有很深入的理解和很丰富的使用经验,否则搭建起来会遇到非常多的问题;

第二种是直接使用Angular2 seed,一些国外优秀程序员在github上已经贡献了,非常感激!我本人也站在前人的基础上加上了一些自己的内容,构建了一套脚手架,初学者们可以拿来即用,后面不断的去理解其中原委。hotshots-angular2-webpack-seed;这里面用刀了懒加载,webpack code splitting,涵盖angular2的很多知识点;

第三种就是本文要讲的使用angular2提供的Angular CLI来快速搭建,他本质也是使用了webpack来编译,打包,压缩等构建的事情,适合想用webpack的特性又不想学习webpack那些复杂的配置的开发者;

利弊:使用Angular CLI可以很快,很简单的构建angular2项目,只要掌握几行命令就能构建出前端架构的最佳实践,让人惊叹!不好的一面,简单的东西就意味着不灵活,如果你想高可控的配置你的项目,还是建议选择第二种方案;在本文写的这个时间(2016-12-2),Angular CLI还处于beta阶段,还只能用来自娱自乐,还不能用在生产中;

AngularCLI主要特性

1 Angular CLI 可以快速搭建框架,创建module,service,class,directive等;

2 具有webpack的功能,代码分割(code splitting),按需加载;

3 代码打包压缩;

4 模块测试,端到端测试;

5 热部署,有改动立即重新编译,不用刷新浏览器;而且速度很快

6 有开发环境,测试环境,生产环境的配置,不用自己操心; 

7 sass,less的预编译Angular CLI都会自动识别后缀来编译;

8 typescript的配置,Angular CLI在创建应用时都可以自己配置;

9 在创建好的工程也可以做一些个性化的配置,webpack的具体配置还不支持,未来可能会增加;

10 Angular CLI创建的工程结构是最佳实践,生产可用;

开始搭建,基础工具的安装:

你需要安装NodeJS 5.0以上版本,NPM 3.0以上版本;WebStorm 11;

安装 Angular CLI

windows: npm install -g angular-cli

macOS: sudo npm install -g angular-cli

创建Angular2工程

注:本文的工程代码https://github.com/linweiwei123/hotshots-angular2-cli-demo

ng new project_name ,project_name是你的项目名;

Angular2使用Angular CLI快速搭建工程(一)

上图就是创建的过程,此时在创建中,npm也在下载相关的包,耐心等待;从控制台中可以看到创建的内容;

Angular2使用Angular CLI快速搭建工程(一)

工程结构图如下:

Angular2使用Angular CLI快速搭建工程(一)

就这样,最简单的angular2工程创建好了;

工程结构熟悉一下:angular-cli.json 是angular-cli的配置文件,测试配置文件karma.conf.js,typescript的lint配置文件,端到端的测试配置文件protractor.conf.js,导入es6模块的配置文件polyfills.ts,angular工程的main.ts引导启动文件,全局样式style.css,typescript配置文件ts.config.json;typescript的声明文件typings.d.ts,以及生成了最贱的的一个angular组建 app.components相关的css,html,ts。这些配置都是angular2的生产项目中需要配置的文件,angular-cli帮我们做了这么多事情,我们只用了一个命令;

启动

cd project_name 

ng serve

Angular2使用Angular CLI快速搭建工程(一)

浏览器输入 http://localhost:4200/ 就可以看到app works!

尝试的修改一下app.component.ts中的文字,看看热部署是否马上生效?yes!it does!

创建module,component,service,class

Angular2使用Angular CLI快速搭建工程(一)

创建一个home的module;

ng g component home

Angular2使用Angular CLI快速搭建工程(一)

我们看到 app下面多了一个home的component,它应有的css,html,*.spec.ts(测试代码),ts都生成了;如果没有组件化经验的同学可能会问,为啥有css,html,ts,*.spec.ts都放在这下面啊?因为组件化可以重复使用,提高效率,庞大的工程代码中可以提高可维护性,阅读性,方便测试等等;

再试着创建一个angular的模块

ng g module about

Angular2使用Angular CLI快速搭建工程(一)

可以看出模块比component多了一个module.ts文件。

其他内容类似,读者可以自己尝试;

按需加载和代码分割

在生产中,代码会是庞大的,在单页面应用中,如果没有代码分割和按需加载,那么第一次加载的时间就会非常久,可能要非常多的时间,这是无法接受的;而且用户可能只需要访问某部分的内容,把全部的代码返回给用户,这也说不过去;所以在大的应用中,代码分割和按需加载久非常的重要;

前面我们已经提到,angular-cli使用了webpack做编译的事情,那言外之意,我们可以用使用webpack中的code splitting来分割代码,用angular的loadChildren来实现懒加载;

webpack的code splitting官网怎么使用,没用过的读者需要自行补脑;webpack code splitting;

接下来我们来实现一下,第一步:在app.module.ts中添加路由

Angular2使用Angular CLI快速搭建工程(一)

在app.component.html中添加路由的代码

Angular2使用Angular CLI快速搭建工程(一)

router-outlet就是输出的地方;

我们前面创建了一个home.component和一个abou的module。按需加载就是about这个module中实现;

所以在about.module.ts中添加以下内容:

Angular2使用Angular CLI快速搭建工程(一)

认真校对,跟我的对比,是否有缺失内容了;然后我们启动应用ng serve;

Angular2使用Angular CLI快速搭建工程(一)

可以看出代码进行了分割,多了一个0.chunk.js。why?,因为webpack会对require.ensure的地方进行分割,我们接下来再浏览器中访问下看看他的按需加载

Angular2使用Angular CLI快速搭建工程(一)

输入localhost:4200,我们看到默认访问/home,why?其实在代码中我们已经默认是home;我们点击about:

Angular2使用Angular CLI快速搭建工程(一)

可以看到router到了about的页面,并且多了一个0.chunk.js的js。

这个就是我们刚刚代码分割出来的东西,其实就是about模块相关的内容的js,包括了css,html,js,当然,没油包含测试代码;

集成angular material2,可能会比较复杂一点了

当然,上面讲的内容还远远不够,生产中还需要UI框架啊,你可以选择bootstrap,也可以自己写,也可以使用angular material2,往往也需要混用;

自己写的css就放在styles.css文件中,或者是外部文件在styles.css中引用进来;

如果是boostrap文件在angular-cli.json中应用,方式如下:

Angular2使用Angular CLI快速搭建工程(一)

安装angular material2 。

执行以下命令:

npm install --save@angular2-material/core@angular2-material/button@angular2-material/card@angular2-material/radio@angular2-material/checkbox@angular2-material/slider@angular2-material/tooltip

在app.module.ts中加入以下代码,这里当做全局的用

Angular2使用Angular CLI快速搭建工程(一)

接下来我们就能使用一些material的UI组件了,我们在home中使用下试试

然后我们在home.component.html 添加

Angular2使用Angular CLI快速搭建工程(一)

在哪里用都可以,因为是全局的。

理论上这样操作就可以了,但是其实material还依赖一个叫hammerjs的组件我们还没install,直接编译肯定报错,我们安装下,按顺序执行下面2个命令

npm install --save hammerjs


npm install --save@types/hammerjs

在app.module.ts中 import 'hammerjs';

Angular2使用Angular CLI快速搭建工程(一)

如此,我们就可以ng serve启动了,可以看到了material的一些组件了

Angular2使用Angular CLI快速搭建工程(一)

使用iconfont

iconfont是阿里巴巴的icon项目,阿里巴巴使用,也公开对外使用,现在一些公司都使用了,它有CDN,访问快,用起来也很方便,这章节讲下如何使用iconfont;(当然,本质上就是引用一个icon的font文件,无论用bootstrap的还是自己做的,都是一样的,希望读者触类旁通)

由于篇幅过长,请到我的另一篇文章《Angular2-使用Angular-CLI快速搭建工程(二) 》继续查看

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
javascript实现切换td中的值
Dec 05 Javascript
简单的JS轮播图代码
Jul 18 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
JS实现瀑布流效果
Mar 07 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 #jQuery
node.js 中间件express-session使用详解
May 20 #Javascript
JS 调试中常见的报错问题解决方法
May 20 #Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 #Javascript
ztree实现权限横向显示功能
May 20 #Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 #Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python 如何提高元组的可读性
2019/08/26 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
对python中return与yield的区别详解
2020/03/12 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Python的logging模块基本用法
2020/12/24 Python
空指针到底是什么
2012/08/07 面试题
Java语言程序设计测试题改错题部分
2014/07/22 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
教师素质教育心得体会
2016/01/19 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
python 多态 协议 鸭子类型详解
2021/11/27 Python