Angular CLI 安裝
# 全局安裝
$ npm install -g @angular/cli
# 檢驗(yàn)安裝是否成功,出現(xiàn)以下圖標(biāo)就說明成功了
$ ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.7.4
Node: 8.11.1
OS: darwin x64
Angular:
初始化新項(xiàng)目
# 創(chuàng)建項(xiàng)目成功后，會(huì)自動(dòng) npm install
$ ng new helloAngular(project name)
# 啟動(dòng)項(xiàng)目（開啟本地服務(wù)）
$ ng serve
// or 啟動(dòng)項(xiàng)目劝篷，并打開瀏覽器 （--open or -o）
$ ng serve --open
ng serve指令參數(shù)含義
ng serve 命令會(huì)啟動(dòng)開發(fā)服務(wù)器哨鸭，監(jiān)聽文件變化，并在修改這些文件時(shí)重新構(gòu)建此應(yīng)用娇妓。
-
--openor-o自動(dòng)打開瀏覽器并訪問 -
--prod指定為生產(chǎn)模式像鸡，會(huì)自動(dòng)打包項(xiàng)目
創(chuàng)建我的第一個(gè)組件
Angular CLI 命令行工具，自帶指令集哈恰，可以讓我們快速開發(fā)和遵循 Angular 的開發(fā)風(fēng)格指南只估。
# 創(chuàng)建組件 組件名需要遵循大駝峰命名規(guī)則
$ ng generate component ComponentName
// or 簡寫
$ ng g c ComponentName
Angular三大核心概念
- Component
- Module
- Route
Angular最核心的概念是“組件化”,新版本的 Angular 來說志群，一切都是圍繞著“組件化”展開的，組件是 Angular 的核心概念模型蛔钙。
components.png
以下是一個(gè)最簡單的 Angular 組件定義：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Jun ting';
}
- @Component：這是一個(gè) Decorator（裝飾器）锌云，其作用類似于 Java 里面的注解。Decorator 這個(gè)語言特性目前（2017-10）處于 Stage 2（草稿）狀態(tài)吁脱，還不是 ECMA 的正式規(guī)范桑涎。
- selector：組件的標(biāo)簽名，外部使用者可以這樣來使用這個(gè)組件：<app-root>兼贡。默認(rèn)情況下攻冷，ng 命令生成出來的組件都會(huì)帶上一個(gè) app 前綴，如果你不喜歡紧显，可以在 angular-cli.json 里面修改 prefix 配置項(xiàng)讲衫，設(shè)置為空字符串將會(huì)不帶任何前綴。
- templateUrl：引用外部的 HTML 模板孵班。如果你想直接編寫內(nèi)聯(lián)模板涉兽，可以使用 template，支持 ES6 引入的“模板字符串”寫法篙程。
- styleUrls：引用外部 CSS 樣式文件枷畏，這是一個(gè)數(shù)組，也就意味著可以引用多份 CSS 文件虱饿。
- export class AppComponent：這是 ES6 里面引入的模塊和 class 定義方式拥诡。
把 CSS 預(yù)編譯器改成 SASS
@angular/cli 創(chuàng)建項(xiàng)目的時(shí)候沒有自動(dòng)使用 SASS 作為預(yù)編譯器，我們需要自己手動(dòng)修改一些配置文件,請(qǐng)按照以下步驟依次修改：
-
angular-cli.json里面的styles.css后綴改成.scss
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
// 這里
"styles": [
"styles.scss"
],
后面再使用 ng g c *** 自動(dòng)創(chuàng)建組件的時(shí)候氮发，默認(rèn)就會(huì)生成 .scss 后綴的樣式文件了渴肉。
-
angular-cli.json里面的styleExt改成.scss
"defaults": {
"styleExt": "scss",
"component": {}
}
- src 下面
.css后綴的文件全修改為.scss
引入 bootstrap、font-awesome
安裝 bootstrap爽冕、font-awesome 依賴
# bootstrap
npm install bootstrap --save
# font-awesome
npm install font-awesome --save
在 style.scss 引入 bootstrap仇祭、font-awesome 的 css
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";
