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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
jQuery简单创建节点的方法
Sep 09 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 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 无限极分类
2008/03/27 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP 函数学习简单小结
2010/07/08 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
Convert Seconds To Hours
2007/06/16 Javascript
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
理解Python中函数的参数
2015/04/27 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python银行系统实战源码
2019/10/25 Python
利用python实现逐步回归
2020/02/24 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
博士生导师推荐信
2014/07/08 职场文书
土建施工员岗位职责
2014/07/16 职场文书
审计班子对照检查材料
2014/08/27 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
2015年科普工作总结
2015/07/23 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL