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几个基础概念

标签：

原文地址：http://www.cnblogs.com/1000px/p/4705216.html