前端ABC标签：
作用域
应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。$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
Footer
这里，我们将所需渲染的内容都放到了
中。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: ‘
Route
‘
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
欢迎分享本文，转载请保留出处：前端ABC » angular.js的几个基本概念