使用Angular CLI快速搭建Angular2

2017-01-02阅读(1515)评论(0)

W3Cways.com 微信公众号

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 版本过低带来的不必要的麻烦。

npm install -g angular-cli

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

sudo npm install -g angular-cli

用法

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

ng help

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

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

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

启动

先进入创建好的项目目录

cd my-project

再启动服务

ng serve

如下图:
2
启动成功后,在浏览器输入 http://localhost:4200/ 就可以看到app works!
可以配置默认的 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  #创建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

下表里是所有的命令:

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

安装命令:

npm install --save @angular/material

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

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

接着引入相关的css文件
src/styles.css 中添加

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

deeppurple-amber 主题颜色是可变的,具体看https://material.angular.io/guide/theming

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

npm install --save hammerjs 
npm install --save-dev @types/hammerjs

然后在src/app/app.module.ts引入

import 'hammerjs';

最后需要在tsconfig.json添加hammerjs

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

[可选] 使用Material的icon :

src/index.html中引入

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

简单的演示一下Angular material2效果

修改src/app/app.component.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>

保存,http://localhost:4200/看效果,如下图

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

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

https://material.angular.io/components

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 使用Angular CLI快速搭建Angular2

分享到:更多 ()

Web前端开发-Web前端工程师--Web前端学习之路

联系我们