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的组件库地址: