angularJS被稱爲前端的MVC可以這樣理解:
- View(視圖), 即 HTML。
- Model(模型), 當前視圖中可用的數據。
- Controller(控制器), 即 JavaScript 函數,可以添加或修改屬性。
1.解釋:【這裏面是對實例的解釋】
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應用程序。【它告訴angular,<div>元素是應用程序的所有者】
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。【把輸入域的值綁定到應用程序變量name】
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
ng-init 指令是初始化angular應用程序變量
ng-controller定義了控制器
angular模塊Module定義了angularjs應用
ng-repeat 指令對於集合中(數組中)的每個項會 克隆一次 HTML 元素。
實例:
<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-app=''>
<p><input type="text" ng-model='name'></p>
<h1>{{name}}</h1>
<div ng-init="firstName='John'">
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>
</div>
<script src='angular.js'></script>
</body>
</html></span>
2.表達式
AngularJS 表達式寫在雙大括號內:{{
expression }}
類似於 JavaScript 表達式,AngularJS 表達式可以包含字母,操作符,變量。
與 JavaScript 表達式不同,AngularJS 表達式可以寫在 HTML 中。
與 JavaScript 表達式不同,AngularJS 表達式不支持條件判斷,循環及異常。
與 JavaScript 表達式不同,AngularJS 表達式支持過濾器。
3.應用
$scope
scope是angularJS中的作用域(其實就是存儲數據的地方),很類似javascript的原型鏈 。搜索的時候,優先找自己的scope,如果沒有找到就沿着作用域鏈向上搜索,直至到達根作用域rootScope。每個模塊只會有1個rootScope