Angular路由ui-router配置详解


Posted in Javascript onAugust 01, 2018

简介

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配置详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
微信小程序倒计时功能实例代码
Jul 17 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 #Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 #Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 #Javascript
create-react-app 修改为多入口编译的方法
Aug 01 #Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 #Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 #Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 #Javascript
You might like
PHP中调用JAVA
2006/10/09 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
用js+xml自动生成表格的东西
2006/12/21 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
用js编写留言板
2020/03/17 Javascript
js制作提示框插件
2020/12/24 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python3安装speech语音模块的方法
2018/12/24 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
写给女朋友的检讨书
2014/01/28 职场文书
洗车工岗位职责
2014/03/15 职场文书
医学生求职信
2014/07/01 职场文书
党性分析材料格式
2014/12/19 职场文书
关于倡议书的范文
2015/04/29 职场文书