angularJS的环境搭建--初学

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

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

2、安装nodejs

　　AngularJS须要用到Nodejs，因此咱们须要先安装nodejs，须要用到nodejs，nodejs的下载地址是：https://nodejs.org/en/download/，

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以后就能够直接建立项目了，执行命令

其中JustForTest是项目名称
执行这个命令是建立不少文件，并且须要等待一下，这个步骤会等好久,须要等到nod_.modules的安装完成

直接使用ng serve启动。

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

ng new JustForTest

5、在导入项目

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

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

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

执行命令

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

等待命令执行完成，以后再执行命令cnpm i -g @angular/cli

cnpm install

而后执行命令

ng serve -prod -aot

而后等待编译完成。
完成以后，咱们就能够在浏览器中输入：

访问项目。http://localhost:4200