Angular入門系列(一) Angular的簡介與開發模式總覽

Angular簡介

Angular 是一個 JavaScript 框架。適合用於快速開發基於web的單頁面應用。和傳統開發不同的是,angualr採用類似於模板引擎的開發方式

 

你需要會什麼技術

  1. html css網頁佈局
  2. js es6,es6 學習請參照http://es6.ruanyifeng.com/,這是個很好的學習網站
  3. typescript,這個是很多望而卻步的東西,然後事實上它是基於es6的,多了一些東西。比如es本身對類這種東西支持的不好,而typescript彌補了這一不足,並且很多h5的遊戲引擎都採用typescript開發,它的作用已經越來越重要,推薦個學習網站https://www.tslang.cn/docs/handbook/basic-types.html

 

Angular能幹什麼

  1. 快速開發單頁面應用(無刷新網頁應用)
  2. 大量避免重複性代碼
  3. 豐富的組件庫提高開發效率

 

傳統開發模式

傳統採用js + html + css + jquery技術開發常規應用。

html:決定了頁面的內容

css:決定的頁面的樣式

js+jquery:決定了頁面的行爲,比如點擊會發生什麼

 

舉例

 通常採用dom操作函數,變更頁面上的內容

(1)給文本框賦值

$(".txt").val("新值");

  (2) 綁定事件

$("#btn").click(function(){
    alert("333");
});

 

Angular 的開發模式

angular 的開發思想如下圖所示

 

angular  類似於模板引擎,將數據(Model)和視圖(View)按照一定的規則合併,渲染成最終能看到的頁面。

和jsp做類比:這裏的html定義相當於jsp,這裏的js變量相當相當於request中的bean對象

angular主張自動渲染,更換頁面顯示內容無需編寫dom操作代碼,只需要變量賦值就行了

 

所以開發思路上有一些變化:

(1)暫時忘記jquery

(2)變更頁面內容,不使用dom函數,而是通過變量賦值進行

 

爲什麼叫html 模板,而不是html呢,這是因爲html模板= html + angualr語法

 

下一章講解如何利用angualr 創建簡單的工程,並通過示例講解怎麼通過變更變量刷新頁面內容

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章