Angular2初识

与Angular2的第一次亲密接触

这是博主刚入职一份寻觅两周后才找到的实习工作后的第一篇博文，因为客户需要我们使用angular2技术，之前一直学习的是安卓开发，所以对前端知识都不是很清楚。经过近三天的自学，对angular2多了一分了解，希望这篇博文对和我一样迷茫且有需要的童鞋能起到一点点帮助（ps：开始只是听说要使用angular2，但粗心的我以为angular2就是angular1的升级版，抱着学习基础的目标就开始学起angularJs了，所以浪费了不少时间。在这里温馨提示一下，学angularJs可能会对你的angular2之路产生影响，此外建议有TypeScript基础，具体我就不讲了）

---

开发环境

首先你得安装node.js，为什么要安装这个？因为很多js框架都需要npm工具进行管理，尤其是你要对angular2项目进行构建、启动服务。
没有安装node.js的可以到node.js官网进行下载，有环境的可以跳过。
不知道有没有环境？好吧！在cmd里输入以下两条命令，如果都显示出版本号，那就是可以了。

node -v

npm -v

接下来，我们安装Angular/Cli。为什么要安装这个？这个就是能让angular2程序正常运行起来的一个环境，没有这个，搭建环境将会变得很复杂… …虽然安装它也要费事，同样复制下面的代码完成angularCli的安装。

npm install -g @angular/cli

安装完，下面的代码能帮你检测是否安装成功

ng -v

HelloAngular2

烦人的开发环境终于被我们搞定了，接下来，开发界的老规矩HelloWorld。
首先，我们先在我们的工作空间新建一个项目文件夹，然后按住shift+鼠标右键，选择在此处打开命令窗口，进入命令提示符。输入以下命令：

ng new 刚刚建立的文件夹名

例如我的:ng new HelloAngular2

如果你卡在installing packages for tooling via npm的话不要急着去关闭窗口，在这里直接ctrl + c结束批处理，这时我们可以看到，文件夹下多了不少json格式的文件，下面有介绍。
然后输入
npm install -g cnpm --registry=https://registry.npm.taobao.org
明白的人已经知道这是什么意思了，这里不解释了，让你的网络嗖嗖嗖！
接着输入
cnpm install
然后原本只有一些配置文件的文件夹会多出很多文件及文件夹，这就是一个最标准的angular2项目结构。然后我讲下几个比较重要的文件

文件或文件夹	功能作用
node_modules	angular2的一些模块文件，类似类库，不要修改
src	代码文件夹
src/app	这就是我们项目文件放置的文件夹
src/app/app.component.ts	欢迎页之后跳转的页面
src/app/app.component.html	和同名ts文件绑定的静态页面
src/app/app.component.css	和同名ts文件绑定的css样式文件
src/assets	可以放置图片之类的东西，会被原封不动打包
src/favicon.ico	项目的logo，记得替换
src/index.html	项目刚运行打开的页面，类似于欢迎页，不放太多代码
package.json	对项目、依赖包及使用的标准进行声明的文件
tsconfig.json	对使用TypeScript语言进行的配置

明白了这些文件和文件夹的意义之后，我们打开src/app/app.component.ts：

进行如图修改之后，保存代码
。进入命令提示符，进入项目目录，输入指令：

ng server

构建完数秒之后会自动打开浏览器，如果没有的话手动
打开浏览器输入地址：http://localhost:4200/

到此为止，我们第一个HelloAngular项目就创建并运行成功了！
是不是很简单呢！