01-Angularjs开发环境搭建

1、概述##

时下web前端很是热门，新的框架层出不穷，web前端的三驾马车VueJS、AngularJS、ReactJS发展很是迅猛。其中VueJS是国人开发的项目，百度热点趋势以1000%的速度在增加，其中是否有有我大天朝的情怀在吧。AngularJS在国外很是受欢迎，在国内用的不是很是多。此次咱们开始学习一下AngularJS，师夷长技以制夷。AngularJS在学习的过程当中，上手比较难，主要有一下方面的缘由：

1. AngularJS概念比较难懂
2. AngularJS使用TypeScript进行开发，用到不少es6的特性
3. AngularJS在项目建立的时候须要进行不少配置，很复杂。

本文经过实现一个实例，详细演示如何一步步实现AngularJS项目的搭建。说明一下，本文中的AngularJS都是基于Angular2.0以上的。

在实际项目中，搭建AngularJS主要有三种方式：

一、第一种方式###

这种方式是彻底经过开发者搭建起来，不适用任何工具，这种方式要求开发者对AngularJS框架有很是深刻的了解，不然会出现不少问题。

二、第二种方式###

第二种就是使用Angular2 seed，经过webpack的方式，这种方式在Github上有不少优秀的项目，能够根据本身的须要在别人的基础上搭建项目。推荐一个webpack的项目：https://github.com/kunl/Angular-webpack-AOT

三、第三种方式###

本文讲的就是第三种方式，经过Angular-cli方式构建，这种方式很是简单，可是这样会致使项目构建不灵活，不过仍是推荐这种方式

在这里简单介绍一下Angular-cli的特性：

• Angular-cli能够快速搭建框架，建立module，service，class，directive等；
• 有webpack的功能，能够实现代码分隔、按需加载等；
• 自动配置开发环境、测试环境、生产环境，能够实现代码的打包压缩和热部署，还能够实现模块测试、端到端测试
• Angular-cli能够经过后缀自动识别sass、less的预编译；
• Angular-cli能够在建立的时候进行TypeScript的配置，还能够作一些个性化配置；
• 经过Angular-cli建立的工程结构是最佳实践，能够用于生产环境；

接下来咱们正式开始构建咱们第一个Angular2实例：

2、安装nodejs##

AngularJS须要用到Nodejs，因此咱们须要先安装nodejs，须要用到nodejs，nodejs的下载地址是：https://nodejs.org/en/download/，能够根据本身的机器下载，这里是演示Windows10下的安装：

Windows系统下下载安装包，是一个exe的可执行文件，双击开始安装：

 

 

点击next进入下一步：

 

 

进入到这里须要勾选接受协议，不勾选不能进入下一步，勾选以后点击next进入下一步：

 

 

进入这一步，能够自定义安装路径，也可使用默认路径，选好以后点击next进入下一步：

 

 

这里是选择安装nodejs的组件，通常状况下默认便可，而后点击next

 

 

进入到这一步以前还有一个界面的，忘记截图了，直接点击Install就能够了，等待进度条走完，就会自动进入下一步：

 

 

到这里点击Finish完成nodejs的安装，进入命令面板，输入node -v查看是否安装完成。

 

 

这是查看nodejs安装版本的命令，也是能够确认咱们的nodejs已经正确安装了。

3、安装npm和cnpm##

下一步是安装npm，

NPM是随同NodeJS一块儿安装的包管理工具，能解决NodeJS代码部署上的不少问题，常见的使用场景有如下几种：

• 容许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 容许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 容许用户将本身编写的包或命令行程序上传到NPM服务器供别人使用。

 

 

到这里已经完成了nodejs和npm的安装，不过在大天朝内用npm安装的话会有一些问题，因此咱们用cnpm安装，cnpm也是npm的一个包。

安装cnpm，执行命令

npm i -g cnpm

 

 

执行这个命令以后，等待完成，而后输入cnpm version查看是否安装完成，这里我已经安装过了，因此能够进去了。

安装完成cnpm以后，咱们开始安装Angular-cli。

执行命令

cnpm i -g angular-cli

等待命令执行完成，

 

 

而后能够执行ng version命令，查看是否安装完成和angular-cli的版本

 

 

安装完成以后咱们就可使用ng命令，下面开始建立项目。

4、项目建立##

安装完成angular-cli以后就能够直接建立项目了，执行命令

ng new JustForTest 

其中JustForTest是项目名称

 

 

执行这个命令是建立不少文件，并且须要等待一下，

 

 

等待到这里，就完成了项目的建立，咱们到目录下去看一下建立的工程结构

 

 

须要等待好久，就是为了建立红框中的包。

咱们用命令进去到这个项目中，而后执行命令

ng serve -prod -aot

启动项目，-prod -aot不是必须的，也能够直接使用ng serve启动。

 

 

这样就能够直接启动项目，咱们在浏览器中输入：http://localhost:4200能够直接访问：

 

 

这样就是经过cnpm安装angular-cli，用angular-cli建立一个angular2项目。

5、在导入项目##

若是是从网上找项目，咱们怎么在本地启动呢？下面咱们具体操做一下：

推荐你们去看一下大漠老师的这个教程：Angular2.0视频教程来了
，在这里演示咱们也是用大漠老师的一个项目：NiceFish，首先咱们须要经过git将项目clone下来，这里就不演示这个了，这是NiceFish的项目地址：http://git.oschina.net/mumu-osc/NiceFish

项目clone下来以后，命令行进入项目所在目录。

执行命令

cnpm i -g @angular/cli 

这里说明一下，以前咱们安装的是全局的angular-cli。

 

 

等待命令执行完成，以后再执行命令

cnpm install

 

 

而后执行命令

ng serve -prod -aot

 

 

而后等待编译完成。

 

 

完成以后，咱们就能够在浏览器中输入：

http://localhost:4200 

访问项目。

 

 

到这里，就完成了新项目的建立和项目导入，接下来开始进去Angular2的正式学习了。

做者：张文文同窗连接：https://www.jianshu.com/p/5c40f9d5ce17來源：简书简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。