Angular的一些常用命令

Angular的一些常用命令

cmd中创建项目：

ng new taskmgr -si --style=scss

//先不安装依赖，si 为skip install

material需要scss样式的特性

在某个目录下打开vscode：code .

安装依赖: cnpm install

自动创建组件：ng generate component MyComponent，

简写 ng g c MyComponent

创建组件的时候也可以带路径，比如：ng generate component mydir/MyComponent

ng g c core/header --spec=false 不生成对应的单元测试文件

ng g c shared/confirm-dialog -it -is --spec=false inline template inline style 创建内联式的模板

自动创建mudule: ng g m core

自动创建指令：ng g d MyDirective

自动创建服务：ng g s MyService

构建项目：ng build，如果你想构建最终的产品版本（进行优化，包压缩等），可以用 ng build –prod

启动开发服务器:ng serve

angular-cli文档

 

安装angular material

cnpm i --save @angular/material@2.0.0-beta.7

如何在你的项目里面引入开源组件库

以 PrimeNG 为例，首先在 package.json 里面定义好依赖：

"devDependencies": {

"primeng": "^4.1.3"

}

1、 安装

cd 你的项目目录

npm install primeng --save-dev

2、 配置angular-cli.json

omega是一种主题，还有很多主题，bootstrap等等......

"styles": [

"styles.css",

"../node_modules/primeng/resources/themes/omega/theme.css",

"../node_modules/primeng/resources/primeng.min.css",

"../node_modules/font-awesome/css/font-awesome.css"

],

需要注意的是系统中的所有小图标都使用font-awosome字体库，font-awosome.css是字体图标文件，需要安装

npm install font-awesome --save

3、使用，需要使用的组件，都要在app.module.ts中加载

// 载入primeng模块

import {AutoCompleteModule, TabViewModule, ButtonModule} from "primeng/primeng"

......

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpModule,

AutoCompleteModule,

ButtonModule,

TabViewModule

],

......