深入AngularJs(1)

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




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