菜单

路由的简单介绍_AngularJS_脚本之家澳门太阳娱乐手机登录

2020年3月19日 - 澳门太阳娱乐手机登录

事情发生此前有写过一篇有关Angular自带的路由:ngRoute。后日来讲说Angular的第三方路由:ui-router。那么有人就能够问:为啥Angular有了自带的路由,大家还须求用ui-router呢?这里老妪能解的注脚下ngRoute和ui-router的区分吧,其实也没非常大的分化,首要的正是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可决定的,可调换的区域)。

比方说大家点击了三个link,大家须求在视图中跳转到钦点的一个页面,那么ngRoute已经满意了大家的急需,而当大家点击的时候,必要在分级在不一样的地点跳转八个差别的页面包车型地铁时候,ngRoute就远远不够用了,大家就需求用到ui-router。这里我们依旧先来学学下ui-router

ui-router

路由的简单介绍_AngularJS_脚本之家澳门太阳娱乐手机登录。$urlRouterProvider

$urlRouterProvider负担监听$location.当$location变化的时候,$urlRouterProvider起首在一个规行矩步的列表中一个个的寻找,直到找到相称的值。$urlRouterProvider用于在后端钦点url的情况配置。全数的url被编写翻译成UrlMatcher对象。

依赖: $urlMatcherFactoryProvider $locationProvider

deferIntercept;

剥夺延迟location变化的阻拦。如果您想定制与UCR-VL同步的行事(举个例子,你必要保持目前的U普拉多L去何况推迟八个变通),那么在配备的时候使用这么些主意。

