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

相关文章