Angular企业级开发(7)-MVC之控制器

简介:

1.MVC中的控制器

AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级AngularJS应用。

涉及到多个控制器中使用的业务逻辑,需要放到一个公共的服务中,然后把改服务注入使用到该业务逻辑的控制器中。

2.理解控制器

在AngularJS的控制器中,构造函数会有$scope参数。当一个控制器通过ng-controller指令连接到DOM上,Angular将实例化一个新的控制器对象,然后调用指定的控制器的构造函数。一个新的子作用范围(scope)将被创建,并作为一种可注入的参数传递给控制器​​的构造函数为$scope

如果控制器使用controller as语法附加到DOM上,那么控制器实例将被分配给新的$scope范围。并且多了一个和as同名的属性,然后把自己指向这个属性,就方便我们访问了。

3.控制器的作用

3.1 在控制器中初始化模型(添加属性)

创建控制器并将它附加到DOM元素之后,AngularJS会创建一个子作用域。子作用域保存着对应控制器的数据模型。子作用域可以通过$scope来获取。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>AngularJS Controller Demo</title>
    <script type="text/javascript" src="angular.min.js">

    </script>
    <script src="app.js" charset="utf-8"></script>
</head>

<body ng-controller="MainController">
    <p>{{username}}</p>
    <p>{{age}}</p>
</body>

</html>
(function () {
    'use strict';
    angular.module("myApp", [])
        .controller('MainController', ['$scope', function ($scope) {
            $scope.username="leeli";
            $scope.age=28;
        }]);
})();

3.2 在控制器中附件行为(添加事件或方法)

附加行为的方式是把方法或事件添加到$scope对象上,以便在控制器对应的视图中使用到改方法。也有很多方法是处理业务的,也是附加到$scope对象上。
ng-click对应的事件方法在controller里面定义为addItem,所以在视图上我们可以使用addItem方法。

视图上的ng-clickng-modelng-repeat都是AngularJS的内置指令,后续博客会详细介绍。

AngularJS Controller Demo

4.控制器作用域

因为控制器是附加到DOM元素上,所以存在着一个视图,有多个控制器。控制器之间可以是并列的,也可以是嵌套的形式存在。

4.1 视图中控制器并列

各个控制器从附加DOM元素节点开始,到节点对应闭合标签结束的地方创建了一个子控制域,单个控制器里面的$scope对象只能访问和调用该控制器范围内的属性和方法。
控制器并列Demo

4.2 视图中控制器嵌套

默认情况下,AngularJS在当前作用域中无法找到某个属性,就会在父级作用域中进行查找。即子级控制器会继承父级控制器中的对象。但是子级作用域和父级作用域中有相同的属性,子级使用自己的作用域。这个时候子级作用域要访问父级作用域的属性可以通过$parent。类似JavaScript本身的原型链方式。

控制器嵌套Demo

5.何为ControllerAs

AngularJS提供$scope方式来处理Controller。代码如下:

<div ng-app="myApp">
  <div ng-controller="MainController">
    <p>Hello {{ name }}</p>
  </div>
</div>
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope',function($scope) {
  $scope.name = "world.";
}]);

AngularJS处理Controller提供一种作用域别名的方式,其实就是将Model直接绑定Controller的实例上。
代码如下:

<div ng-app="myApp">
  <div ng-controller="MainController as mainCtrl">
    <p>Hello {{ name }}</p>
  </div>
</div>
var app = angular.module('myApp', []);
app.controller('MainController', function() {
  this.name = "world.";
});

使用这种方式处理Controller有3个好处:

1 Controller的定义不再依赖$scope,Controller就是一个普通的函数定义,这样代码于框架无关,假设哪天不使用AngularJS框架,这里的代码可以进行复用和移植。

2 测试更友好,不需要开发者去模拟一个$scope

3 增强代码的可读性。在控制器并行和嵌套的demo中,视图上我们都使用花括号包含着name,userName等属性。如果有多个控制器并行,或者多个层级的嵌套,我们有时很难区分在视图上使用时哪个控制器下的属性,可以使用ControllerAs来避免这个问题。

6.参考内容

  1. Controller官方介绍

  2. angularjs 嵌套控制器,子控制器访问父控制器

  3. angular controller as syntax vs scope

  4. 用$scope还是用controller as

