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 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 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中的Class的几点个人看法
2006/10/09 PHP
PHP编程与应用
2006/10/09 PHP
php 无限分类的树类代码
2009/12/03 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
自己的js工具 Cookie 封装
2009/08/21 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
set在python里的含义和用法
2019/06/24 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python实现文件的分割与合并
2019/08/29 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python生成并处理uuid的实现方式
2020/03/03 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
应届生会计电算化求职信
2013/10/03 职场文书
客户经理岗位职责
2013/12/08 职场文书
女方回门宴答谢词
2014/01/14 职场文书
项目合作协议书
2014/04/16 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python