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 })
定义好路由,现在举例来介绍一下MVC框架的处理过程
1.在路由为“/”的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中的元素生成的界面
2.在路由为"/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")