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