Angular2 从搭建环境到开发

Angular2 的发布带来了一阵热议，好久以前就在筹备了，当时的官方答复就是完全推翻重写，问世以后你们的呼声就是学习成本过高，虽然去掉了 1.x 里的一部分概念，可是加进了 typescript，虽然不强制使用，可是我推荐你们都试一试，毕竟这次改版是谷歌和微软两你们的产物。

对于会部署环境的能够尝试本文最后一节加入 Angular material2 ，我的认为对高度个性化的项目不推荐使用，对企业级的 CMS 省去了写样式的时间，直接开始正文。

Angular-CLI

说到 cli 你们不陌生，没出一个框架都会有对应的 cli ，俗称脚手架。angular2 自己提供了起步项目 angular2-quickstart，我尝试了一下，发现不是很好用，其它的大部分扩展须要自行安装，以后看了一下 angular-cli 部署简单易用，还提供了快捷搭建项目的目录。

Github地址： https://github.com/angular/an...

我就简单说下 Github 里的文档吧，细部的你们扩展阅读。

安装

首先，最好先升级 node 到 6.x 能够避免 node 版本太低带来的没必要要的麻烦。

npm install -g angular-cli

用法

ng --help

查看全部用法

建立本地开发环境生成和运行angular2项目

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

PROJECT_NAME 是你本身的项目名

部署成功后不报错的状况下到浏览器 http://localhost:4200/，修改项目中文件后会自动部署

您能够配置默认的 HTTP 端口和一个 LiveReload server 用 --， 形如：

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153

生成组件、指令、管道和服务

命令以 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

建立路由

这里 cli 暂时禁用了建立路由，新的路由生成器即将到来，您能够在这里阅读新路由器的官方文档：https://angular.io/docs/ts/la...

创建一个 build

ng build

会生成到 dist/ 目录下，其它关于测试，配置文件请你们去 Github 仔细阅读，这里只给最基本的搭建流程。

组件实战

看到这你可能已经开始尝试了，建立项目的步骤相信你们参照上文能够轻松解决，这里我先尝试建立一个 component，命令以下。

ng g component nav

这里我建立了一个 nav 组件。执行成功后，后台会自动部署。咱们看一下文件目录有什么改变

多了一个叫作 nav 的文件夹，看一看文件目录

咱们发现与项目建立时自带的 app component 目录结构相同，内容也大同小异，你们能够尝试去建立一个本身的组件，组件的样式能够去对应的 css 文件中修改。

这时个人 app.module.ts 变成了以下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';

@NgModule({
  declarations: [
    AppComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里不难看出全局自动引入了 nav.component 组件。咱们如今关心的问题是组件之间的引用和数据传输，这里为了简单起见，只给引入的方法，而数据传输、路由机制这里不作解释你们自行官网。

下面说一下 app 内引入 nav 组件，只须要改变 app.component.html 以下。

<h1 class="title">
  {{title}}
</h1>
<app-nav></app-nav>

这里的 class 在对应的 app.component.css 以下

.title {
  font-size: 100px;
}

这时页面自动刷新字号变大 ，那么这里的 app-nav 标签从哪里获得的呢？

咱们去 nav.component.ts 里看一眼

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这里的 selector: 'app-nav' 说明咱们的选择器选择的是 app-nav 标签，一样的能够经过 [app-nav] 选择属性。

注：这里 selector 相似 css 中的选择器，你们也能够根据 1.x 中的 directive 来理解这里的组件

此时页面会呈现成这样

好，到这里简单的组件引用已经实现。

引入 Angular material2

文章开头已经阐述了引入 Angular material2 的优势，用过其它组件样式框架的都明白。

安装命令

npm install --save @angular/material

在 src/app/app.module.ts 中引入框架

import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
  imports: [MaterialModule.forRoot()],
  ...
})
export class PizzaPartyAppModule { }

引入核心和主体风格，较 Angular material 1.x 的改进在于能够选择不一样的色系。具体看文档连接：https://github.com/angular/ma...

咱们这里用的是 Angular CLI 这里又能够钻空子啦，添加下面一行到 style.css，注意是 src 目录下的文件

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

deeppurple-amber 主题颜色是可变的，具体看上文的文档连接。

到这里一直打开控制台（是个好习惯）的朋友会发现相似下面的报错。

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\slide-toggle\slide-toggle.d.ts:67:19
Cannot find name 'HammerInput'.

client:49 [default] J:\workspace\angular2\ts\epimss\node_modules\@angular2-material\core\gestures\MdGestureConfig.d.ts:4:39
Cannot find name 'HammerManager'.

文档也给出了解释，由于框架中 md-slide-toggle 和 md-slider 两个组件依赖外部第三方组件 HammerJS 须要额外的配置。

咱们不急着用文档给的 npm 或引入 cdn 路径，由于亲测仍是会报错，可能我引入方式有误，为了你们少走弯路直接给亲测有效的方法

咱们先去命令行工具运行 npm i --save-dev @types/hammerjs

而后编辑 tsconfig.json 文件将 hammerjs 添加到 types 下

"types": [
  "jasmine", "hammerjs"
]

到这里发现页面自动刷新后报错消失了，若是须要字体图标能够在 src/index.html 中引入

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

目前为止，整个 Angular material2 已经整装待发。所有语法看这里：https://github.com/angular/ma...

咱们尝试着添加多个按钮组件测试一下，修改 app.component.html 文件，完整代码以下

<h1 class="title">
  {{title}}
</h1>
<app-nav></app-nav>

<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>

没问题这里手懒不写布局样式了，直接给 br 换行你们方便看些，待页面部署完成后咱们会看到如下效果

炫酷的组件，更多组件语法参考上面给的连接，到这里相信你们学习 angular2 的信心倍增，真对已有组件能够完成快速开发，下一步就是你们去 Angular2 官网看其它概念的时候啦，处理数据实现与后端对接。项目上线，大功告成。

总结

orange 最近也是在学习新技术，更底层框架方面的知识还再学习，当今前端框架层出不穷，不要盲从，要根据公司需求和员工的工做经验选择框架，真说到性能方面哪一个框架快的话，我虽然没测试过，但我肯定 React、Vue、Angular2 几个之间相差无几，除非在实现的时候代码存在问题，由于这几个框架都通过了大型项目的考验。

文章出自 orange 的 我的博客 http://orangexc.xyz/