angular的mvc模式($scope)

最新推荐文章于 2022-04-28 21:29:12 发布
最新推荐文章于 2022-04-28 21:29:12 发布
阅读量292 收藏
点赞数
分类专栏： angularJS

例1

html

<div ng-controller="GreetCtrl">
Hello {{name}}!
</div>
<div ng-controller="ListCtrl">
<ol>
<li ng-repeat="name in names"><!-- 迭代数组 -->
{{name}} from {{department}}
</li>
</ol>
</div>

js

function GreetCtrl($scope, $rootScope) {//rootScope根作用域
$scope.name = 'World';
$rootScope.department = 'Angular';
}


function ListCtrl($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}



例2

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Scope1.css" />
</head>
<body>
<div ng-controller="EventController">
Root scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="EventController">
<button ng-click="$emit('MyEvent')"><!-- 向根方向传播 -->
$emit('MyEvent')
</button>
<button ng-click="$broadcast('MyEvent')"><!-- 向叶方向传播 -->
$broadcast('MyEvent')
</button>
<br>
Middle scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="item in [1, 2]" ng-controller="EventController">
Leaf scope
<tt>MyEvent</tt> count: {{count}}
</li>
</ul>
</li>
</ul>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="Scope2.js"></script>
</html>


function EventController($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function() {
$scope.count++;
});
}



AngularJS的MVC是借助$scope来实现的！！！

$scope是一个POJO

$scope提供了一些工具方法$watch()/$apply()

$scope是表达式的执行环境（作用域）

$scope是一个树形结构，与DOM标签平行

子$scope对象会继承父$scope上的属性和方法

每一个AngularJS应用只有一个根$scope对象，位于ng-app上

$scope可以传播事件，类似于DOM事件，可向上也可向下

$scope不仅是mvc的基础，也是实现双向数据绑定的基础 

可用angular.element($0).scope()可获得当前元素上的scope来进行调试

