快捷導(dǎo)航

AngularJS入門(mén)教程之MVC架構(gòu)實(shí)例分析

更新時(shí)間：2016年11月01日 15:36:49 作者：Rongbo_J

這篇文章主要介紹了AngularJS的MVC架構(gòu),結(jié)合實(shí)例形式重點(diǎn)分析了ng-controller聲明并使用控制器的操作技巧與控制器作用域的相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了AngularJS的MVC架構(gòu)。分享給大家供大家參考，具體如下：

MVC應(yīng)用程序架構(gòu)最早于1970年起源于Smalltalk語(yǔ)言，后來(lái)在桌面應(yīng)用程序開(kāi)發(fā)中使用較為廣泛，如今在WEB開(kāi)發(fā)中也非常流行。MVC的核心思想是將數(shù)據(jù)的管理（Model）、業(yè)務(wù)邏輯控制（Controller）和數(shù)據(jù)的展示（View）分離開(kāi)來(lái)，使程序的邏輯性和可維護(hù)性更強(qiáng)。

對(duì)于AngularJS應(yīng)用來(lái)說(shuō)，視圖（View）是DOM（文檔對(duì)象模型），你可以理解為就是HTML頁(yè)面。控制器（Controller）是一個(gè)用戶自定義的JavaScript類。模型數(shù)據(jù)（Model）存儲(chǔ)在對(duì)象的屬性中。

我們來(lái)看下面的代碼：

<!DOCTYPE html>
<html ng-app>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial03</title>
</head>
<body>
<div ng-controller="UserController">
 用戶名：<input type="text" ng-model="name" placeholder="用戶名"/>
 密碼：<input type="password" ng-model="pword" placeholder="密碼"/>
 <button ng-click="login()">提交</button>
 <p>您輸入的用戶名：{{name}}</p>
 <p>您輸入的密碼：{{pword}}</p>
</div>
<script>
 function UserController ($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $log.info( $scope.name);
  $log.info( $scope.pword);
  $scope.login = function()
  {
   alert("登錄");
  }
 }
</script>
</body>
</html>

我們?cè)谇懊嬉黄?a target="_blank" href="http://www.dbjr.com.cn/article/96218.htm">AngularJS入門(mén)教程之?dāng)?shù)據(jù)綁定用法示例》代碼的基礎(chǔ)上進(jìn)行修改，我們通過(guò)ng-controller指令聲明一個(gè)控制器，名稱為UserController，它所在的div開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的部分都由該控制器來(lái)管理。

function UserController...為控制器定義部分，這里我們依靠AngularJs依賴注入系統(tǒng)以參數(shù)的形式向控制器中注入$scope和$log對(duì)象。$scope為模型數(shù)據(jù)對(duì)象，前面有提到過(guò)，ng-model的作用就是為$scope對(duì)象添加一個(gè)屬性和表單元素綁定。$log對(duì)象用于在瀏覽器控制臺(tái)中輸出調(diào)試信息。

在控制器中可以做一些初始化工作，例如這里我們將用戶名和密碼文本框中的內(nèi)容初始化為”admin”,”123456”。還可用于事件處理，我們通過(guò)ng-click指令聲明按鈕的點(diǎn)擊事件處理函數(shù)為login()，在控制器中通過(guò)$scope.login = function()...進(jìn)行事件綁定。

在瀏覽器中運(yùn)行可以看到效果如下：

頁(yè)面加載時(shí)文本框中內(nèi)容被初始化，點(diǎn)擊提交彈出對(duì)話框。

AngularJs的控制器的作用域僅限于ng-controller所在的元素開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的部分，為了證明這個(gè)結(jié)論我們?cè)僭黾右粋€(gè)控制器，代碼如下：

<!DOCTYPE html>
<html ng-app>
<head lang="en">
 <meta charset="UTF-8">
 <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
 <title>tutorial03</title>
</head>
<body>
<div ng-controller="UserController" style="border:#ccc solid 1px;">
 用戶名：<input type="text" ng-model="name" placeholder="用戶名"/>
 密碼：<input type="password" ng-model="pword" placeholder="密碼"/>
 <button ng-click="login()">提交</button>
 <p>您輸入的用戶名：{{name}}</p>
 <p>您輸入的密碼：{{pword}}</p>
</div>
<br/>
<div ng-controller="InfoContoller" style="border:#ccc solid 1px;">
 個(gè)人愛(ài)好：<input type="text" ng-model="love" placeholder="個(gè)人愛(ài)好"/>
 <p>您輸入的個(gè)人愛(ài)好：{{love}}</p>
</div>
<script>
 function UserController($scope,$log)
 {
  $scope.name="admin";
  $scope.pword="123456";
  $scope.login = function()
  {
   alert("登錄");
  }
 }
 function InfoContoller($scope,$log)
 {
  $scope.love="足球";
  $log.info($scope.name);
  $log.info($scope.pword);
  $log.info($scope.love);
 }
</script>
</body>
</html>

由于name和pword不是在InfoContoller控制器中定義的，我們?cè)诳刂婆_(tái)中輸出$scope.name和$scope.pword顯示為undefined.