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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
json的使用小结
Jun 08 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 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操作SVN版本服务器类代码
2011/11/27 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
js实现购物车功能
2018/06/12 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
智能钱包:Ekster
2019/11/21 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
文明家庭先进事迹材
2014/01/27 职场文书
天网工程实施方案
2014/03/26 职场文书
工作鉴定评语
2014/05/04 职场文书
先进员工获奖感言
2014/08/14 职场文书
内勤岗位职责
2015/02/10 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
方法汇总:Python 安装第三方库常用
2022/04/26 Python