什么是Angular?
是一款优秀的前端JS框架,AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等,AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库.
搭建前端框架一般的三种方法:
1.是自己一点点的搭建,这种对开发者要求比较高,必须对框架具有很深入的理解和很丰富的使用经验,否则搭建起来会遇到非常多的问题;
2.是直接使用Angular2 seed,一些国外优秀程序员在github上已经贡献了,非常感激!我本人也站在前人的基础上加上了一些自己的内容,构建了一套脚手架,初学者们可以拿来即用,后面不断的去理解其中原委。
3.使用angular2提供的Angular CLI来快速搭建,他本质也是使用了webpack来编译,打包,压缩等构建的事情,适合想用webpack的特性又不想学习webpack那些复杂的配置的开发者;
使用Angular CLI?利弊:
使用Angular CLI可以很快,很简单的构建angular2项目,只要掌握几行命令就能构建出前端架构的最佳实践,让人惊叹!不好的一面,简单的东西就意味着不灵活,如果你想高可控的配置你的项目,还是建议选择第二种方案
如何使用Angular CLI搭建框架?
1.下载node.js包 ,这样就能在cmd命令窗口中直接使用node或npm命令。
2.下载安装cnpm
在命令中直接输入:
npm install cnpm -g –registry=https://registry.npm.taobao.org
由于npm安装插件是从国外服务器下载,受网络影响很大,可能出现异常,继而淘宝团队生产一个完整的npmjs.org镜像,用cnpm代替npm,cnpm与nodejs的npm用法一致,只是在执行命令时,将npm改为cnpm
3.下载typescript 和 typings
在命令中输入:cnpm install –g typescript@2.2.2 typings
angular-cli是用typescript写的,所以需要安装typescript和typings
4.安装@angular/cli
在命令提示符中输入:cnpm install –g @angular/cli@1.0.0
5.创建项目
ng new angular-cli-project
angular2的基本文件已经创建,接下来就是在项目目录下下载项目所依赖的nodejs包
6.安装项目依赖的所有node.js包
转到项目目录下:
输入命令:cd angular-cli-project
安装node.js包
输入命令:cnpm install
工程结构如下:
7.启动服务
输入命令:ng serve,此时就可以看到启动的页面: