最后
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验,干货满满呀!如果你能够一直坚持看到这儿,那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动,或者直接进入你的收藏夹里吃灰,那么我写这篇文章就没多大意义了。所以看完之后,还是多多行动起来吧!
可以非常负责地说,如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话,那么你就至少已经达到了中级开发工程师以上的水平,进入大厂技术这块是基本没有什么问题的了。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
$stateProvider
.state(‘inbox’, {
url: ‘/inbox’,
template: ‘
Welcome to your inbox
’});
当用户浏览到/inbox时,该应用将状态改为inbox同时向主ui-view元素中插入模板中的内容('Welcome to your inbox')。URL参数有多个选项,因此它非常强大。开发者可以像设置ngRoute一样设置最基本的参数:
$stateProvider
.state(‘inbox’, {
url: ‘/inbox/:inboxId’,
template: ‘
Welcome to your inbox
’,controller: function( s c o p e , scope, scope, stateParams) {
s c o p e . i n b o x I d = scope.inboxId = scope.inboxId = stateParams.inboxId;
}
});
现在将:inboxId作为URL的第二个部分,例如:访问/inbox/1,那么$stateParams.inboxId就为1($stateParams为{inboxId:1})。同时也可使用不同的语法:url: '/inbox/{inboxId}'
路径必须匹配URL,与ngRoute不同的是,当用户访问到/inbox/时,上面的的路径会被激活,然而当访问到/inbox时不会被激活。路径同时也使开发者可以使用正则表达式来匹配,例如:
// 限定id为6位16进制数字
url: ‘/inbox/{inboxId:[0-9a-fA-F]{6}}’,
// 或者
// 匹配任何在 /inbox
后面的url(慎用)并匹配值到indexId
url: ‘/inbox/{inboxId:.*}’
注意,在路由中目前还无法使用路由组,路由数据预载入器无法预载入。
在路径里可以指定查询参数:
// /inbox?sort=ascending 将会被匹配
url: ‘/inbox?sort’
### 七、嵌套路由
使用url参数可以实现嵌套的路由,有了嵌套路由便可在同一个模板同一个路由实现多层次的ui-view,例如在/inbox中嵌入更多路由:
$stateProvider
.state(‘inbox’, {
url: ‘/inbox/:inboxId’,
template: '
Welcome to your inbox
\Show priority\
\',
controller: function( s c o p e , scope, scope, stateParams) {
s c o p e . i n b o x I d = scope.inboxId = scope.inboxId = stateParams.inboxId;
}
})
.state(‘inbox.priority’, {
url: ‘/priority’,
template: ‘
Your priority inbox
’});
第一个路由是传统的,注意第二个,它是/inbox下的一个子路由:state( . )语法指定了它使子路由。/inbox/1将匹配第一个路由,而/index/1/priority会匹配第二个路由。使用这种语法,在父视图中的ui-view元素将会由第二个路由控制。
### 八、Params 路由参数
params选项是一个包含路径中的参数和正则表达式匹配结果的数组。该选项不能和url选项混用!当某状态被激活时,应用将这个数组赋值给$stateParams服务。
### 九、Views 视图
开发者可以在一个状态中设置多个有名称的视图。该功能在ui-router中很强大,开发者可以在同一个模板中改变和切换不同的视图。
<如果设置了视图选项,则该状态的‘template’,‘templateUrl’及‘templateProvider’将被忽略。如果想在路由里包含父级模板,就需要创建一个包含模板的抽象模板。
例如有这样的视图:
接下来就可以创建将被分别被插入到上述ui-view的有命名的视图了,每个子视图可以包含自己的模板、控制器和预载入数据。
$stateProvider
.state('inbox', {
views: {
'filters': {
template: '<h4>Filter inbox</h4>',
controller: function($scope) {}
},
'mailbox': {
templateUrl: 'partials/mailbox.html'
},
'priority': {
template: '<h4>Priority inbox</h4>',
resolve: {
facebook: function() {
return FB.messages();
}
}
}
}
});
十、abstract 抽象模板
抽象模板不能被激活,但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板,或者它可以传递作用域变量$scope给子模板。使用它可以在同一个url下传递自定义数据或者预载入的依赖。除了需要添加abstract属性外,其他设置和设定一个常规状态是相同的:
$stateProvider
.state('admin', {
abstract: true,
url: '/admin',
template: '<div ui-view></div>'
})
.state('admin.index', {
url: '/index',
template: '<h3>Admin index</h3>'
})
.state('admin.users', {
url: '/users',
template: '<ul>...</ul>'
});
十一、onEnter,onExit 回调函数
当应用进入或者离开当前状态的视图时会调用这两个函数。这两个函数可以访问预载入的数据。这两个回调函数使开发者可以根据状态改变来采取某些动作,例如在用户要离开时可以弹出对话框‘你确定吗?’以及防止意外操作等。
十二、Data 数据
自定义数据也可以被附加到状态控制对象state configObject.该数据和预载入数据resolve属性相似,但是该数据不会被注入到控制器中,promise也不会被预载入,它的用途是从父状态传递数据到子状态。
十三、事件
和ngRoute相同的是,angular-route服务会在不同的状态生命周期lifecycle里启动某些事件events。监听 s c o p e 对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在 scope对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在 scope对象便可以捕获这些事件然后采取不同的响应或者操作。如下的事件将会在rootScope上触发,因此在任何$scope对象上都可以监听到这些事件。
13.1 状态改变事件
$scope.$on('$stateChangeStart',
function(evt, toState, toParams, fromState, fromParams), {
// 如果需要阻止事件的完成
evt.preventDefault();
});
可以触发的事件包括:
stateChangeStart
当状态改变开始的时候被触发
$stateChangeSuccess
当状态改变成功后被触发
$stateChangeError
当状态改变遇到错误时被触发,错误通常是目标无法载入,需要预载入的数据无法被载入等。
13.2 视图载入事件
视图载入阶段ui-router也提供了一些事件
$viewContentLoading
当视图正在被载入且在DOM被渲染之前触发。
s c o p e . scope. scope.on(‘$viewContentLoading’,
function(event, viewConfig){
// 获取任何视图设置的参数,以及一个特殊的属性:viewConfig.targetView
});
$viewContentLoaded
当视图被载入且DOM已经渲染完成后被触发。
$stateParams 状态参数
在上面提及使用$stateparams来提取在url中的不同参数。该服务的作用是处理url的不同部分。例如,当上述的inbox状态是这样时:
url: ‘/inbox/:inboxId/messages/{sorted}?from&to’
//当用户访问者链接时:
‘/inbox/123/messages/ascending?from=10&to=20’
$stateParams对象的值为:
{inboxId: ‘123’, sorted: ‘ascending’, from: 10, to: 20}
$urlRouterProvider
和ngRoute一样,开发者可以在该对象上设定特定的URL被激活时做什么的规则。由于设定好的状态在特定的url被访问是会自动激活,所以 u r l R o u t e r P r o v i d e r 没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域 s c o p e 时它会非常有用,例如在重定向或者安全验证的时候。在模块的设置函数里便可使用 urlRouterProvider没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域scope时它会非常有用,例如在重定向或者安全验证的时候。在模块的设置函数里便可使用 urlRouterProvider没有必要用来管理激活和载入状态。但当需要管理哪些被发生在当前状态之外的作用域scope时它会非常有用,例如在重定向或者安全验证的时候。在模块的设置函数里便可使用urlRouterProvider。
when()
该函数需要两个参数:1.当前的路径,2.需要重定向到的路径(或者是需要在路径被访问是运行的函数)。设置重定向前需要为$urlRouterProvider设置when函数来接受一个字符串。例如,当希望重定向一个空的路由到/inbox:
.config(function($urlRouterProvider) {
$urlRouterProvider.when('', '/inbox');
});
如果传递的是函数,在路径被匹配时该函数会被执行,处理器返回如下3个值中的一个: - falsy,该回应告诉 u r l R o u t e r 没有匹配到当前 u r l 规则,应该尝试匹配新的路径,这样能保证用户访问了正常的路径。 − 字符串, urlRouter没有匹配到当前url规则,应该尝试匹配新的路径,这样能保证用户访问了正常的路径。 - 字符串, urlRouter没有匹配到当前url规则,应该尝试匹配新的路径,这样能保证用户访问了正常的路径。 − 字符串,urlRouter将该字符串当做重定向的路径。 - TRUE 或者 undefined,该回应告诉$urlRouter,url已被处理
13.3 otherwise()
和ngRoute的otherwise()函数相似,在用户提交的路径没有被定义的时候它将重定向到指定的页面。这是个创建’默认‘路径的好方法。 otherwise()只接受一个参数,要么函数要么字符串,字符串必须为合法的url路由地址,函数则会在没有任何路径被匹配的时候被运行。
.config(function($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
// or
$urlRouterProvider.otherwise(
function($injector, $location) {
$location.path('/');
});
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
**给大家分享一些关于HTML的面试题。**
![](https://img-blog.csdnimg.cn/img_convert/e6051860183b45e88873dbc4b9992b5d.webp?x-oss-process=image/format,png)
![](https://img-blog.csdnimg.cn/img_convert/2ff78a3e9ac1aa8f4298e31ce526b35e.webp?x-oss-process=image/format,png)
{
$urlRouterProvider.otherwise('/');
// or
$urlRouterProvider.otherwise(
function($injector, $location) {
$location.path('/');
});
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
**给大家分享一些关于HTML的面试题。**
[外链图片转存中...(img-puwCMC6S-1715772424983)]
[外链图片转存中...(img-rs7ltBWi-1715772424984)]