Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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>
@H_502_113@
(function () {
    'use Strict';
    angular.@H_786_125@module("myApp", [])
        .controller('MainController', ['$scope', function ($scopE) {
            $scope.username="leeli";
            $scope.age=28;
        }]);
})();
@H_502_113@

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>
@H_502_113@
var app = angular.@H_786_125@module('myApp', []);
app.controller('MainController',function($scopE) {
  $scope.name = "world.";
}]);
@H_502_113@

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

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

使用这种方式处理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 

本图文内容来源于网友网络收集整理提供,作为学习参使用,版权属于原作者。

猜你在找的Angularjs相关文章

angular.js实现数据双向通信的原理angular的核心特性有:MVVM、模块化、依赖注入、自动化双向数据绑定、语义标签等。1、AngularJS的scopes对象AngularJS的scopes对象,是一般的javascript对象,可以在他们上面绑定属性和其他对象,也可以添加一些功能,用于观察数据结构上的变化。观察功能都由dirty-checking来实现,并且都在一个digest循环中...
AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。AngularJS 扩展了 HTMLAngu
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有前缀ng-。ng-app指令初始化一个 AngularJS 应
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expression }}。AngularJS 表达式把数据绑定到 HT
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上的 JSON 文件:{ &quot;records&quot;: [ { &q
AngularJS 控制器控制AngularJS 应用程序的数据。AngularJS 控制器是常规的JavaScript 对象。AngularJS 控制器AngularJS 应用程序被控制器控制。ng
keyup适用于文本框的数据输入和同步,以及数据的获取;keydown 与 keypress更适用于通过键盘控制页面功能的实现(如回车事件)
angularJs模板缓存的清除,包括传统的 HTML标签设置清除缓存,以及angularJs的一些配置清除,和angularJs的路由切换操作清除
@H_838_674@

大佬总结

以上是大佬教程为你收集整理的Angular企业级开发(7)-MVC之控制器全部内容,希望文章能够帮你解决Angular企业级开发(7)-MVC之控制器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。