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

對于AngularJS應用來說，視圖（View）是DOM（文檔對象模型），你可以理解為就是HTML頁面。控制器（Controller）是一個用戶自定義的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入門教程之數(shù)據(jù)綁定用法示例》代碼的基礎上進行修改，我們通過ng-controller指令聲明一個控制器，名稱為UserController，它所在的div開始標簽和結束標簽之間的部分都由該控制器來管理。

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

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

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

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

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

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