使用Angular CLI快速搭建Angular2-Web前端(W3Cways.com)

angular2

Angular CLI

angular2 本身提供了起步项目 angular2-quickstart，对新手来说要求太高，大部分扩展需要自行安装，老鸟请飘过~~~

Angular CLI主要特性

Angular CLI 可以快速搭建框架，创建module，service，class，directive等；
具有webpack的功能，代码分割（code splitting），按需加载；
代码打包压缩；
模块测试，端到端测试；
热部署，有改动立即重新编译，不用刷新浏览器；而且速度很快
有开发环境，测试环境，生产环境的配置，
sass，less的预编译Angular CLI都会自动识别后缀来编译；
typescript的配置，Angular CLI在创建应用时都可以自己配置；

安装

注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。
安装前最好先升级 node 到 6.x 可以避免 node 版本过低带来的不必要的麻烦。

[plain]npm install -g angular-cli
[/plain]

在 Mac 或 Linux 平台上，你可能需要添加sudo前缀提权进行全局安装：

[plain]sudo npm install -g angular-cli
[/plain]

用法

你可以通过 Angular CLI 的 help 命令来获取相关的命令信息.

[plain]ng help
[/plain]

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

[plain]ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
[/plain]

PROJECT_NAME是你要创建的项目名，也就是对应的文件夹
这里我创建一个”my-project”的项目

启动

先进入创建好的项目目录

[plain]cd my-project
[/plain]

再启动服务

[plain]ng serve
[/plain]

如下图：

启动成功后，在浏览器输入 http://localhost:4200/ 就可以看到app works！
可以配置默认的 HTTP 端口和一个 LiveReload server 用 --，如：

[plain]ng serve –host 0.0.0.0 –port 4201 –live-reload-port 49153
[/plain]

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

命令以 ng generate 开头，可以缩写为 ng g，下面给出创建 component 的几种方式。

[plain]ng generate component my-new-component #创建my-new-component的组件
ng g component my-new-component #简写

# 组件支持相对路径生成
# 如果在 src/app/feature/这个目录下运行
ng g component new-cmp
# 你的组件将会被创建在 src/app/feature/new-cmp

# 如果你是这么创建的话
ng g component ../newer-cmp
# 那么你的组件将会在被创建在 src/app/newer-cmp
[/plain]

下表里是所有的命令：

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

引入 Angular material2

安装命令：

[plain]npm install –save @angular/material
[/plain]
在 src/app/app.module.ts 中引入框架

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

接着引入相关的css文件
在src/styles.css 中添加
[css]@import ‘~@angular/material/core/theming/prebuilt/deeppurple-amber.css’;
[/css]
deeppurple-amber 主题颜色是可变的，具体看https://material.angular.io/guide/theming。

这里要注意的是，Angular material2中的md-slide-toggle and md-slider是依赖于HammerJS的。
可以运行下面命令来安装HammerJS。

[plain]npm install –save hammerjs
npm install –save-dev @types/hammerjs
[/plain]
然后在src/app/app.module.ts引入

[plain]import ‘hammerjs’;
[/plain]
最后需要在tsconfig.json添加hammerjs

[plain]{
"compilerOptions": {
"types": [
"hammerjs"
]
}
}
[/plain]

[可选] 使用Material的icon :

在src/index.html中引入

[css]
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!–但是google的是需要翻墙的，可使用下面地址替代–>
<!–<link href="https://fonts.css.network/icon?family=Material+Icons" rel="stylesheet">–>
[/css]

简单的演示一下Angular material2效果

修改src/app/app.component.html为

[html]<h1>
{{title}}
</h1>
<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>
[/html]
保存，http://localhost:4200/看效果，如下图

好了，这次使用Angular CLI快速搭建Angular2，就简单介绍到这了。

另附上Angular material的组件库地址：

https://material.angular.io/components