sanlingwu
关注
专栏目录
Angular 作用域 scope
YYece的博客
10-25 745
什么是作用域 作用域是一个存储应用数据模型的对象，对应于MVC中的M（model）层 作用域的层级结构对应于DOM Tree 结构 为表达式提供了一个执行上下文（context），作用域可以监听表达式的变化并传播事件 ...
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
11-24
在Java的Controller中，添加`@RequestBody`注解，告诉Spring MVC期望接收到一个JSON对象： ```java @Controller public class UserController { @ResponseBody @RequestMapping(value = "/loginForm", method...
Angular企业级开发(3)-Angular MVC实现
weixin_34235457的博客
11-16 155
1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构。MVC模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式通过对复杂度的简化，使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。专业人员可以通过自身的专长分组： ...
angularjs的MVC模式
chenqk_123的专栏
08-09 1375
1.angularjs的MVC模式     做过前后端交互的童鞋们，应该对MVC的理解都比较清晰了。如果纯前端的可能不太理解。楼主本是JAVA出身，大家都知道JAVA几乎是纯服务端的应用，当然随着技术的进步，每一种编程语言都不可能是纯后端服务端的，多多少少会有跟前端交互的技术比如JAVA中的 struts2的jsp标签。但这种东西毕竟不是纯前端的技术，很有可能在使用一些前端技术的时候会出现莫名的
angular之MVC编程模式
qq_39579242的博客
09-04 297
MVC是一种使用MVC（model view controller 模型-视图-控制器）设计创建web应用程序的模式 Model （模型）表示应用程序核心（比如数据库记录列表）。 View（视图）显示数据（数据库记录）。 Controller（控制器）处理输入（写入数据库记录）。 MVC模式同时提供了对HTML css JavaScript的完全控制。 Model是应用程序中用于处理应用...
带你初识Angular中MVC模型
weixin_33919950的博客
06-26 131
简介 MVC是一种使用 MVC（Model View Controller 模型-视图-控制器）设计模式，该模型的理念也被许多框架所吸纳，比如，后端框架(Struts、Spring MVC等)、前端框架(Angular、Backbone等)。在学习angular的过程中，我在网上查找关于angular MVC介绍的文章很少，有些文章也没有很直白地为初学者指明angular MVC到底是啥样貌，因...
【前端MVC】如何理解angular的MVC模式
liu888663的博客
04-28 940
理解MVC模式  近年来，MVC模式也被视为一种方式，来管理日益丰富而复杂的客户端Web开发，Angular就是在这种环境中诞生的。  应用MVC模式的关键是实现关注点分离的关键前提，即应用程序中的数据模型与业务模型和表现逻辑分离。在客户端Web开发中，这意味着分离数据、操作该数据的逻辑以及用于显示数据的HTML元素。结果是客户端应用程序更容易开发、维护和测试。  三个主要构建模块是模型、控制器和视图。下图显示了MVC模式在应用于服务器端开发时的传统阐述。模型一般是从数据库中获得的，而应用程序的目标是为来自
深入解析AngularJS框架中$scope的作用与生命周期
01-19
$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时...
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
11-28
在AngularJS中，$injector、$rootScope和$scope是核心组件，它们对于理解和使用这个强大的MVC框架至关重要。下面将详细解析这三个概念及其关联关系。 首先，$injector是AngularJS中的依赖注入（Dependency ...
Angular企业级开发——MVC之控制器详解
12-09
1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的REST服务中，就可以开发轻量级AngularJS应用。 涉及到多...
spring mvc 设置@Scope("prototype")
zhang_dianliang的专栏
08-07 2万+
spring中bean的scope属性，有如下5种类型： singleton 表示在spring容器中的单例，通过spring容器获得该bean时总是返回唯一的实例prototype表示每次获得bean都会生成一个新的对象request表示在一次http请求内有效（只适用于web应用）session表示在一个用户会话内有效（只适用于web应用）globalSession表示在全局会话内有效（
AngularJS 学习笔记（2）-MVC,$scope,$watch
我们始终是路人
09-04 415
模块（Module）AngularJS很重要的一个特性就是实现模块化编程，我们可以通过以下方式创建一个模块，对页面进行功能业务上的划分// 创建一个名字叫MyApp的模块，第二个参数指的是该模块依赖那些模块 var myApp = angular.module("MyApp", []);也可以将重复使用的指令或过滤器之类的做成模块便于复用 注意必须指定第二个参数，否则变成找到已经定义的模块视图（V
AngularJS—理解AngularMVC模式【转】
weixin_30566111的博客
09-26 104
MVC指的是 Model View Controller 模型-视图-控制器设计模式，下面通过一个简单例子来理解Angular MVC模式。 MVC指的是 Model View Controller 模型-视图-控制器设计模式，在前端中，我们可以简单的理解为： V-View，视图层，一般是我们的html文件层，用于展示数据内容。 C-Controller，控制器，控制器帮助将M层数据给V,或...
Note03--MVC && scope
David's Notes
01-23 279
为什么需要MVC？ a. 代码规模越来越大，切分职责是大势所趋； b. 为了复用：很多逻辑都是一样的； c. 为了后期维护方便：修改一块功能不影响其他功能； d. MVC只是手段，终极目标是模块化和复用！！！ AngularJS的MVC是借助于$scope实现的！！！ Controller实现方式 a. 方式一无法适应大型应用 b. 方式二无法实现复用 c. 方式三
1、AngularJs的简介和MVC模式
Learning
06-11 1384
1、什么是AngularJs      • 基于javascript开发的客户端应用框架，使我们可以更加快捷，简单的开发web应用。      • 诞生于2009年，后来被google收购，用在了很多项目中。      • 适用于CRUD应用或者SPA单页面网站的开发。 2、AngularJs的相关资料      2.1 相关资源的获取        • http://
angular中mvvm模式
饮冰十年的博客
11-07 1506
1、什么是MVVM模式： MVVM模式是Model-View-ViewMode模式的简称。 由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成， 通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。 2.各层的职责： model应用于封装程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据的直接访
在MVC模式中怎样使用scope是session的bean
qq_42277402的博客
05-31 353
MVC是一种通过三个不同部分构造一个软件或组件的理想办法： 1.模型（Model） =JavaBean 用于存储数据或实现业务逻辑的对象。 2. 视图（View） =JSP 向控制器提交所须数据、显示模型中的数据。 3.控制器（Controller） =Servlet 负责具体的业务逻辑操作，即控制器根据视图提出的要求对数据做出（商业）处理，并将有关结果存储到模型中，并负责让模型和视图进行必要的交互，当模型中的数据变化时，让视图更新显示。 编写HandleArea.jsp、web.xml、Area.ja
Angular.js基本概念和用法--（一MVC1）
曩昔方的博客
03-25 213
本专栏的所有博客都是在学习慕课网大漠穷秋的AngularJS实战的笔记，链接https://www.imooc.com/learn/156一、为什么需要MVC1.代码规模越来越大，切分职责是大势所趋；2.为了复用：很多代码的逻辑是一样的；3.为了后期维护方便：修改一块功能不影响其他功能。MVC只是手段，终极目标是模块和复用二、AngularJS中的Controller（控制器）我们先来看一个小例子...
@Scope("prototype")
热门推荐
A点点圈圈A的博客
03-27 3万+
@Scope("prototype") spring中bean的scope属性，有如下5种类型： singleton 表示在spring容器中的单例，通过spring容器获得该bean时总是返回唯一的实例prototype表示每次获得bean都会生成一个新的对象request表示在一次http请求内有效（只适用于web应用）session表示在一...
深入理解AngularJS：$scope在MVC架构中的关键角色
在AngularJS中，Model-View-Controller (MVC) 模式是架构应用程序的一种核心概念，它将复杂的数据处理逻辑与用户界面分离，提高代码的可维护性和可扩展性。MVC的核心在于"$scope"对象，它是AngularJS应用程序的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值