微客导航 » 文章资讯 » Angular路由ui-router配置详解

Angular路由ui-router配置详解

2023-09-09 13:55:05 266

简介

angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散，好比Vue提供的组件传值一样，虽然提供给你了用法，但是开发过程中逻辑一多用着萌萌的，所以我们抛开ng-router来看ui-router。

引入ui-router

我们可以去bootCDN搜索ui-router,本地创建js文件，将代码copy进去使用，这样就可以打入本地使用了，但是要注意的是，Angular的main.js一定要在ui-router之前引用，注意一下先后顺序问题。

例如：

配置ui-router

//angular.module("moduleName",dep);定义模块依赖（两个参数）
//angular.module("moduleName");获取模块（一个参数）
varapp=angular.module("myApp",["ui-router"]);
app.config(["$stateProvider","$urlRouterProvider",function($stateProvider){
//app.config配置项
//$stateProvider状态供应商，（名字可以看出关于路由的一系列配置需要由$stateProvider完成）
//$urlRouterProvider路由重定向
$stateProvider.state("home",{
url:"/home"
template:"首页"
}).state("about",{
url:"/about"
template:"关于我们"
});
$urlRouterProvider.otherwise("home")
}])

页面配置

//相当于Vue中的插槽，单页面应用切换路由用来显示当前路由界面首页//Angular默认会转换为href 关于我们//Angular默认会转换为href

路由激活状态样式

ui-sref-active="active"

完整代码

嵌套路由页面


商品展示
点击跳转首页
跳转至关于我们
穿参数


//因为我们外面父级路由是items所以自路由用items为前缀
电脑
手机

总结

以上所述是小编给大家介绍的Angular路由ui-router配置详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Angular路由ui-router配置详解

首页

商品展示

热门推荐

随机推荐