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实现的一个include函数
Jul 21 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
javascript 面向对象 function类
May 13 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 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和ACCESS写聊天室(七)
2006/10/09 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
详解json在php中的应用
2018/09/30 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python集合用法实例分析
2015/05/30 Python
Python单例模式实例详解
2017/03/01 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
解决python flask中config配置管理的问题
2019/07/26 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
表彰会主持词
2014/03/26 职场文书
《春天来了》教学反思
2014/04/07 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
评职称个人总结
2015/03/05 职场文书
结婚堵门保证书
2015/05/08 职场文书
2015大学迎新标语
2015/07/16 职场文书
标枪加油稿
2015/07/22 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
浅析Python中的随机采样和概率分布
2021/12/06 Python