angular4.0学习笔记（01）-环境搭建（2017-06）

    这是结合官方文档进行的angular4.0版本的学习笔记，与最新官方文档使用一致。这是官方最新的更新，没有了angular1.x向angular2.0那么重大的变化。

先附上官方的中文文档，大家也可以根据此文档学习。例外社区里也有很多好的文章，大家可以看看。https://angular.cn/docs/ts/latest/

第一步 简单介绍

angular2.x开始已经与angularjs1有一个巨大的区别，angular2.x是不兼容angular1.x的，他是基于es6开发的，因此我们需要很多第三方的依赖，另附es6的介绍 https://segmentfault.com/a/1190000002904199

在开始学习之前，说说我学习了一个星期的感觉，学习angular4.0我们不再使用js代码写，而是使用ts这种新的语言写，但是我们不用刻意去学习，我们只需要在学习angular的过程中去学习ts的语法就可以了，当然如果想要更系统的学习typescript就另当别论了。

第二步 环境搭配

先介绍另一个文档，即菜鸟教程的angular2的教程文档，这一篇有详细介绍了从环境搭建到基本使用的过程，大家也可以结合这个进行学习http://www.runoob.com/angularjs2/angularjs2-tutorial.html

首先安装node.js,https://nodejs.org/en/download/,选择最新的版本下载即可。安装之后执行npm -v,查看是否安装成功，之后因为国内网络的问题使用淘宝提供的cnpm进行安装各种模块npm install -g cnpm --registry=http://registry.npm.taobao.org，这样之后就使用cnpm来代替npm。https://npm.taobao.org/具体也可看看这个文档。

接着安装Angular-Cli，俗称脚手架，使用这个可以快速搭建项目，比较方便。

使用cnpm install -g angular-cli命令进行安装。使用cnpm install -g typescript安装typescript环境依赖，可以执行ng -v看下版本。对于开发工具可以使用webstorm或者Idea，本人使用的是webstorm

第三步 创建本地开发环境生成和运行angular2项目

打开控制台，进入到创建项目的文件夹，执行以下命令。

ng new name(项目名称)(这时执行到一半可能不会动，按ctrl+c终止掉，然后执行cd name ,接着cnpm install进行安装模块)等待一段时间就可以

cd name

项目建立成功，这时你会文件发现好大，呵呵，我也母鸡

执行ng serve,浏览器输入http://localhost:4200,就可以看到程序了。

   另外 执行ng serve --prod --aot就可以生成压缩版的，如果需要生产环境的文件（即生成编译后的文件，我们熟悉的js与html，那么执行ng build）生成在根目录的dist文件夹中。至此，项目的搭建结束，下一步进行正式编程。