作用域

应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。作用域是视图和作用域之间的胶水。在应用将视图渲染并呈现给用户之前,视图中的模板会和作用域进行连接,然后应用会对DOM进行设置以便将属性变化通知给AngularJS。

作用域是应用状态的基础。基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在其发生变化时立刻重新渲染视图。

$rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业务逻辑并不是好主意,就像JavaScript中全局污染一样。

$scope对象就是一个普通的JavaScript对象,我们可以在其上随意修改或添加属性。

$scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样,$scope并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

作用域能做什么

提供观察者以监视数据模型的变化

可以将数据模型的变化通知给整个应用,甚至是系统外的组件

可以进行嵌套,隔离业务功能和数据

给表达式提供运算时所需的执行环境

作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头。

$scope的生命周期

当Angular关心的事件发生在浏览器中时,比如用户在通过ng-model属性监控的输入字段中输入,或者带有ng-click属性的按钮被点击时,Angular的事件循环都会启动,这个事件将在Angular执行上下文中处理。

$scope对象的生命周期处理有四个不同阶段

创建

在创建控制器或指令时,AngularJS会用$injector创建一个新的作用域,并在这个创建的控制器或指令运行时将作用域传递进去。

链接

当Angular开始运行时,所有的$scope对象都会附加或者链接到视图中。所有创建$scope对象的函数都会将自身附件到视图中。这些作用域都会注册当Angular应用上下文中发生变化时需要运行的函数。

更新

