AngulJS簡介
- 谷歌公司動態爲web應用設計的JavaScript框架，爲了克服HTML在構建應用上的不足。
- 它可通過
<script>標籤添加到HTML頁面。 - AngularJS通過指令拓展了HTML，且通過表達式綁定數據到HTML。
AngularJS 四大核心思想
依賴注入、模塊化、雙向綁定、語義化標籤
AngularJS 的優點：
- 不需要寫大量代碼，實現複雜功能；
- 不要像jQuery大量操作複雜DOM代碼，只需改變數據模型，加快開發。
什麼是AngularJS？
AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
- AngularJS 把應用程序數據綁定到 HTML 元素。
- AngularJS 可以克隆和重複 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素”背後”添加代碼。
- AngularJS 支持輸入驗證。
AngularJS前端MVC的設計與搭建
爲什麼需要MVC？
1、代碼規模越來越大，切分職責是大勢所趨。
2、爲了複用：很多邏輯是一模一樣的。
3、爲了後期維護方便：修改一塊功能不影響其他功能。
MVC只是手段，終極目標是模塊化和複用。
前端MVC的困難：
流程：瀏覽器加載腳本->加載完成之後JIT編譯執行
操作DOM的代碼必須等待整個頁面全部加載完成；
多個JS文件之間如果出現相互依賴，程序猿必須自己解決；
JS的原型繼承也給前端帶來了很多困難
M：模型model-數據庫 ； V：視圖-HTML頁面 ； C：控制器-處理用戶交互
MVC框架
<body ng-app="app"> //ng-app:設置aglJS管理邊界
<div ng-controller="MyCtrl"> //ng-controller:設置控制器 V視圖
<input ng-model="msg"> //ng-model:把元素值(比如輸入域的值)綁定到應用程序
<h1>{{msg}}</h1> //{{}}:將msg綁定到h1
</div>
</body>
<script type="text/javascript">
angular.module('app',[]) //[]爲其他aglJS模塊，使用需引入該模塊js
.controller('MyCtrl',function($scope){
$scope.msg="angular" //數據模型
})
</script>注：MyCtrl爲控制器（C）；body爲視圖（V）；
module定義了AngularJS應用，Controller用於控制AngularJS應用。
什麼是AngularJS？
AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
- AngularJS 把應用程序數據綁定到 HTML 元素。
- AngularJS 可以克隆和重複 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素”背後”添加代碼。
- AngularJS 支持輸入驗證。