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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JS提交form表单实例分析
Dec 10 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue.js中的组件系统
May 30 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
通过url查找a元素并点击
2014/04/09 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python绘制圆柱体的方法
2018/07/02 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Django跨域请求原理及实现代码
2020/11/14 Python
python实现无边框进度条的实例代码
2020/12/30 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
网络书店创业计划书
2014/02/07 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
销售辞职信范文
2015/03/02 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android