那些年初識Angular(1)

那些年初識Angular

因爲工做須要初識了Angular，因爲我的在學習一門新語言的時候喜歡買一本相關的書籍本身鑽研，還記得本身的第一本Angular書籍是關於Angular2的學習，自此正式踏入Angular的學習。
書寫這篇文章的主要目的是想以此文章幾年本身學習Angular的歷程和本身的一些感想，若是這篇文章能爲你提供些許幫助也是極好的，廢話很少說，正式進入正文。

1. 搭建開發環境

   首先你須要安裝node.js
   https://nodejs.org/en/download/

根據本身的操做系統選擇相應的版本安裝
安裝Angular-cli工具，這個工具能夠幫助你快速構建Angular項目,生成項目所須要的組件
這裏經過npm在控制檯安裝

npm install -g @angular/cli

至此總體開發環境搭建完成

1. 生成你的第一個Angular項目
   打開控制檯,利用ng命令生成Angular項目

   ng new my-app

   如下是我生成的一個初始Angular項目結構

   

2. 瞭解Angular項目基本結構
   首先咱們來解釋首層結構
   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這個目錄下，通常一個Angular應用程序，最少須要一個組件，一個模塊。這個在咱們生成Angular項目的時候已經給咱們生成了，如圖：

   

3. 以初始Angular項目來梳理組件，模塊，模板的概念

   在咱們的Angular初始項目中生成一個app.component.ts的文件，這個就是咱們的組件，如下就是我在這個文件的基礎上所對組件牽扯到的一系列知識的整理，若是有不對的地方歡迎指出☺

   // 從angular核心模塊中引入Component裝飾器
   import { Component } from '@angular/core';
   
   /* 這段代碼中的@Components就是一個裝飾器，它用來告知Angular框架來如何處理一個Typescript類。
   它包含多個屬性，這些屬性值叫作元數據。Angular會根據元數據渲染組件，並執行組件邏輯。
   簡單的說就是咱們能夠看到這段代碼的後三行定義了一個AppComponent類，它看着就是一個普通的ts類，
   可是咱們須要告訴Angular這個類是一個組件，這就須要用裝飾器將這些元數據附加到類上。元數據會告
   訴Angular圖和將這個Typescript類處理成一個組件。 */
   
   @Component({
   
     /* 元數據
           selector: 'app-root'：
           這段代碼表示這個組件能夠經過app-root這個html標籤來調用。打開項目根目錄下的index.html
           能夠看到裏面有這樣一行代碼
           <app-root></app-root>
           這其實就是調用了咱們的這個組件
   
           templateUrl: './app.component.html' ：
           既然已經知道了怎麼調用組件，這行代碼就是用來講明組件顯示的內容是什麼。文件路徑就是這個
           組件對應的模板，模板用來定義組件的外觀
           打開app.component.html代碼以下
           <h1>
             {{title}}
           </h1>
   
           styleUrls: ['./app.component.css'] ：
           這個和上面的相似，表示組件的css
      */
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   /* 控制器
      AppComponent實際上是一個很簡單的ts類，可是在這裏他是這個組件的控制器，咱們這個組件全部相關的
      業務邏輯都在這個控制器裏書寫，包含了組件的全部屬性和方法，控制器和模板進行雙向數據綁定也就是
      模板中的{{變量名}}，這裏的兩個花括號就是雙向數據綁定的格式
   
    */
   export class AppComponent {
   }

   模塊：

   /* 主模塊 */
   
   /* import數組 引入項目須要的指令
       例如須要常常須要的ngif等指令 ngif等指令都在CommonModule類中
       引入項目須要的類
       不要在import數組中引入ngmodule類型以外的類
       若是有兩個同名的指令 能夠在指令後面添加 as 別名 另外再給同名指令添加一個別名，就能夠了
       BrowserModule：每一個在瀏覽器中運行的應用都須要引用這個指令
       */
   import { BrowserModule } from '@angular/platform-browser';
   import { NgModule } from '@angular/core';
   
   import { AppComponent } from './app.component';
   
   /* 必須在Ngmodule類中聲明每個用到的組件
      不要在declarations添加組件，指令和管道之外的類型
   */
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }