Angular的MVC和作用域
更新時間：2016年12月26日 15:51:40 作者：小謝53
本文主要Angular的MVC和作用域進行詳細分析介紹，具有一定的參考價值，下面跟著小編一起來看下吧
首先看看Angular的控制器。
<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-controller='Aaa'>
<p>{{name}}</p>
</div>
<div ng-controller='Bbb'>
<p>{{name}}</p>
</div>
<script type="text/javascript">
function Aaa($scope){
$scope.name = 'hello AngularJs';
};
function Bbb($scope){
$scope.name = 'Hi';
};
</script>
</body>
</html>
在html元素上添加ng-app指令（初始化的指令，任何DOM元素都可以?。?，ng-app可以有屬性值（ng-app="my-app"）后續(xù)詳解。
ng-controller就是模塊下的控制器，$scope上的數(shù)據(jù)屬于局部作用域，在視圖上使用{{}}來渲染數(shù)據(jù)。
上面的例子簡單了展示了一些數(shù)據(jù)，下面看看局部作用域和全局作用域。
<div ng-controller='Aaa'>
<p>{{name}}</p>
<p>{{age}}</p>
</div>
<div ng-controller='Bbb'>
<p>{{name}}</p>
<p>{{age}}</p>
</div>
<script type="text/javascript">
function Aaa($scope,$rootScope){
$scope.name = 'hello AngularJs';
$scope.age = 10;
$rootScope.age = 20;
};
function Bbb($scope){
$scope.name = 'Hi';
$scope.age = 10;
};
</script>
$scope定義局部作用域，$rootScope定義全局作用域。
age得到10和10，如果將Aaa里面的$scope.age = 10;注釋掉，可得到20和10。
局部屬性，會優(yōu)先查找，如果在模塊同時存在該屬性，會優(yōu)先查找局部。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
AngularJS中的$watch()，$digest()和$apply()區(qū)分
這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下2016-04-04
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
任何時候，如果我們想要為請求添加全局功能，例如身份認證、錯誤處理等，在請求發(fā)送給服務器之前或服務器返回時對其進行攔截，是比較好的實現(xiàn)手段2015-12-12
AnglarJS作為一款優(yōu)秀的Web框架，可大大簡化前端開發(fā)的負擔。本文給大家介紹AngularJS進行性能調優(yōu)的7個建議，涉及到angularjs性能調優(yōu)相關知識，對本文感興趣的朋友一起學習吧2015-12-12
這篇文章主要介紹了Angular5中調用第三方庫及jQuery的添加的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
大家可以知道在Angularjs中可以用$http同服務器進行通信，功能上比較簡單，AngularJS還提供了另外一個可選的服務$resource,使用它可以非常方便的同支持restful的服務單進行數(shù)據(jù)交互。這篇文章主要給大家深入的介紹了Angularjs中的$resource服務。2016-12-12
本篇文章主要介紹了angularJS模態(tài)框$modal實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文主要介紹AngularJS 動畫,這里對動畫的資料詳細介紹并附有效果圖和代碼實例,有需要的小伙伴參考下2016-07-07
在我們開發(fā)中經常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內部為我們提供了number等很多內置的filter。2015-05-05
AngularJS1.X學習筆記2-數(shù)據(jù)綁定詳解
本篇文章主要介紹了AngularJS1.X學習筆記2-數(shù)據(jù)綁定詳解，具有一定的參考價值，有興趣的可以了解一下。2017-04-04