AngularJS之使用控制器封装业务逻辑

控制器的作用

我们知道,在AngularJS中,实现数据绑定的核心是scope对象。那么控制器又有什么用呢?

简单地说,没有控制器/controller,我们没有地方定义业务模型。

回忆下ng-init指令。我们可以使用ng-init指令在scope对象上定义数据,比如:

  1. <div ng-init="sb={name:‘somebody‘,gender:‘male‘,age:28}">
  2. </div>

但是,ng-init的值是一个AngularJS表达式,没有办法定义方法。

控制器让我们有机会在scope上定义我们的业务逻辑,具体说,可以使用控制器:

  1. 对scope对象进行初始化
  2. 向scope对象添加方法

在模板中声明控制器

在一个HTML元素上使用ng-controller指令,就可以引入一个控制器对象:

  1. <div ng-controller="myController">...</div>

控制器的实现

控制器实际上就是一个JavaScript的类/构造函数:

  1. //控制器类定义
  2. var myControllerClass = function($scope){
  3. //模型属性定义
  4. $scope.text = "...";
  5. //模型方法定义
  6. $scope.do = function(){...};
  7. };
  8. //在模块中注册控制器
  9. angular.module(‘someModule‘,[])
  10. .controller("myController",myControllerClass);

控制器的一次性

控制器构造函数仅在AngularJS对HTML文档进行编译时被执行一次。从这个角度看, 就更容易理解为何将控制器称为对scope对象的增强:一旦控制器创建完毕,就意味着scope对 象上的业务模型构造完毕,此后就不再需要控制器了- scope对象接管了一切。

控制器对scope的影响

ng-controller指令总是创建一个新的scope对象:

在图中,我们看到:

  1. ng-app指令引发$rootScope对象的创建。开始时,它是一个空对象。
  2. body元素对应的scope对象还是$rootScope。ng-init指令将sb对象挂在了$rootScope上。
  3. div元素通过ng-controller指令创建了一个新的scope对象,这个对象的原型是$rootScope。
  4. 因为原型继承的关系,在do函数中对sb的引用指向$rootScope.sb。

初始化$scope对象

通常在应用启动时,需要初始化scope对象上的数据模型。我们之前曾使用ng-init指令进行初始化, 而使用控制器则是更为规范的做法。

示例定义了一个ezController,利用这个控制器,我们对业务模型进行了初始化赋值:

示例:http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/中“使用控制器封装业务逻辑”第四页

请注意,控制器仅仅负责在编译时在scope对象上建立视图对象vm,视图对象和模板的绑定则是由 scope负责管理的。

向cope对象添加方法

业务模型是动态的,在数据之外,我们需要给业务模型添加动作。

在之前建立的业务模型上,我们增加一个随机挑选的方法:shuffle,这个方法负责 从一个小型的名人库中随机的选择一个名人来更新模型的sb属性:

通过在button上使用ng-click指令,我们将模型的shuffle方法绑定到了鼠标点击 事件上。试着用鼠标点击【shuffle】按钮,我们的模型将从库里随机的选出一个 名人,显示在视图里。

示例代码参见:http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/中“使用控制器封装业务逻辑”第五页。

别把任何代码都塞到控制器里!

控制器的设计出发点是封装单个视图的业务逻辑,因此,不要进行以下操作:

  • DOM操作

应当将DOM操作使用指令/directive进行封装。

  • 变换输出形式

应当使用过滤器/filter对输出显示进行转化。

  • 跨控制器共享代码

对于需要复用的基础代码,应当使用服务/service进行封装

参考资料:http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/

时间: 2024-10-13 21:15:43

AngularJS之使用控制器封装业务逻辑的相关文章

减少存储过程封装业务逻辑-web开发与传统软件开发的思维模式不同

本篇文章讨论并不是:不要使用存储过程,因为有些事情还是要存储过程来完成,不可能不用.而是关于:"业务逻辑是不是要封装在存储过程中实现,这样子php.java等就是调用存储过程". 业务逻辑,通俗说就是:比如要取数据的操作,取出会员编号为x的数据,原来我们一般是封装成函数,或者直接编写sql语句查询.现在是交给数据库的存储过程去完成. +------------------------------------------------------------ 写这篇文章的缘由 +-----

ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装

