angular.js如何实现wed开发的MVC框架

   MVC模式学习之MVC解释：

Model（模型）——View（视图）——Controller（控制器）

view用于与用户界面的交互,所需要的指示性数据由controller提供;controller只写与界面交互的内容(读取view的数据),不写具体的方法,仅调用方法;model把所有controller所调的方法写在此model中,接收controller传来的数据源，实现数据的增删改查.controller存在的目地是确保model和view的同步，一旦model改变，view应该同步更新

 

   MVC的处理过程:

首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回的数据，并通过表示层呈现给用户。

 

具体代码的实现：

      首先，当我们在对某个页面提出访问请求之前，需要通过$routeProvider(AngularJS中应用的路由通过$routeProvider来声明，它是$route服务的提供者)配置相应的路由

例如在route.js中定义

myModule.config(function($routeProvider) {
    $routeProvider.when("/",{
        templateUrl: "pages/active_list_page.html",//$routeProvider.when提供路由规则
        controller: ActiveListController //按照加载顺序，第一个路由“/”为默认路由
    }).when("/sign up",{
       templateUrl: "pages/active_sign_up_page.html"，//第二个路由为　"/sign up"
        controller: ActiveSignUpController
    })

 

 

       定义好路由，现在举例来介绍一下ＭＶＣ框架的处理过程

 

      １．在路由为“/”的html(active_list_page.html)中写以下内容

%button.btn.btn-primary(ng-tap=go_sign_up())创建 //点击创建按钮，跳转到报名列表

 

      打开服务器端口，在网址处输入http://127.0.0.1:8000/　页面会跳转到由active_list_page.html中元素生成的界面（界面中有一个创建按钮），当用户点击创建按钮时，控制器（ActivityListController）会接受用户的请求，并调用go_sign_up()方法，我们假定在点击创建按钮时，跳转到报名页面，报名页面的路由＂／sign up＂．

在控制器中写：

$scope.go_sign_up=function(){
   $navigate.go('/sign up')
} 

      $navigate.go(＇/sign up＇)括号中写得是跳转界面的路由， 界面会跳转到由active_sign_up_page.html中的元素生成的界面

 

 

      ２．在路由为"/sign up"的html(active_sign_up_page.html)中写

%li( ng-repeat ="activity in activities" class="{{activity_background(activity)}}")

 

      输入http://127.0.0.1:8000/sign up，进入活动报名界面，活动名以列表的形式显示．活动列表的类型由activity_background(activity)方法提供

      ActiveSignUpController代码

$scope.activity_background = function (activity) {
        return Activity.activity_background_yellow(activity)
    }

 

      当有活动报名时，此活动的活动状态会变为start，控制器（ActiveSignUpController）不会做任何逻辑处理，它会告诉你选择哪个模型（Activity.activity_background_yellow(activity)），选择的模型（model）则返回了处理的结果（即当前活动状态为开始时给一个start的返回值）

      model中代码:

Activity.activity_background_yellow = function (activity) {
    if (activity.status == 'start' ) {
       　return start
    }
}

      控制器用相应的视图格式化模型返回的数据 ，此刻视图（active_sign_up_page.html生成的界面）会反映这些变化，显示给用户的是开始的那个活动的背景颜色为黄色

 

 

      当然，我们也会写背景颜色为黄色的样式

      index.css

.start {
    background: yellow !important;//背景颜色为黄色，！important必须有，有优先使用的意思．
}

      样式引入

 %link(rel="stylesheet" type="text/css" href="css/index.css")