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