AngularJS几个基础概念
作用域
应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$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几个基础概念的更多相关文章
- 第214天:Angular 基础概念
		一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ... 
- 【Machine Learning】机器学习及其基础概念简介
		机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ... 
- TCP/IP基础概念及通信过程举例
		TCP/IP基础概念及通信过程举例 出现 上个世纪60年代,由于中央集中式网络的容灾性较弱,以美国国防部为中心的一家组织研究出分组交换网络.后来为了验证分组交换技术的实用性,ARPANET出现了,并且 ... 
- Jmeter基础之---jmeter基础概念
		Jmeter基础之---jmeter基础概念 JMeter 介绍: 一个非常优秀的开源的性能测试工具. 优点:你用着用着就会发现它的重多优点,当然不足点也会呈现出来. JMeter 介绍: 一个非常优 ... 
- 快速入门系列--WCF--01基础概念
		转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ... 
- 理解 angular2 基础概念和结构 ----angular2系列(二)
		前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ... 
- JavaBean 基础概念、使用实例及代码分析
		JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ... 
- RabbitMQ基础概念详细介绍
		http://blog.csdn.net/column/details/rabbitmq.html 转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多 ... 
- linux设备驱动归纳总结(二):模块的相关基础概念【转】
		本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ... 
随机推荐
- aviator使用手册在线
			Aviator是一个高性能.轻量级的 java 语言实现的表达式求值引擎, 主要用于各种表达式的动态求值.现在已经有很多开源可用的 java 表达式求值引擎,为什么还需要 Avaitor 呢? Avi ... 
- css知多少(7)——盒子模型
			1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ... 
- Gremlins.js – 模拟用户随机操作的 JS 测试库
			Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ... 
- 【初探移动前端开发03】jQuery Mobile(上)
			前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ... 
- ae_feature的插入、复制和删除
			1.插入 /// <summary> ///向featureclass中批量插入features ,批量插入features,用buffer的方法,要比循环一个个Store的方法快 /// ... 
- PPT产品的重要性
			客户需求:减轻现场工作量,不能因为上了运维管理系统以后,工作量反而增加了,因此流程需要简化,除了需要符合国家安全规定的,其余流程都简化. 项目背景:当前算是处于POC阶段,给客户的项目经理展示我们的运 ... 
- WAMP集成环境的安装
			暑假已经正式开始,我的学习计划也开始有了初步的进展,今天学习的主要内容是PHP的基础知识,以及在电脑上面安装了集成的WAMP(Windows+Apache+MySQL+PHP). PHP的基础知识: ... 
- iOS 单例模式 浅叙
			单例模式作用 可以保证在程序运行过程中,一个类只有一个实例,而且该实例易于供外界使用 从而方便地控制了实例个数,并节约系统资源 单例模式使用场合 在整个引用程序中,共享一份资源(这份资源只需要创建初始 ... 
- exec
			之前一直这样显示 不知道修改了什么,变成了这样. 在终端 找到这个podfile所在的目录 chmod 600 podfile 然后 就变回来了.可能是修改权限的问题. 
- (视频) 《快速创建网站》 2.3 WordPress初始化和功能简介
			本文是<快速创建网站>系列的第4篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ... 
