用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'));

 框架图：

 

• 
• 大小: 8 KB

• 查看图片附件