Angular簡介
Angular 是一個 JavaScript 框架。適合用於快速開發基於web的單頁面應用。和傳統開發不同的是,angualr採用類似於模板引擎的開發方式
你需要會什麼技術
- html css網頁佈局
- js es6,es6 學習請參照http://es6.ruanyifeng.com/,這是個很好的學習網站
- typescript,這個是很多望而卻步的東西,然後事實上它是基於es6的,多了一些東西。比如es本身對類這種東西支持的不好,而typescript彌補了這一不足,並且很多h5的遊戲引擎都採用typescript開發,它的作用已經越來越重要,推薦個學習網站https://www.tslang.cn/docs/handbook/basic-types.html
Angular能幹什麼
- 快速開發單頁面應用(無刷新網頁應用)
- 大量避免重複性代碼
- 豐富的組件庫提高開發效率
傳統開發模式
傳統採用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 創建簡單的工程,並通過示例講解怎麼通過變更變量刷新頁面內容