原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(4)-业务逻辑层的封装 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程 前言:前面几篇博客我们基本已经介绍完了搭建整个项目和数据库访问层以及一些业务逻辑层的实现,当然了,我们的数据库访问层这样还是可以在进行封装的,但是我到这里就行了吧,项目也不大,不需要那么麻烦的,那么我们今天开始介绍我们需要介绍的内容,那就是我

ASP.NET 业务逻辑层用户列表的各种操作封装

用户列表的业务逻辑层代码的封装 using System;using System.Collections.Generic;using System.Linq;using System.Text;using CZBK.TestProject.Model; namespace CZBK.TestProject.BLL{ public class EmployeeService { DAL.EmployeeDal EmployeeDal = new DAL.EmployeeDal(); public

AngularJS 精妙绝伦的控制器

学习要点: 为什么使用控制器 基本原理 创建使用控制器 作用域 组织控制器 单块控制器 复用控制器 控制器继承 多控制器 无作用域控制器 显示更新控制器–使用JQuery UI 为什么使用控制器? 控制器就像领域模型和视图的纽带,它从模型中暴露数据给视图,它给视图提供数据与服务,并且定义了所需的业务逻辑,从而将用户行为转换为模型上的变化. 一.理解基本原理 控制器是通过NG的Module.controller来创建的,它接受一个控制器名称和一个工厂函数,这个工厂函数内部有一个$scope服务,用

翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构风格,在应用的长时间生命周期中,解决维护和扩展问题.所以,让我们在解决方案中添加一个类库项目,命名为 Application.Common. Application.Common : 这是一个类库项目, 提供公共功能,可以被不同的业务逻辑层使用.例如:安全,日志,跟踪,验证等等. 定义在这个层中的组

【SSH进阶之路】一步步重构MVC实现Struts框架——封装业务逻辑和跳转路径(四)

目录: [SSH进阶之路]Struts基本原理 + 实现简单登录(二) [SSH进阶之路]一步步重构MVC实现Struts框架--从一个简单MVC开始(三) [SSH进阶之路]一步步重构MVC实现Struts框架--封装业务逻辑和跳转路径(四) [SSH进阶之路]一步步重构MVC实现Struts框架--彻底去掉逻辑判断(五) [SSH进阶之路]一步步重构MVC实现Struts框架--完善转向页面,大功告成(六) Struts的第二篇博客[SSH进阶之路]Struts基本原理 + 实现简单登录(二

PHP业务逻辑层和数据访问层设计

以下还是觉得有点抽象 1.面向对象能给我们什么? 进行分析之前,我们先来复习一下面向对象.对象是要进行研究的任何事物.类是具有相同或相似性质的对象的抽象.面向对象的要素:封装.继承.多态.面向对象目的是:如何分配职责. 面向对象设计原则: 单一职责原则 (SRP) 一个类,只有一个引起它变化的原因. 开放-封闭原则 (OCP)(对外)可扩展,(对内)不可修改. 李氏替换原则 (LSP) 子类型必须能够完全替换其父类型. 依赖倒置原则 (DIP) 要依赖于抽象,不要依赖于具体. 接口隔离原则 (I

github分页插件的业务逻辑

github分页插件查询的业务逻辑: controller层: query封装前端传来的数据 Service层: 1.构建一个PageBounds:当前页(page).查询多少条(pageSize).排序 2.调用dao的查询方法:查询条件,分页参数对象:返回一个PageList或者List 3.service接收到dao的查询结果(结果集.分页对象paginator) 返回的数据: 根据EsasyUI,必须返回rows 和 total,rows为dao曾返回的结果列表,total为分页对象中的

机房合作---业务逻辑在哪里?

前言:学习过程中,不要因为有遗留的问题而感到惭愧,在之后项目中,只要用心,就能解决遗留的问题. 谨以此文,记录我重新对UI.外观.BLL层中是否该有逻辑判断的一个思考推理过程. 验收机房重构的时候,我的UI层.外观层.BLL层代码是这样子写的:(以登录这条线为例) 先看BLL层: Public Class LoginManager '检查用户名是否存在 Public Function IsUserExists(ByVal user As Entity.UserInfo) As Boolean D