Angular路由ui-router配置详解
简介
angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散，好比Vue提供的组件传值一样，虽然提供给你了用法，但是开发过程中逻辑一多用着萌萌的，所以我们抛开ng-router来看ui-router。
引入ui-router
我们可以去bootCDN搜索ui-router,本地创建js文件，将代码copy进去使用，这样就可以打入本地使用了，但是要注意的是，Angular的main.js一定要在ui-router之前引用，注意一下先后顺序问题。
例如：
<script src="angular.main.js"></script> <script src="angular-ui-router.js"></script>
配置ui-router
//angular.module("moduleName",dep); 定义模块依赖（两个参数）
//angular.module("moduleName"); 获取模块 （一个参数）
var app = angular.module("myApp",["ui-router"]);
app.config(["$stateProvider","$urlRouterProvider",function($stateProvider){
//app.config配置项
//$stateProvider 状态供应商，（名字可以看出关于路由的一系列配置需要由$stateProvider完成）
//$urlRouterProvider 路由重定向
$stateProvider.state("home",{
url: "/home"
template: "<h1>首页</h1>"
}) .state("about",{
url: "/about"
template: "关于我们"
});
$urlRouterProvider.otherwise("home")
}])
页面配置
<div ui-view></div> //相当于Vue中的插槽，单页面应用切换路由用来显示当前路由界面 <a ui-sref="home">首页</a> //Angular默认会转换为href <a ui-sref="about">关于我们</a> //Angular默认会转换为href
路由激活状态样式
ui-sref-active="active"
完整代码
<html ng-app="myApp">
<head>
<style>
.active{
color: red
}
</style>
<script src="angular.main.js"></script>
<script src="angular-ui-router.js"></script>
</head>
<body>
<div ui-view></div>
<footer>
<a ui-sref="home" ui-sref-active="active">首页</a>
<a ui-sref="about" ui-sref-active="active">关于</a>
<a ui-sref="items">商品</a>
</footer>
</body>
<script>
var app = angular.module("myApp", [ui-router]); app.config(["$stateProvider","$urlRouterProvider",function($stateProvider){
$stateProvider.state("home",{
url: "/home"
template: "首页"
}) .state("about",{
url: "/about"
template: "关于我们"
}).state("items",{//牛逼的潜逃路由
url: "/items",
templateUrl: "./items.html",
controller:["$scope",$state,function($scope,$state){
$scope.jump = function(){
$state.go("home");
}
$scope.jumpOther = function() {
$state.go("items.phone",{
id: "phone"
});
}
}]
}).state("items.comp",{
url: "/comp",
template: "<h1>电脑商品</h1>"
}).state("item.phone",{
url:"phone/:id",
template:"<h1>手机商品</h1>",
controller:["$scope","$stateParams",function($scope,$stateParams){
console.log($stateParams);
}]
});
$urlRouterProvider.otherwise("home")
}
</script>
</html>
嵌套路由页面
<div>
<h1>商品展示</h1>
<button ng-click="jump()">点击跳转首页</button>
<a ui-sref="about">跳转至关于我们</a>
<button ng-click="jumpOther()">穿参数</button>
<a ui-sref="items.other({id:"sref"})"></a>
<ul>
//因为我们外面父级路由是items所以自路由用items为前缀
<li><a ui-sref="items.comp">电脑</a></li>
<li><a ui-sref="items.phone">手机</a></li>
</ul>
<div ui-view></div>
</div>
总结
以上所述是小编给大家介绍的Angular路由ui-router配置详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
angular基于路由控制ui-router实现系统权限控制
前端去实现权限控制听起来有点扯淡(实际也有点扯淡),掩耳盗铃,主要是担心安全问题,但是如果在前后端分离的情况下,需要做一个带有权限控制的后台管理系统,angular基于ui-router应该怎么做呢? 权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限. 一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配
-
angularjs ui-router中路由的二级嵌套
关于ui-router中嵌套路由中的问题 1.首先我们的页面层次为 其中Main.html是我们的主页,我们要在main.html中对路由进行统一的管理. main.html页面中有一个ui-view在这里将填充PageTab.html,同时被填充的PageTab.html中也有一个ui-view 这样就实现了嵌套路由. 最终效果: 当我们点击Page-1时出现的是Page1中的内容,同理点击Page-2. 下面是实际的代码: Main.html <!DOCTYPE html> <htm
-
AngularJS ui-router (嵌套路由)实例
我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf
-
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
AngularJS 路由 是通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上.因此在设置好路由规则后,为html页面的a标签设置href路由链接切换不同的视图.Angular1.6版本之前通常有href="#..."或href="#/..."这两种写法,结果这两种写法在Angular1.6中没有任何反应. 结果查看了下浏览器地址栏,默认视图链接竟然显示"#!/..",是的,中间多加了个!号. AngularJS升级
-
浅析angularJS中的ui-router和ng-grid模块
在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没
-
Android路由框架Router分析详解
什么是路由?说简单点就是映射页面跳转关系的,当然它也包含跳转相关的一切功能. 路由框架的意义 Android系统已经给我们提供了api来做页面跳转,比如startActivity,为什么还需要路由框架呢?我们来简单分析下路由框架存在的意义: 在一些复杂的业务场景下(比如电商),灵活性比较强,很多功能都是运营人员动态配置的,比如下发一个活动页面,我们事先并不知道具体的目标页面,但如果事先做了约定,提前做好页面映射,便可以自由配置. 随着业务量的增长,客户端必然随之膨胀,开发人员的工作量越来越大,比
-
前端路由&webpack基础配置详解
1. SPA SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能 优点: 不需要跳转页面,局部更新页面内容 前端组件化 缺点: 首屏加载慢(第一次访问慢,按需加载) 开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发) 不利于SEO搜索引擎优化(使用服务端渲染) 2. 前端路由: 根据不用的URL标识符渲染不同的组件(不同的网页内容) 路由实现原理: hash哈希(锚点) 通过hashchange监听URL标识
-
Angular路由ui-router配置详解
简介 angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散,好比Vue提供的组件传值一样,虽然提供给你了用法,但是开发过程中逻辑一多用着萌萌的,所以我们抛开ng-router来看ui-router. 引入ui-router 我们可以去bootCDN搜索ui-router,本地创建js文件,将代码copy进去使用,这样就可以打入本地使用了,但是要注意的是,Angular的main.js一定要在ui-router之前引用,注意一下先后顺序问题. 例如: <s
-
react 路由Link配置详解
1.Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}} 会自动将pathname.search.hash拼接在url路径上,state为传入的参数 可通过输出props查看对象内的信息 this.props.location.state.键名获取state内的数据 2.Link的replace属性 添加replace将跳转前的上一个页面替换
-
SpringCloud Gateway动态路由配置详解
目录 路由 动态 路由模型实体类 动态路径配置 路由模型JSON数据 路由 gateway最主要的作用是,提供统一的入口,路由,鉴权,限流,熔断:这里的路由就是请求的转发,根据设定好的某些条件,比如断言,进行转发. 动态 动态的目的是让程序更加可以在运行的过程中兼容更多的业务场景. 涉及到两个服务,一个是门户服务(作用是提供给运营人员管理入口--包括:管理路由.绑定路由),一个是网关服务(gateway组件,为门户服务提供:查询路由信息.添加路由.删除路由.编辑路由接口). 路由模型实体类 /*
-
Vue.js框架路由使用方法实例详解
Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-
-
基于Vue2.X的路由和钩子函数详解
最近上班有些忙,好久没有更新文章,也没学习新的东西. 今天来说说这个路由钩子吧. 导航和钩子函数: 导航:路由正在发生改变 关键字:路由 变 钩子函数:在路由切换的不同阶段调用不同的节点函数(钩子函数在我看来也就是:某个节点和时机触发的函数). 钩子函数 主要用来拦截导航,让它完成跳转或取消,在导航的不同阶段来执行不同的函数 ,最后钩子函数的执行结果会告诉导航怎么做.. 导航在所有钩子 resolve 完之前一直处于 等待中,等待钩子函数告诉它下一步该怎么做.用next()来指定. 我来给大家举
-
Vue-cli3多页面配置详解
Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面.由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题. 对于Vue-cli3创建项目这里就不做太多的赘述了,毕竟不属于本文内容,有关相关博客也有很多,大家可以自行Google一下就好了. 多页面应用(mpa)与单页面应用(spa)优缺点 在项目中我们用到的大多数都是单页面应用(spa),对于多页面可能用到的比较少一些,具体还是要根据具
-
Vue-Jest 自动化测试基础配置详解
目录 安装 配置 常见错误 测试前的工作 处理依赖 生成实例和 DOM 总结 引用 目前开发大型应用,测试是一个非常重要的环节,而在 Vue 项目中做单元测试可以用 Jest,Jest 是 facebook 推出的一款测试框架,集成了 Mocha, chai, jsdom, sinon 等功能,而且在 Vue 的脚手架中已经集成了 Jest,所以在 Vue 项目中使用 Jest 做单元测试是不二的选择,从提供的例子上看都很简单地配置并测试成功,然而在实际项目中有很多差异,我在测试自己的某个业务组
-
Vue2.x与Vue3.x中路由钩子的区别详解
目录 vue2.x 前置概念: 路由钩子分类 路由和组件的概念(方便理解钩子函数) 全局路由钩子 路由配置守卫钩子 组件内的守卫钩子 路由钩子执行顺序 eg: 从A组件跳转到B组件顺序 如果B路有更新, 每次都会执行以下三个钩子: vue3.x 对比变化图 区别补充: vue2.x 前置概念: 路由钩子分类 一共分3类, 7个钩子 路由和组件的概念(方便理解钩子函数) 路由和组件是2个概念, 可以粗犷的认为: 路由是浏览器网址 组件是显示在网页上的不同内容 全局路由钩子 router.befor