Angular搭建與分析（一）

對于Angular我們知道，其是一款來自谷歌的用HTML和TypeScript構建客戶端應用的平臺與的開源 web 框架。而Angular本身就是用TypeScript 開發而成的。它將核心功能和可選功能作為一組 TypeScript 庫進行實現，可以根據需求把它們導入到應用中。 Angular 的基本構造塊是NgModule，它為組件提供了編譯的上下文環境。NgModule會把相關的代碼收集到一些功能集中。事實上Angular應用就是由一組NgModule定義出的。 應用只會有會有一個用于引導應用的根模塊，當然了我們可以根據需要定義需要子根模塊，通常我們還會引用其他特性的模塊或者我們的自定義模塊。
那我們要怎么樣才能快速搭建和部署Angualr項目呢？

搭建技巧

1. 準備工作
   1. 安裝nodejs。安裝穩定版本

      Node.js 安裝包及×××地址為：https://nodejs.org/en/download/。

   2. 安裝cnpm。這個是由于墻的原因，通過這個方式，使我們在構建項目的時候不會花過多的時間。通過cnpm我們設置淘寶源作為代理，加速我們的安裝進程

      npm install -g cnpm --registry=https://registry.npm.taobao.org

   3. 使用npm/cnpm安裝angular/cli。
      npm install -g @angular/cli 或者 cnpm install -g @angular/cli
2. 創建項目
   1. 直接安裝:
      ng new angulardemo
      這個過程，我們需要等待相當一段時間，讓項目安裝好相關的依賴
      不過嘛，我們可以使用命令·npm install angulardemo --skip-install·創建項目之后，會直接跳過npm install這個環節，之后我們可以通過
      cd angualrdemo使用命令cnpm install讓我們的項目通過國內淘寶源進行安裝依賴
3. 運行項目
   1. 通過命令ng serve --open會打開默認端口4200進行訪問
   2. 如果不想通過給端口則是通過ng serve --port []在方括號里面輸入端口號來運行項目
      通過這三個簡單的操作，我們就可以建立起來一個簡單angular項目。好了，我們既然已經建立了這么要一個Angular項目了，那么我們當然很需要了解一下這個框架所生成的文件

      目錄結構分析

      觀察這個項目我們會發現，angular的目錄結構過分的錯落有致，接下來，我們不妨分析一下這個列表以提高我們對這個框架的理解，系統中所創建的每個文件又有什么意義，文件中的代碼又起到什么作用
      
      首層目錄：

      angular.json：工作區中所有項目的默認 CLI 配置，包括 CLI 使用的構建選項、運行選項、測試工具選項（比如 TSLint、Karma、Protractor）等
      e2e：在e2e下是端到端(end-to-end)測試
      node_modules：我們安裝的第三方模塊都放置在這里，提供給整個工作區的 npm 包
      src：項目所有的文件都放在這里
      package.json：整個項目的配置文件，即npm的配置文件。配置用于工作區中所有項目的包依賴項。
      README.md：自動生成的項目說明文檔
      tsconfig.json：typescript編譯器的配置，工作區中所有應用的默認 TypeScript 配置。包括 TypeScript 選項和 Angular 模板編譯器選項。
      tslint.json：給TSLink和CodeStyle用的配置信息，使代碼風格一致

src層目錄：

app：組件，以及app/module放置的模塊，我們新建的component、service、module等組件對象都是存儲在這個文件夾里面，整個程序的入口也在這個地方，這個文件夾也是我們發揮的舞臺。
assets：靜態資源。包含圖像文件和其它文件，當構建應用時會被原樣復制到構建目標中。
browserslist：支持的瀏覽器配置
environments：為各個目標環境準備的文件。包含針對特定目標環境的配置選項。默認情況下有一個未命名的標準開發環境和一個名叫 "prod" 的產品環境。你可以定義一些額外的目標環境配置。
favicon.ico
index.html：主頁面
karma.conf.js
main.ts：應用的主要入口
polyfills.ts：填充庫幫我們把這些不同點進行標準化，可能遇到socket.io的錯誤
styles.css：全局的公共的風格文件
test.ts：單元測試的入口
tsconfig.app.json：typescript的配置文件，繼承自工作區級的 tsconfig.json 文件。
tsconfig.spec.json：繼承自工作區級的 tsconfig.json 文件。
tslint.json：繼承自工作區級的 tsconfig.json 文件。

組件分析

因為Angular是通過組件定義應用的，其可以通過組件定義視圖，還可以通過組件使用服務，當然了組件和服務都是簡單的類，這些類使用裝飾器來標出它們的類型，并提供元數據以告知 Angular 該如何使用它們。

• 所謂視圖，是一組可見的屏幕元素，Angular可以根據程序邏輯和數據來選擇和修改它們。
  • 每個應用都至少有一個根組件。組件類的元數據將組件類和一個用來定義視圖的模板關聯起來。 模板把普通的 HTML 和指令與綁定標記（markup）組合起來，這樣 Angular 就可以在呈現 HTML 之前先修改這些 HTML。
  • 應用的組件通常會定義很多視圖，并進行分級組織。 Angular 提供了 Router 服務來幫助你定義視圖之間的導航路徑。
  • 路由器提供了先進的瀏覽器內導航功能。
• 服務會提供那些與視圖不直接相關的功能。服務提供商可以作為依賴被注入到組件中，這能讓你的代碼更加模塊化、可復用，而且高效。服務的元數據提供了一些信息，Angular 要用這些信息來讓組件可以通過依賴注入（DI）使用該服務。

  app.module.ts

  定義 AppModule，這個根模塊會告訴 Angular 如何組裝該應用。 目前，它只聲明了 AppComponent。 稍后它還可以聲明更多組件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'testdemo01';
}

組件元數據裝飾器（@Component）

簡稱組件裝飾器，用來告知Angular框架如何處理一個TypeScript類.
Component裝飾器包含多個屬性，這些屬性的值叫做元數據，Angular會根據這些元數據的值來渲染組件并執行組件的邏輯。配置中說明：

• 程序的的根依賴是"app-root"，
• 所加載的模板路徑是'./app.component.html'。在這里我們可以通過組件自帶的模板來定義組件的外觀，模板以html的形式存在，告訴Angular如何來渲染組件，一般來說，模板看起來很像html，但是我們可以在模板中使用Angular的數據綁定語法，來呈現控制器中的數據。
• 加載的css路徑來自于'./app.component.css'

自定義組件

創建組件， 我們通過該命令來創建組件：
ng generate component components/xxx
其實這個可以簡寫成
ng g c components/xxx

import { Component, OnInit } from '@angular/core'; /*引入 angular 核心*/
@Component({ 
    selector: 'app-header', /*使用這個組件的名稱*/ 
    templateUrl: './header.component.html', /*html 模板*/ 
    styleUrls: ['./header.component.css'] /*css 樣式*/ 

}) 
export class HeaderComponent implements OnInit { /*實現接口*/

    constructor() { /*構造函數*/
    }

    ngOnInit() { /*初始化加載的生命周期函數*/
    }
}

結束

這個就是本次前端分享的大致內容：Angular項目的安裝和部署以及文件結構的介紹很有趣吧，我們可以通過幾個簡單的命令就可以快速的創建和部署一個前端項目，由于現階段流行的前后端分離的架構方式，這樣的部署使我們在構建和設計前端邏輯更加便捷和流暢，下篇文章將介紹Angular所依賴的語法規則TypeScript