使用Angular CLI快速搭建Angular2

2017-01-02阅读(6024)评论(0)牵着狗狗看MM

苏州实时公交查询

angular2

Angular CLI

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

Angular CLI主要特性

  1. Angular CLI 可以快速搭建框架,创建module,service,class,directive等;
  2. 具有webpack的功能,代码分割(code splitting),按需加载;
  3. 代码打包压缩;
  4. 模块测试,端到端测试;
  5. 热部署,有改动立即重新编译,不用刷新浏览器;而且速度很快
  6. 有开发环境,测试环境,生产环境的配置,
  7. sass,less的预编译Angular CLI都会自动识别后缀来编译;
  8. 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”的项目
1

启动

先进入创建好的项目目录

[plain]cd my-project
[/plain]

再启动服务

[plain]ng serve
[/plain]

如下图:
2
启动成功后,在浏览器输入 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/看效果,如下图

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

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

https://material.angular.io/components

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 使用Angular CLI快速搭建Angular2
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