快速搭建环境
npm install -g typescript //安装TypeScript npm install -g @angular/cli ng --version //检测是否安装成功 ng new my-app //生成一个新项目以及应用的骨架代码 cd my-app npm i ng serve --open //使用--open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/
快速搭建sass项目
npm install -g @angular/cli ng new sass-project --style=scss / --style=sass npm install node-sass --save-dev npm install sass-loader --save-dev //安装sass依赖和loader //修改.angular-cli.json文件 "styles": [ "styles.scss" ],"defaults":{ "styleExt": "scss","component": {} } //命令行 //If you are changing your existing style in your project ng set defaults.styleExt scss
angular-cli.json配置
Angular CLI的配置文件。 在这个文件中,我们可以设置一系列默认值,还可以配置项目编译时要包含的那些文件。
引入第三方 UI 库
{ "apps": { "styles": [ "styles.css","../node_modules/bootstrap/dist/css/bootstrap.min.css" ] } }
引入第三方 js 库
"scripts": [ "../node_modules/jquery/dist/jquery.js","../test.ts" ]
引入angular material
安装
npm install --save @angular/material @angular/cdk npm install --save @angular/animations //某些组件需要用到,不是必须 npm install --save hammerjs //某些组件需要用到,不是必须
引入CSS样式
//styles.css @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; //引用主题样式
引入MaterialModule
import {MatButtonModule,MatCheckBoxModule} from '@angular/material'; @NgModule({ ... imports: [MatButtonModule,MatCheckBoxModule],... }) export class PizzaPartyAppModule { }
ng 命令
- ng generate class my-class: 新建 class // ng g cl my-class
- ng generate component my-component: 新建组件 // ng g c my-component
- ng generate directive my-directive: 新建指令 // ng g d my-directive
- ng generate enum my-enum: 新建枚举 // ng g e my-enum
- ng generate module my-module: 新建模块 // ng g m my-module
- ng generate pipe my-pipe: 新建管道 // ng g p my-pipe
- ng generate service my-service: 新建服务 // ng g s my-service
- ng generate interface my-interface: 新建服务 // ng g i my-interface
可用选项
--spec: boolean,默认为 false,表示是否生成单元测试相关的 spec 文件
ng g c my-component --spec