本文執行個體講述了AngularJS的MVC架構。分享給大家供大家參考，具體如下：
MVC應用程式架構最早於1970年起源於Smalltalk語言，後來在傳統型應用程式開發中使用較為廣泛，如今在WEB開發中也非常流行。MVC的核心思想是將資料的管理（Model）、商務邏輯控制（Controller）和資料的展示（View）分離開來，使程式的邏輯性和可維護性更強。
對於AngularJS應用來說，視圖（View）是DOM（文件物件模型），你可以理解為就是HTML頁面。控制器（Controller）是一個使用者自訂的JavaScript類。模型資料（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入門教程之資料繫結用法樣本》代碼的基礎上進行修改，我們通過ng-controller指令聲明一個控制器，名稱為UserController，它所在的div開始標籤和結束標籤之間的部分都由該控制器來管理。
function UserController...為控制器定義部分，這裡我們依靠AngularJs依賴注入系統以參數的形式向控制器中注入$scope和$log對象。$scope為模型資料對象，前面有提到過，ng-model的作用就是為$scope對象添加一個屬性和表單元素繫結。$log對象用於在瀏覽器控制台中輸出調試資訊。
在控制器中可以做一些初始化工作，例如這裡我們將使用者名稱和密碼文字框中的內容初始化為”admin”,”123456”。還可用於事件處理，我們通過ng-click指令聲明按鈕的點擊事件處理函數為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.
AngularJS源碼可點擊此處本站下載。
希望本文所述對大家AngularJS程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
