用angular-js實現web開發的mvc框架

在 AngularJS 裏，View 和 Model 是在 Controller 裏面綁定的，所以無論你在 View 的表單中修改了內容，還是在 Controller 裏通過代碼修改了 Model 值，兩邊都會即時發生變化，同步更新。因爲 AngularJS 會監控 Model 對象的變化，隨時反映到 View 中。

 

MVC 是一種使用（模型-視圖-控制器）設計創建 Web 應用程序的模式。

Model用來處理數據庫中的數據，如處理存儲在本地的localstorage中的key（數據名）和value（數據值），並與Controller交流。

View指頁面顯示的內容，如處理數據顯示。

Controller代表控制器，用來讀取view的數據以及對頁面一些顯示功能的控制，並向Model發送數據。

MVC 模式同時提供了對 HTML、CSS 和 JavaScript 的完全控制。

angular.js也是一個客戶端的mvc框架，他有自己的控制器，對程序結構進行有效規範，例如，我們可以通過        $routeProvider，定義整個應用的路由表;

示例代碼：

myModule.config(function($routeProvider) {
    $routeProvider.when("/",{
        templateUrl: "pages/activity_list.html",
        controller: ActivityListController
    }).when("/create",{
           templateUrl:"pages/create_activity.html",
           controller:CreateActivityController
        }).when("/sign",{
            templateUrl:"pages/sign_up.html",
            controller:SignUpController
        }).when("/bid_list",{
            templateUrl:"pages/bidding_list.html",
            controller:BiddingListController
        }).when("/bid_sign",{
            templateUrl:"pages/bidding_sign.html",
            controller:BiddingSignController
        }).otherwise({
            redirectTo: "/"
    });
})

 when中的第一個參數爲本地路徑

比如在命令行輸入Rwebserver打開http://127.0.0.1:8000/網址,如果when後面的地址爲'/'則表示此爲默認地址，也就是上面路由表中pages/activity_list.html頁面對應的網址爲http://127.0.0.1:8000/

如果when後面的地址爲"/create"，則pages/create_activity.html頁面對應的網址爲http://127.0.0.1:8000/create/

後面的的templateUrl參數定義處理完成後的頁面

再後面controller參數定義了控制器的名字。

 

可以這樣理解mvc框架：

   $routeProvider定義路由表。controller中定義相當於應用控制器的函數（方法），在一個controller中，可以定義多個方法，執行時可以相互調用，也可以調用modal中數據庫的內容。通過$scope作用域實現數據共享，直接把從modal得到的數據放到作用域。這個$scope作用域只和本頁面有關。通過ng-model，ng-repeat，{{name}}實現數據綁定與逐個展示。

 view中的一個按鈕：

%button.btn.btn-4(ng-tap = 'go_create()')

 

當點擊此按鈕時觸發ng-tap = 'go_create()'事件，執行$scope.go_create()方法，

function ActivityListController($scope, $navigate) {
    $scope.go_create = function () {
        $navigate.go('/create')
    };
}

 

$scope實現controller與view的交互，$navigate通過$routeProvider路由表實現頁面之間的跳轉'/create'對應路由表中所指向的頁面地址（view）和控制器（controller）

view中的數據綁定{{activity.name}}

 

.wrapper.wrapper
    %ul.list-style-2()
      %li(ng-repeat ="activity in activities" )
        %h3
          {{activity.name}}

 用ng_repeat實現數組activities中的每個元素activity逐個顯示在view中，list-style-2是一種列表樣式。

 

 

controller中的用$scope對view傳值;

 

$scope.activities = JSON.parse(localStorage.getItem('activities'));

 框架圖：