Angular4學習筆記01——基本安裝

##Angular4——安裝環境 首先須要安裝node.js和npm，最新的nodejs已經集成了npm，因此不須要單獨安裝npm了。
直接下載nodejs的安裝包，下一步直到安裝結束。
安裝完以後，在cmd窗口下，經過node - v和npm -v來查詢node和npm版本，若是正確的現實版本號，則說明node和npm安裝成功。

安裝完以後能夠指定一下npm庫的位置，推薦使用淘寶鏡像地址，提升下載插件速度，若不指定也能夠，可是會直接在國外服務器下載，速度較慢。

npm config set registry https://registry.npm.taobao.org 
npm -loglevel info install grunt
複製代碼

如果有本身的私有庫服務器也是能夠指定在這裏的。 前面的安裝工做完成後，調用下面的指令，

npm install -g @angular/cli
npm install node-sass --save-dev
複製代碼

安裝CLI工具，調用

ng -v
複製代碼

若是能出現版本號和angular標識，則說明CLI安裝完成。

####一、建立項目 ng new XXXX(項目名稱) 能夠經過命令行的方法建立一個須要的項目。

如圖是一個test的項目，參照如圖所示，說明一下angular4項目的目錄結構。

首層目錄：
node_modules        第三方依賴包存放目錄
e2e                 端到端的測試目錄  用來作自動測試的
src                 應用源代碼目錄  
.angular-cli.json   Angular命令行工具的配置文件。後期可能會去修改它，引一些其餘的第三方的包  好比jquery等
karma.conf.js       karma是單元測試的執行器，karma.conf.js是karma的配置文件
package.json        這是一個標準的npm工具的配置文件，這個文件裏面列出了該應用程序所使用的第三方依賴包。實際上咱們在新建項目的時候，等了半天就是在下載第三方依賴包。下載完成後會放在node_modules這個目錄中，後期咱們可能會修改這個文件。
protractor.conf.js  也是一個作自動化測試的配置文件
README.md           說明文件
tslint.json         是tslint的配置文件，用來定義TypeScript代碼質量檢查的規則，不用管它
複製代碼

src目錄：
app目錄               包含應用的組件和模塊，咱們要寫的代碼都在這個目錄
assets目錄            資源目錄，存儲靜態資源的  好比圖片
environments目錄      環境配置。Angular是支持多環境開發的，咱們能夠在不一樣的環境下（開發環境，測試環境，生產環境）共用一套代碼，主要用來配置環境的
index.html            整個應用的根html，程序啓動就是訪問這個頁面
main.ts               整個項目的入口點，Angular經過這個文件來啓動項目
polyfills.ts          主要是用來導入一些必要庫，爲了讓Angular能正常運行在老版本下
styles.css            主要是放一些全局的樣式
tsconfig.app.json     TypeScript編譯器的配置,添加第三方依賴的時候會修改這個文件
tsconfig.spec.json    不用管
test.ts               也是自動化測試用的
typings.d.ts          不用管
複製代碼

app目錄：
app.component.css		組件樣式
app.component.html		組件模板頁面
app.component.spec.ts	暫時母雞
app.component.ts		組件
app.module.ts			模塊
複製代碼

這裏的css和html和通常的html頁面沒有太大區別，比較重要的是組件和模塊。下面詳細看一下組件和模塊文件的內容：

/*這裏是從Angular核心模塊裏面引入了component裝飾器*/
import {Component} from '@angular/core';

/*用裝飾器定義了一個組件以及組件的元數據  全部的組件都必須使用這個裝飾器來註解*/
@Component({
  /*組件元數據  Angular會經過這裏面的屬性來渲染組件並執行邏輯
  * selector就是css選擇器，表示這個組件能夠經過app-root來調用，index.html中有個<app-root>Loading...</app-root>標籤，這個標籤用來展現該組件的內容
  *templateUrl  組件的模板，定義了組件的佈局和內容
  *styleUrls   該模板引用那個css樣式
  * */
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/*AppComponent原本就是一個普通的typescript類，可是上面的組件元數據裝飾器告訴Angular，AppComponent是一個組件，須要把一些元數據附加到這個類上，Angular就會把AppComponent當組件來處理*/
export class AppComponent {
  /*這個類實際上就是該組件的控制器，咱們的業務邏輯就是在這個類中編寫*/
  title = '學習Angular';
}
複製代碼

組件相關的概念：
1.組件元數據裝飾器（@Component）
簡稱組件裝飾器，用來告知Angular框架如何處理一個TypeScript類.
Component裝飾器包含多個屬性，這些屬性的值叫作元數據，Angular會根據這些元數據的值來渲染組件並執行組件的邏輯。
*2.模板（Template） *
咱們能夠經過組件自帶的模板來定義組件的外觀，模板以html的形式存在，告訴Angular如何來渲染組件，通常來講，模板看起來很像html，可是咱們能夠在模板中使用Angular的數據綁定語法，來呈現控制器中的數據。
*3.控制器（controller） *
控制器就是一個普通的typescript類，他會被@Component來裝飾，控制器會包含組件全部的屬性和方法，絕大多數的業務邏輯都是寫在控制器裏的。控制器經過數據綁定與模板來通信，模板展示控制器的數據，控制器處理模板上發生的事件。
...
還有其餘的項目一些屬性，在後面使用到的時候再具體說明

import { StarsComponent } from './stars/stars.component';


@NgModule({
  declarations: [//聲明模塊中有哪些東西，只能聲明 組件 指令 管道
    AppComponent,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    CarouselComponent,
    ProductComponent,
    StarsComponent
  ],
  imports: [//聲明該模塊依賴的模塊
    BrowserModule
  ],
  providers: [],//默認爲空，聲明模塊中聽過的服務
  bootstrap: [AppComponent]//聲明模塊的主組件
})
export class AppModule { }
複製代碼

####二、安裝第三方插件 安裝jQuery
npm install jquery --save
安裝bootstrap
npm install bootstrap --save

安裝好的第三方依賴在package.json文件中體現依賴名和版本：

"private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
複製代碼

在安裝完jquery和bootstrap後，須要在.angular-cli.json文件裏面對它們的js和css進行引用：

"testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],
  "environmentSource": "environments/environment.ts",
複製代碼

引用完以後還沒法直接使用jQuery和bootstrap的內容，由於anjular是使用的typescript，因此還須要安裝一下jquery和bootstrap的類型文件：
npm install @types/jquery --save npm install @types/bootstrap --save
讓typescript能夠去識別jquery和bootstrap

####三、運行項目 運行一個angular項目，能夠依賴於開發工具，也能夠經過命令行的形式，在對應項目的根目錄下執行命令行： ng serve就能夠啓動項目。