angular4笔记系列之搭建环境

快速搭建环境

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