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

相关文章