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

],

......

原文地址:https://www.cnblogs.com/mengjinluohua/p/8228196.html