那些年初識Angular(1)

Flink_China 發布于2019-08-02 11:36 / 881人閱讀

摘要：它包含多個屬性，這些屬性值叫做元數據。會根據元數據渲染組件，并執行組件邏輯。元數據會告訴圖和將這個類處理成一個組件。元數據這段代碼表示這個組件可以通過這個標簽來調用。

那些年初識Angular

由于工作需要初識了Angular，由于個人在學習一門新語言的時候喜歡買一本相關的書籍自己鉆研，還記得自己的第一本Angular書籍是關于Angular2的學習，自此正式踏入Angular的學習。
書寫這篇文章的主要目的是想以此文章幾年自己學習Angular的歷程和自己的一些感想，如果這篇文章能為你提供些許幫助也是極好的，廢話不多說，正式進入正文。

搭建開發環境

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

根據自己的操作系統選擇相應的版本安裝
安裝Angular-cli工具，這個工具可以幫助你快速構建Angular項目,生成項目所需要的組件
這里通過npm在控制臺安裝

npm install -g @angular/cli

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

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

ng new my-app

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

了解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項目的時候已經給我們生成了，如圖：

以初始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
        可以看到里面有這樣一行代碼
        
        這其實就是調用了我們的這個組件

        templateUrl: "./app.component.html" ：
        既然已經知道了怎么調用組件，這行代碼就是用來說明組件顯示的內容是什么。文件路徑就是這個
        組件對應的模板，模板用來定義組件的外觀
        打開app.component.html代碼如下
        
          {{title}}
        

        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 { }

GPU云服務器云服務器免費虛機1年 vps免費1年免費空間1年云主機試用1年

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52992.html

angular - 收藏集 - 掘金

摘要：如何在中使用動畫前端掘金本文講一下中動畫應用的部分。與的快速入門指南推薦前端掘金是非常棒的框架，能夠創建功能強大，動態功能的。自發布以來，已經廣泛應用于開發中。如何在 Angular 中使用動畫 - 前端 - 掘金本文講一下Angular中動畫應用的部分。首先，Angular本生不提供動畫機制，需要在項目中加入Angular插件模塊ngAnimate才能完成Angular的動畫機制...

AlexTuan 2019-08-20 17:19 評論0 收藏0
初識React

摘要：初識依稀記得那年參加線下活動，第一次聽說這個詞語，當時的主講人是郭達峰，他播放了一個關于及的性能對比視頻。合成事件會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。初識React 依稀記得2015那年參加線下活動，第一次聽說React這個詞語，當時的主講人是郭達峰，他播放了一個關于ember、angular及react的性能對比視頻： React.js Co...

kuangcaibao 2019-08-21 14:47 評論0 收藏0
2019 年值得學習的頂級 JavaScript 框架與主題

摘要：我們的目標是找出最有職業投資回報率的主題和技術。比特幣在幾年內增長了若干個量級。比特幣倍拐點在這個圖表中，每個箭頭始于倍點，指向價格修正后的最低點。 showImg(https://segmentfault.com/img/remote/1460000017919159); 圖：Jon Glittenberg Happy New Year 2019 (CC BY 2.0) 又到了一年的...

legendaryedu 2019-08-23 14:46 評論0 收藏0
第二天·初識HTML

摘要：一什么是是超文本標記語言，超文本的意思就是指頁面內可以包含圖片鏈接，甚至音樂程序等非文字元素。這表示著元素的結尾這表示元素在此結束在本例中即段落在此結束。元素指定了當前的字符編碼是，它包括了非常多人類已知語言的字符。一·什么是HTML HTML（HyperText Markup Language）是超文本標記語言，超文本的意思就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素...

Pocher 2019-08-02 12:01 評論0 收藏0
angular，react & vue

摘要：由進行開發和維護，代發布于年月，現在主要是。狀態是只讀的，只能通過來改變，以避免競爭條件這也有助于調試。文件大小為，而為，為。請記住，性能基準只能作為考慮的附注，而不是作為判斷標準。使用的人員報告說，他們永遠不必閱讀庫的源代碼。本文當時寫在本地，發現換電腦很不是方便，在這里記錄下。 angular，react & vue 2018/07/23 2016年，對于JavaScript來說...

jiekechoo 2019-08-23 18:02 評論0 收藏0