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。中文翻译是注解,其实就是给编译器看的一些预编译信息,告诉编译器我这里想搞什么事,你配合配合就好,不要用编译错误和我哔哔。

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

推荐阅读更多精彩内容