Angular2.x环境搭建快速入门--最简单教程

Angular2简介：

---

Angular 2 是Google推出的一个跨平台全终端的框架，和目前比较火的React和Vue.js相比，有如下优点：

1. 由于Google的目的是推出一个完整解决方案，所以官方默认提供的类库（比如routing，http，依赖性注入（DI）等）非常完整，无需自己选择。React的一大痛点就是选择太多导致在配置寻找组件和类库的过程中消耗太多精力，当然从另一方面看这也是其优势，选择众多且自由。
2. 官方支持TypeScript（微软出品，是JavaScript的超集，是 JavaScript 的强类型版本）作为首选编程语言，使得开发脚本语言的一些问题可以更早更方便的找到。
3. RxJS友好使得响应式编程在Augular2中变得极为容易（Google开发的框架依赖这么多的微软的产品，可见微软的转型还是很成功的）
4. 支持NativeScript甚至ReactNative等进行原生Android/iOS应用开发（React支持React Native）
5. 支持服务器端渲染（React也支持）

环境配置要求：

---

angular2需要node.js和npm。node.js版本需要6.9.x以上、npm需要3.5.x以上。可以通过node -v和npm -v来检查版本信息。（如果node的版本较低的话可以把node卸载重新下载高版本的即可）
在安装的过程中需要用到npm，但是npm安装非常慢，个人建议使用cnpm。安装cnpm的方法如下：

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

以上安装完成后，开发环境就部署好了，接下来就开始angular2探险之旅吧！

Angular2小应用

---

1. 打开命令行窗口，安装全局的angular-cli

cnpm install -g angular-cli

2、安装完成之后，创建一个angular项目(hello-angular)

ng new hello-angular

如果出现以下三句就创建成功了：

文件目录如下：

要看一下自己的项目目录中有没有node_modules文件，如果没有通过cnpm install来下载这些依赖。

3、以上这些都完成之后，就进入文件hello-angular内，输入以下命令：

cd hello-angular

4、开启服务

ng serve

我们可以看到 应用运行在4200端口：

稍等片刻之后如果出现以下信息就搭建成功了：

切记！！命令窗口不要关闭，保证持续运行服务！！
在浏览器输入http://localhost:4200 就可以看到运行结果了：

如果想要自己修改一下内容，在src/app/app.component.ts修改title即可：如title="这是第一个angular2文件"保存，然后返回浏览器，发现结果已经改变了。

接下来我们在创建第一个组件吧！

---

（由于要保证持续运行服务，我们需要在文件的根目录在打开一个新的命令行窗口）

创建组件需要在命令窗口输入：

ng generate component login --inline-template --inline-style

1. 参数generate使用来生成文件的。
2. 参数component是说明我们要生成一个组件。
3. login是组件的名字。（自己随便起）。
4. 后面两个参数是告诉angular-cli，生成组件的时候，把组件的html和style放在同一个文件下。

以上命令行感觉太长的话，可以使用缩写：

ng g c login -it -is

这个时候angular-cli为我们生成了一个新的文件login。目录结构如下：

login下有两个文件login.component.spec.ts是测试文件，这里我们不需要关心。还有一个文件login.component.ts就是我们新建的组件。

打开新生成的login组件源码如下：

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-login',  template: `    <p>      login Works!    </p>  `,  styles: []})export class LoginComponent implements OnInit {  constructor() { }  ngOnInit() {  }}

上面代码，@Component中的selector: 'app-login'表示我们可以在其他组j件的template中使用<app-login></app-login>来引用这个组件。

现在我们在src/app/app.component.html中引用这个组件。

<h1>  {{title}}</h1><app-login></app-login>

保存后返回浏览器，发现我们的第一组件也出来了：

今天就先说这些吧！！