快捷導(dǎo)航

AngularJS入門教程之MVC架構(gòu)實例分析

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

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

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

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

對于AngularJS應(yīng)用來說，視圖（View）是DOM（文檔對象模型），你可以理解為就是HTML頁面?？刂破鳎–ontroller）是一個用戶自定義的JavaScript類。模型數(shù)據(jù)（Model）存儲在對象的屬性中。

我們來看下面的代碼：

<!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>

我們在前面一篇《AngularJS入門教程之?dāng)?shù)據(jù)綁定用法示例》代碼的基礎(chǔ)上進行修改，我們通過ng-controller指令聲明一個控制器，名稱為UserController，它所在的div開始標(biāo)簽和結(jié)束標(biāo)簽之間的部分都由該控制器來管理。

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

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

在瀏覽器中運行可以看到效果如下：

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

AngularJs的控制器的作用域僅限于ng-controller所在的元素開始標(biāo)簽和結(jié)束標(biāo)簽之間的部分，為了證明這個結(jié)論我們再增加一個控制器，代碼如下：

<!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;">
 個人愛好：<input type="text" ng-model="love" placeholder="個人愛好"/>
 <p>您輸入的個人愛好：{{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控制器中定義的，我們在控制臺中輸出$scope.name和$scope.pword顯示為undefined.