Angular学习笔记：Day1 Get Started

Angular2 是现在比较新的网页制作技术，加上自己对网页制作比较感兴趣。因此对该技术比较感兴趣，所以现在开始学习该技术。我使用的教材是Ang-book 2，另外还有一本 Angular 2 Development on Typescript。Ang-book 2算是Angular2的官方文档，因此打算从Angular开始学习。

之前其实已经看了几十页了，不过之前都没有系统的记笔记。因此打算从到再来！本来之前已经把环境搭好了的，但是折腾了以下Deepin系统，把在windows上建好的环境全部干掉了。今天才把Angular的环境完全搞定。

Step1： IDE

工欲善其事，必先利其器。选择一款自己喜欢的IDE是很有必要的，就这几年的学习情况来看。我个人是很喜欢简洁、深色的工作环境的。现在主要工作是在一家土木公司做安卓程序开发，所以用的环境除了Android Studio外，还有个人十分喜欢的一款IDE产品，Intelij IDEA。Angular属于Web APP开发的范畴，本来应该装一个WebStorm的，不过Intelij IDEA装一个Angular JS的插件，妥妥的就是WebStorm了。

Step2：Node

在Angular的学习过程中，不一定要用到Node js，不过Node提供了包管理软件npm，一些环境需要使用npm来搭建。Node的安装在官网下载MSI文件就好。Node安装好之后，就可以使用npm来安装Angular的命令行工具了。但是npm由于国内的种种，访问很慢，因此可以换成淘宝的源。可以安装cnpm使用淘宝在国内的镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后就可以使用cnpm安装包了，用法和npm几乎一样。

Step3：Typescript

安装Typescript的过程比较顺利，运行：

cnpm install -g typescript

一次成功！！！！

Step4：@angular/cli

angular/cli是Angular的命令行工具，用来自动生成一些代码。因此该工具对于Angular的开发工作来说应该是必备神器啊。使用cnpm安装就可，但是教材上使用的命令是：

npm install -g angular-cli

安装完成后就可以使用ng命令了。不过可能是我安装的node版本比较新的问题，运行ng后提示angular-cli将会在下一个发行版本更名为@angular/cli，于是我又重新安装了@angular/cli：

cnpm install -g @angular/cli

Step5：Python

node的运行是需要python支持的，因此还要在电脑上安装python。python的安装方法可以使用windows平台上的一个包管理工具chocolatey（类似于linux上的apt-get），chocolatey的安装方法可以自行百度。安装好chocolatey后，就可以使用choco install packagename来安装你想要的软件了~~~~ such as：

choco install python

这个命令安装的python版本是v3.6.0，足够node的运行需要了。

Step6：Hello World

Hello World的意义不多说，对于每一门语言，成功运行个Hello World足以让很多学习人员开心半天！！！Hello World是有故事的有，看到这篇文章的人一定要百度到了评论告诉我，因为我忘了这个故事了！！！首先，我需要跟着Ang-book 2的指导，新建我的第一个Hello World On Angular2项目，建立项目可以使用ng命令来完成：

ng new projectname

如我的第一个Hello项目：ng new AngTe

等了longlongatime以后，终于搞定了。

接着使用：

ng serve

就可以编译你的项目并运行了，在浏览器打开 http://localhost:4200即可，发个图庆祝一下：

看到app works就说明你的第一个hello 项目已经成功了，虽然不是输出的hello world，但毕竟整个过程没有自己些一行代码呢~

Step7：today‘s note

component是Angular特有的，它的前身是AngularJS1中的directives。简单一点就是你实现的一个个想让浏览器展示的个中组件啦，比如一个componet叫weather，你定义后之后，在页面上写一个weather标签，浏览器就直接给你显示天气信息了。

annotation：这个真不是什么神奇的东西，相比大家在java中已经见过了把，比如@Override。中文翻译是注解，其实就是给编译器看的一些预编译信息，告诉编译器我这里想搞什么事，你配合配合就好，不要用编译错误和我哔哔。

今天就写道这里了，如果这边文章通不过审核，那就自己留着，备以后复习之用。如果有幸被感兴趣的同学们看到，希望能被指点指点，一起进步~