Angular2学习笔记一（之Hello world）

Angular2虽然新出不久，但网上的对于hello world的教程已经很多。在这里也不是记录关于Angular2的新发现，而是对现有网上部分资料进行整理，归纳与总结最后分享给大家。

环境

对于Angular2的开发环境，大家需要明确下面几点：node、npm、cnpm、angular-cli、typescript。下面分步进行环境安装，这里IDE采用webStorm或者Idea。

安装

1、从Node.js官网下载并安装，因为Angular2要求node版本较高，建议安装最新版本。在Node新版本中已经自带npm，所以无须另外安装。安装完Node.js后，进行简单的环境配置即可。

在Node的安装根目录下，创建node_global、node_cache两个文件夹，以管理员身份打开cmd窗口执行以下命令：

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

设置环境变量，编辑用户变量

PATH="C:\Program Files\nodejs\node_global"

添加系统变量，这样就可以统一管理全局插件的安装了：

NODE_PATH="C:\Program Files\nodejs\node_global\node_modules"

2、接下来安装cnpm，由于访问国外资源的限制，cnpm提供了镜像安装的解决方法，非常好用。可翻墙的同学跳过此步。

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

3、安装angular-cli脚手架，现在还是1.0beta版本，这里注意用到了cnpm，本人这里采用镜像安装，比较快速：

$cnpm install -g angular-cli

4、接下来安装typescript环境依赖：

$cnpm install -g typescript

5、至此，angualr2的开发环境已经准备就绪，hello world即将到来！下面看下各插件版本信息

Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。

C:\WINDOWS\system32>node -v
v7.5.0

C:\WINDOWS\system32>npm -v
4.1.2

C:\WINDOWS\system32>cnpm -v
cnpm@4.5.0 (C:\Program Files\nodejs\node_global\node_modules\cnpm\parse_argv.js)
npm@3.10.10 (C:\Program Files\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@7.5.0 (C:\Program Files\nodejs\node.exe)
npminstall@2.24.0 (C:\Program Files\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Program Files\nodejs\node_global
win32 x64 10.0.10586
registry=https://registry.npm.taobao.org

C:\WINDOWS\system32>ng -v

                             _                           _  _
  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.28.3
node: 7.5.0
os: win32 x64

C:\WINDOWS\system32>tsc -v
Version 2.1.6

C:\WINDOWS\system32>

创建项目

1、管理员打开cmd，进入到存放工程的目录下执行以下命令(PROJECT_NAME为您的项目名称，随意)。这里须注意下，由于没有翻墙，如果直接用$ng new PROJECT_NAME项目会创建失败，所以这里创建项目也用到了cnpm：

$ng new PROJECT_NAME --skip-npm
$cd PROJECT_NAME
$cnpm install

2、启用项目，浏览器输入 http://localhost:4200/，看是否看到app work！

$ng serve

3、至此，一个Angular2项目已经搭建完成，生成的文档结构如图。

组件、模块、路由

angular-cli提供了生成Component、Module及Routet的方法，命令以 ng generate 开头，可以缩写为 ng g，下面给出创建 component 的几种方式。

ng generate component my-new-component
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp

下表里是所有的命令：

Scaffold	Usage
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	ng g pipe my-new-pipe
Service	ng g service my-new-service
Class	ng g class my-new-class
Interface	ng g interface my-new-interface
Enum	ng g enum my-new-enum
Module	ng g module my-module

添加组件Component

在cmd窗口执行命令，将自动添加对应的组件及添加依赖。

$ng g component home
$ng g component about

添加模块Module

执行添加模块命令，注意新添加的文件区别。

$ng g module home
$ng g module about

添加模块后，模块文件夹下多了一个home.module.ts文件。

实现路由

这部分，我们将实现简单的页面懒加载，达到按需加载页面目的。页面懒加载的好处这里不再描述，具体可参考相关资料。在上节中，我们已经在项目中添加了两个组件，我们可以认为这两个组件就是两个页面，所以在下面，我们来实现点击超连接跳转到相应的页面。

打开项目的根模块app.module.ts页面，可以看到，在我们用命令添加组件的时候，已经自动将home跟about两个组件添加的依赖。但这里，我们假定about这个组件默认没有绑定，需要懒加载，那么就需要把AboutComponent依赖去除。下面代码是实现路由的方法

图片说明：Routes里面有三个数组，第一个表示系统默路由认指定的页面home；第二个表示当路由为/home时指定的页面，第三个则表示按需加载about页面。配置根模块，还不能实现页面切换，下面添加UI元素。

接下来配置about.module.ts模块

启动项目，在浏览器里查看结果如下

至此，项目就已经实现按需加载页面了。

引入 Angular material2

在上部分中，组件、模块与路由都添加了，实现了页面的切换，那现在我们来引用material2这个样式框架，首先在项目中安装这个插件。

npm install --save @angular/material

在项目的根模块中（src/app/app.module.ts）引用这个框架。

接着，在src/style.css文件中，引用框架的样式。

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

在src/index.html中添加字符图标的样式

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

最后，我们在src/app/home/home.component.html中添加必要的元素

<button md-button>FLAT</button>
<button md-raised-button>RAISED</button>
<button md-icon-button>
  <md-icon class="md-24">favorite</md-icon>
</button>
<button md-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<button md-mini-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<br/>
<br/>

<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
<br/>
<br/>

<button md-button disabled>OFF</button>
<button md-raised-button [disabled]="isDisabled">OFF</button>
<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>

刷新页面，我们将看到这些变化，代表你已经成功引入这个material2样式框架。

总结

本文所实例的例子虽然简单，但已经明确了angular2框架实现的一般思路。通过本例子，希望大家也能很容易上手angular2开发。在下一篇中，将分享下创建基于angular2的移动项目构建方法（ionic2+cordova）

参考资料

Angular2 从搭建环境到开发

Angular2-使用Angular CLI快速搭建工程（一）