defer:boolean,显明是明确命令制止依旧启用该拦截。

 angular.module .config(["$urlRouterProvider",function(){ $urlRouterProvider.deferIntercept; // defer = true/false }])

 this.deferIntercept = function  { if  defer = true; interceptDeferred = defer; // 默认是true };

otherwise;

概念叁个当呼吁的路子是于事无补路径时跳转的门道。

rule:你想重定向的url路线或一个回来的网址路径的平整函数。函数字传送入五个参数:$injector和$location服务,并且必得再次回到一个string的url。

 angular.module .config(["$urlRouterProvider",function(){ $urlRouterProvider.otherwise; // rule = 重定向的url规则 }])

rule;

概念使用$urlRouterProvider 来合作钦定的U途达L的法则。

rule:将$injector和$location作为arguments传入的管理函数。用来回到三个string类型的url路线。

 angular.module .config(["$urlRouterProvider",function{ $urlRouterProvider.rule(function  { var path = $location.path(), normalized = path.toLowerCase(); if  { return normalized; } }); }])

when;

为给定的UHighlanderL相称注册二个处理程序。

what:需求重定向的传布路线。

handler:你想要重定向的路径/管理程序。

 angular.module('Demo', ['ui.router']); .config(["$urlRouterProvider",function  { $urlRouterProvider.when($state.url, function  { if ($state.$current.navigable !== state || !equalForKeys { $state.transitionTo; } }); }]);

依赖:$location $rootScope $injector $browser

方法:href(urlMacther,params,options);

二个生成UTucsonL的点子,为给定的UrlMatcher再次回到编写翻译后的U魅影L,况兼用提供的参数填充。

urlMacther:用于充任生成U福特ExplorerL的模版的UrlMacther对象。
params:叁个参数值的对象用来增加补充所需的协作参数。
options:option对象,absolute-boolean,即便为true,将会变卦一个纯属地址。

 $bob = $urlRouter.href(new UrlMatcher, { person: "bob" }); // $bob == "/about/bob"; sync;触发更新:发生在地址栏URL变化时执行相同的更新。$state$state服务负责代表状态及提供状态之间的转换。它还提供你当前的状态及上一个状态。依赖:$rootScope $q $view $injector $resolve $stateParams $urlRouter方法:get;返回任何指定的状态或所有状态的配置对象。 stateOrName:如果提供此参数,返回的是指定状态的配置对象;如果不提供此参数,则返回全部状态的配置对象。 context:当context是一个相对的参考状态,状态会在相关上下文中检索。go; to:string,即将跳转的状态。 params:object,跳转所带的参数。 options:object,可选配置对象。有 location(是否更新地址栏的url,或以什么字符串替换url),inherit,relative(当变化相对路径:如"^,定义的状态是相对的),notify(是否广播$stateChangeStart和$stateChangeSuccess事件),reload。$state.go;

href(stateOeName,params,options);

八个U帕JeroL生成方法,重返为给定的景观填充内定的参数编写翻译后的链接。

stateOeName:string,你想要生成的url的景况恐怕状态对象。
params:object,三个用以填充状态需求的参数的靶子。
options:可选配置对象。有lossy(当第贰个参数url未被提供时是或不是连续导航的url实行构建href卡塔尔(قطر‎,inherit,relative(当变化相对路线:如”^,定义的动静是绝没有错卡塔尔国,absolute。

$state.href("about.person", { person: "bob" })

include(stateOrName,params,options);

八个规定当前有效的景况是或不是与stateOrName平级的依然其子状态。

stateOeName:string,部分名称,相对名称,或然经过当前状态进行全局情势寻觅。
params:object,三个参数对象。 options:可选配置对象。有relative。

Item

 $state.$current.name = 'contacts.details.item'; $state.includes; // true $state.includes; // true $state.includes("contacts.details.item"); // true $state.includes; // false $state.includes; // false

 $state.$current.name = 'contacts.details.item.url'; $state.includes; // true $state.includes; // true $state.includes; // true $state.includes; // true $state.includes; // true $state.includes; // false $state.includes; // false

is(stateOrName,params,options);

与$state.include相仿,只是那一个针对的是真名。参数性质同上。

Item

 $state.$current.name = 'contacts.details.item'; $state.is('contact.details.item'); // true $state.is(contactDetailItemStateObject); // true

reload;

再一次载入当前情况的办法。

state:二个动静名称可能状态对象。

$state.reload;

transitionTo;

对接到二个新图景的艺术。

to:状态名称。 toParams:将会发送到下贰个状态的参数。
options:可选参数。有location,inherit,relative,notify,reload。

 $state.transitionTo($state.current, $stateParams, { reload: true, inherit: false, notify: true });

事件:1 、$stateChangeError

路由状态变化产生错误时接触的事件。参数有:event,toState,toParams,fromState,fromParams,error。以上依照字面意思就能够精晓,哈哈。

2、$stateChangeStart

路由状态变化发生前触发的事件。参数有:event,toState,toParams,fromState,fromParams。

3、$stateChangeSuccess

路由状态变化精确时接触的风云。参数有:event,toState,toParams,fromState,fromParams。

4、$stateNotFound

路由状态没找到的时候接触的事件。参数有:event,unfoundState,fromState,fromParams。

$stateProvider

拍卖路由状态的服务,路由的情形反映了该项在应用程序中的地点,描述了在当前境况下UI是应宛怎样的,而且该做什么样。

依赖:$urlRouterProvider $urlMatcherFactoryProvider

decorator;

透过中间的$stateProvider以恢宏恐怕重写状态生成器。可用以加多ui-router的自定义功能,例如,基于状态名称推断templateUrl。

提个醒:因为生成器的函数实践顺序的不明显,decorator不应有相互注重。

name:须求改良的生成函数名称。 func:负担修正生成器函数的函数。

 $stateProvider.decorator('views', function  { var result = {}, views = parent; angular.forEach(views, function  { var autoName = (state.name + '.' + name).replace; config.templateUrl = config.templateUrl || '/partials/' + autoName + '.html'; result[name] = config; }); return result; }); $stateProvider.state('home', { views: { 'contact.list': { controller: 'ListController' }, 'contact.item': { controller: 'ItemController' } } }); $state.go;

上述代码修饰了“views”间接通过state的名称绑定完对应的页面模板。

state;

登记一个动静,并给定其布局。

name:状态的名称。 stateConfig:状态配置对象。配置具备以下各式质量:
template:
string/function,html模板字符串,只怕多个回去html模板字符串的函数。
templateUrl:string/function,模板路线的字符串,或许再次来到模板路线字符串的函数。
templateProvider:function,再次回到html模板字符串或模板路线的劳务。
controller:string/function,新登记二个调控器函数大概三个已注册的控制器的名目字符串。
controllerProvider:function,重临调控器恐怕调整器名称的劳务
controllerAs:string,调控器外号。
parent:string/object,手动钦赐该处境的父级。
resolve:object,将会被注入controller去实施的函数,形式。
url:string,当前情景的呼应url。 views:object,视图呈现的安排。方式。
abstract:boolean,多个千古不会被激活的架空的景况,但能够给其子级提供特色的继续。暗中认可是true。
onEnter:function,当步入一个情况后的回调函数。
onExit:function,当退出三个景况后的回调函数。
reloadOnSearch:boolean,若是为false,那么当一个search/query参数改造时不会触发雷同的情状,用于当您改改$location.search(卡塔尔国的时候不想重新加载页面。默以为true。
data:object,跋扈对象数据,用于自定义配置。世袭父级状态的data属性。换句话说,通过原型世袭能够高达丰裕一个data数据进而整个树布局都能博取到。
params:url里的参数值,通过它能够兑现页面间的参数字传送递。

ui-sref

一种将链接绑定到三个处境的指令。点击该链接将触发三个足以包罗可选参数的动静调换。

 首页  你的主页 

   app test    this is page 1 for app.   this is page 1 for test.  

 angular.module('Demo', ['ui.router']) .config(["$stateProvider","$urlRouterProvider",routeConfig]) .controller("testCtrl", angular.noop) function routeConfig($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise; $stateProvider .state("app",{ url:"/app", templateUrl:"'page1.html'" }) .state("test",{ url:"/test", templateUrl:"'page3.html'" }) }

   app test    <div ui-view="nav@"></div> <div ui-view></div>   <ol> <li><a ui-sref="app.page1">app.page1</a></li> <li><a ui-sref="app.page2">app.page2</a></li </ol>   <ol> <li><a ui-sref="test.page1">test.page1</a></li> <li><a ui-sref="test.page2">test.page2</a></li </ol>   this is page 1 for app.   this is page 2 for app.   this is page 1 for test.   this is page 2 for test.  

 angular.module('Demo', ['ui.router']) .config(["$stateProvider","$urlRouterProvider",routeConfig]) .controller("testCtrl", angular.noop) function routeConfig($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise; $stateProvider .state("app",{ url:"/app", views:{ "":{ templateUrl:"'layout.html'" }, "nav":{ templateUrl:"'nav1.html'" } } }) .state("app.page1",{ url:"/page1", templateUrl:"'page1.html'" }) .state("app.page2",{ url:"/page2", templateUrl:"'page2.html'" }) .state("test",{ url:"/test", views:{ "":{ templateUrl:"'layout.html'" }, "nav":{ templateUrl:"'nav2.html'" } } }) .state("test.page1",{ url:"/page1?:id", templateUrl:"'page3.html'", controller:["$stateParams",function{ console.log;// 1 这里实现传参 }], params:{ id:null } }) .state("test.page2",{ url:"/page2", templateUrl:"'page4.html'" }) }

瞩目:需求引进angular-ui-router[.min].js

此处本兽未有也不会把一切用法写一回 -。-
写多个轻巧的案例仅供就学参考。这里偷个懒,把代码都写在一个页面上做到了…
究竟花了七个早晨的闲暇时间用来整理内容和写demo
寻思到第二天要上班,都以不择手腕的早睡,所以收拾素材拖的久了些。

如上正是本文的全体内容,希望对咱们的读书抱有助于,也愿意大家多都赐教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图