本文转自快乐八哥博客园博客,原文链接http://www.cnblogs.com/liminjun88/p/6418239.html如需转载请自行联系原作者

快乐八哥
相关文章
|
6月前
|
设计模式 存储 前端开发
MVC(模型-视图-控制器)是一种在Web应用程序开发中广泛使用的软件设计模式
【5月更文挑战第12天】MVC模式是Web应用开发中的常见设计模式,将逻辑、数据和界面分离,提升代码可维护性和重用性。模型处理数据逻辑,视图展示数据,控制器协调用户输入与模型视图交互。优点包括代码分离、易维护、可扩展和组件重用,促进高效灵活的开发。
55 2
|
3月前
|
开发框架 前端开发 JavaScript
使用Angular构建大型企业级应用的技术探索
【8月更文挑战第11天】Angular凭借其强大的组件化开发能力、模块化系统、丰富的生态系统和静态类型检查特性,成为了构建大型企业级应用的理想选择。通过设计良好的架构、使用Angular CLI、组件化开发实践、合理利用服务、性能优化以及严格测试和调试等方法,可以高效地构建出高质量、可维护、可扩展的企业级应用。未来,随着Angular技术的不断发展和完善,相信它将在企业级应用开发领域发挥更加重要的作用。
|
3月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
43 0
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
66 0
|
3月前
|
前端开发 安全 开发者
JSF文件上传,让Web应用如虎添翼!一招实现文件上传,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,文件上传是重要功能之一。JSF(JavaServer Faces)框架提供了强大的文件上传支持,简化了开发流程。本文将介绍JSF文件上传的基本步骤:创建前端表单、处理上传文件的后端Action类、将文件保存到服务器指定目录以及返回结果页面。通过示例代码,我们将展示如何利用JSF实现文件上传功能,包括使用`h:inputFile`控件和`ManagedBean`处理上传逻辑。此外,JSF文件上传还具备类型安全、解耦合和灵活性等优点,有助于提升程序的健壮性和可维护性。
38 0
|
3月前
|
开发者 Java 存储
JSF 与 CDI 携手共进,紧跟技术热点,激发开发者情感共鸣,开启高效开发新征程
【8月更文挑战第31天】JavaServer Faces (JSF) 与 Contexts and Dependency Injection (CDI) 在 Java EE 领域中紧密协作,助力开发者高效构建现代 Web 应用。JSF 凭借其丰富的组件库和页面导航功能受到青睐,而 CDI 则优雅地管理对象生命周期并实现依赖注入。两者结合,不仅简化了复杂企业应用的开发,还实现了松耦合架构,增强了代码的灵活性、可维护性和可扩展性。通过示例展示了如何利用 CDI 将业务服务对象注入 JSF Managed Bean,以及如何在不同页面间共享数据,突显了这一组合的强大功能。
39 0
|
3月前
|
前端开发 API 开发者
JSF与RESTful服务的完美邂逅:如何打造符合现代Web潮流的数据交互新体验
【8月更文挑战第31天】随着互联网技术的发展,RESTful架构风格因其实现简便与无状态特性而在Web服务构建中日益流行。本文探讨如何结合JavaServer Faces (JSF) 和 JAX-RS 构建RESTful API,展示从前端到后端分离的完整解决方案。通过定义资源类、配置 `web.xml` 文件以及使用依赖注入等步骤,演示了在JSF项目中实现RESTful服务的具体过程,为Java开发者提供了实用指南。
40 0
|
3月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
45 0
|
5月前
|
JavaScript 前端开发 开发者
Angular框架:企业级Web应用的强大后盾
Angular,谷歌支持的JavaScript框架,因其组件化架构、双向数据绑定、依赖注入和路由系统,成为企业级Web开发首选。组件化促进代码重用,如`AppComponent`示例。双向数据绑定简化DOM操作,减少手动工作。依赖注入通过示例展示易管理依赖,提升测试性。路由则支持SPA开发,平滑页面过渡。Angular的特性增强了开发效率和应用质量,使其在Web开发领域保持领先地位。【6月更文挑战第25天】
63 2
|
5月前
|
JSON 前端开发 Java
Springboot mvc开发之Rest风格及RESTful简化开发案例
Springboot mvc开发之Rest风格及RESTful简化开发案例
59 2

热门文章

最新文章

下一篇
无影云桌面