当事件循环运行时,它通常执行在顶层$scope对象上(被称作$rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化,$scope对象就会触发指定的回调函数。

销毁

当一个$scope在视图中不再需要时,这个作用域就会清理和销毁自己。

多重视图和路由

当应用越来越复杂,或者需要不止一个人加入到开发工作中来,我们需要一个合理的方式来管理用户在使用过程中看到的界面。将视图分解成布局和模板视图,并且根据用户当前访问的URL来展示对应的视图,是一个不错的选择

我们会将这些模板分解到视图中,并在布局模板内进行组装。AngularJS允许我们在$route服务的提供者$routeProvider中通过声明路由来实现这个功能。通过$routeProvider,可以发挥浏览器历史导航的优势,并让用户基于浏览器当前的URL地址创建书签或分享页面。

布局模板

要创建一个布局模板,需要修改HTML以告诉AngularJS把模板渲染到何处。通过将ng-view指令和路由组合到一起,我们可以精确地指定当前路由所对应的模板在DOM中的渲染位置。

比如,我们有一个布局模板,看起来是这个样子:

<header><h1>Header</h1></header>

<div class="content"><div ng-view></div></div>

<footer><h5>Footer</h5></footer>

这里,我们将所需渲染的内容都放到了<div class="content"></div>中。ng-view是ngRoute模板提供的一个特殊指令,相当于占位符。

ngView指令遵循以下规则:

每次触发$routeChangeSuccess事件,视图都会更新

如果某个模板同当前的路由相关联,那么:

创建一个新的作用域

移除上一个视图,同时上一个作用域也会被清除

将新的作用域同当前模板关联在一起

如果路由中有相关的定义,那么就把对应的控制器同当前作用域关联起来

触发$viewContentLoaded事件

如果提供了onload属性,调用该属性所指定的函数

路由

用when和otherwise两个方法来定义应用的路由,用config函数在特定的模块或应用中定义路由。

我们用when方法来添加一个特定的路由。这个方法可以接受两个参数(when(path,route)),第一个参数是路由路径,这个路径会与$location.path进行匹配,$location.path也就是当前URL的路径。如果路径后面还有其它内容,我们可以在URL中存储参数,参数需要以冒号开头,可以用$routeParams读取这些参数。

第二个参数是配置对象,决定了当第一个参数中的路由能够匹配时具体做些什么。配置对象中可以进行设置的属性包括controller、template、templateURL、resolve、redirectTo和reloadOnSearch。

一个复杂的路由方案会包含多个路由,以及一个可以将所有意外路径进行重定向的捕获器(otherwise)。

controller: 'MyController'

controller: function($scope) {}

如果配置对象中设置了controller属性,那么这个指定的控制器会与路由所创建的新作用域关联在一起。如果参数值是字符型,会在模块中所有注册过的控制器中查找对应的内容,然后与路由关联在一起。如果参数值是函数型,这个函数会作为模板中DOM元素的控制器与模板进行关联。

template: '<div><h2>Route</h2></div>'

AngularJS会将配置对象中的HTML模板渲染到对应的具有ng-view指令的DOM元素中。

templateUrl: 'views/template_name.html'

应用会根据templateUrl属性所指定的路径通过XHR读取视图(或者从$templateCache中读取)。如果能够找到并读取这个模板,AngularJS会将模板的内容渲染到具有ng-view指令的DOM元素中。

resolve: {

'data': ['$http', function($http) {

return $http.get("/api").then(

function success(resp) {return response.data; }

function error(reason) {return false;}

); }]; }

如果设置了resolve属性,AngularJS会将列表中的元素都注入到控制器中。如果这些依赖是promise对象,它们在控制器加载以及$routeChangeSuccess被触发之前,会被resolve并设置成一个值。

列表对象可以是:

键,键值是会被注入到控制器中的依赖的名字

工厂,既可以是一个服务的名字,也可以是一个返回值,它是会被注入到控制器中的函数或可以被resolve的promise对象。

redirectTo: '/home'

redirectTo: function(route,path,search)

如果redirectTo属性的值是一个字符串,那么路径会被替换成这个值,并根据这个目标路径触发路由变化。

如果redirectTo属性的值是一个函数,那么路径会被替换成函数的返回值,并根据这个目标路径触发路由变化。如果redirectTo属性的值是一个函数,AngularJS会在调用它时传入下面三个参数中:

从当前路径中提取出的路由参数

当前路径

当前URL中的查询串

reloadOnSearch

如果reloadOnSearch选项被设置为true(默认),当$location.search()发生变化时会重新加载路由。如果设置为false,那么当URL中的查询串部分发生变化时就不会重新加载路由。这个小技巧对路由嵌套和原地分页等需求非常有用。

$routeParams

前面提到如果我们在路由参数的前面加上:,AngularJS就会把它解析出来并传递给$routeParams,例如,如果我们设置下面这样的路由:

$routeProvider

.when('/inbox/:name',{ controller: 'InboxController', templateUrl: 'views/inbox.html'});

AngularJS会在$routeParams中添加一个名为name的键,它的值会被设置为加载进来的URL中的值。比如浏览器加载/inbox/all这个URL,那么$routeParams对象看起来是下面这个样子:

{name: 'all' }

如果需要在控制器中访问这些变量,需要将$routeParams注入进控制器

app.controller("InboxController", function($scope,$routeParams) { //在这里访问$routeParams });

$location服务

AngularJS提供了一个服务用以解析地址栏中的URL,并让你可以访问应用当前路径所对应的路由。它同样提供了修改路径和处理各种形式导航的能力。该服务对JavaScript中的window.location对象的API进行了更优雅的封装,并且和AngularJS集成在一起。

当应用需要在内部进行跳转时是使用$location服务的最佳场景,比如当用户注册后、修改或者登录后进行的跳转。

path()

replace() $location.path("/home").replace();

absUrl() 获取编码后的完整URL

hash()

host()

port()

protocol()

search() 用来获取URL中的查询串

url()

路由模式

不同的路由模式在浏览器的地址栏中会以不同的URL格式呈现。$location服务默认会使用标签模式来进行路由。如果需要显式设置路由模式为标签模式,可以在config()函数中进行,

angular.module("myApp", ["ngRoute"])

.config(["$locationProvider', function($locationProvider) { $locationProvider.html5Mode(false);}]);

如果为true,为HTML5模式,浏览器地址栏中URL看起来是这个样子: http://yoursite.com/inbox/all

AngularJS几个基础概念的更多相关文章

  1. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  2. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  3. TCP/IP基础概念及通信过程举例

    TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ...

  4. Jmeter基础之---jmeter基础概念

    Jmeter基础之---jmeter基础概念 JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. JMeter 介绍: 一个非常优 ...

  5. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  6. 理解 angular2 基础概念和结构 ----angular2系列(二)

    前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

  7. JavaBean 基础概念、使用实例及代码分析

    JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ...

  8. RabbitMQ基础概念详细介绍

    http://blog.csdn.net/column/details/rabbitmq.html 转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多 ...

  9. linux设备驱动归纳总结(二):模块的相关基础概念【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ...

随机推荐

  1. Hibernate(八)__级联操作、struts+hibernate+接口编程架构

    级联操作 所谓级联操作就是说,当你进行主对象某个操作时,从对象hibernate自动完成相应操作. 比如: Department <---->Student 对象关系,我希望当我删除一个d ...

  2. Python multi-thread 多线程 print 如何避免print的结果混乱

    multithread如何写 这是我第一次写multithread,所以就是照着例子学,下面是我用来学的例子 来自于”Automate the boring stuff with Python”的15 ...

  3. bootstrap源码分析之form、navbar

    一.表单(Form) 源码文件:_form.scssmixins/_form.scss 1.按层次结构分:form-group -> form-control/input-group/form- ...

  4. arcmap Command

    The information in this document is useful if you are trying to programmatically find a built-in com ...

  5. 一次简单的分析手机APK病毒木马

    写个笔记记录一下,起因是朋友在QQ上发了个连接叫我看看 安不安全,叫我帮他看看,反正在店里待着也没生意,那就顺便看看咯. 打开这个网址  会自动弹出下载一个名为OOXX的APK安装包. 起先我的思路是 ...

  6. SharePoint 2013 REST 服务使用简介

    1.创建测试使用列表”REST Demo”,插入一些测试数据,如下图: 2.添加内容编辑器,并且添加脚本引用以及HTML代码,如下图: Result的Div为显示结果使用,input标签触发REST服 ...

  7. Ioc容器Autofac系列(1)-- 初窥

     一.前言 第一次接触Autofac是因为CMS系统--Orchard,后来在一个开源爬虫系统--NCrawler中也碰到过,随着深入了解,我越发觉得Ioc容器是Web开发中必不可少的利器.那么,Io ...

  8. Microsoft Azure 的负载平衡器的Session Sticky

    Microsoft Azure 的负载平衡器是一种 Layer-4负载平衡器.Microsoft Azure 负载平衡器通过针对给定输入端点上接收到的流量计算哈希函数,在一组可用的服务器(虚拟机)之间 ...

  9. APP远程调试及网络自动化测试

    一:优测 腾讯旗下的测试服务 http://utest.qq.com/ 二:云测 http://www.testin.cn/ 三:testbird 1.进入这个网站,注册并且登录 https://dt ...

  10. 浅谈JSON数据解析方法

    JSON数据解析 JSON是什么?? 如何把JSON数据解析出来 如何把一个字典转换为JSON JSON详细介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交 ...