ng-route与ui-router
来源:互联网 发布:淘宝店铺模板怎么上传 编辑:程序博客网 时间:2024/05/23 00:06
ng-route与ui-router
上篇讲了AngularJs中路由内容,通过路由实现SPA单页面切换功能,但AngularJs中ng-route也存在其缺陷,它只能注入一个视图,不能实现多视图的嵌套,如需注入多个其内置服务实现起来太过麻烦,可以通过第三方ui-router来实现。
1.使用方式:
--1.引入 angular-ui-router.min.js
可进入ui-router官方网站下载:
https://ui-router.github.io
--2.了解基本内容
指令:ui-view 该指令主要用于进行目标视图模板的展示 链接:ui-sref 该属性,主要用于替换HTML中a标签的href属性,用于指定目标路由的名称 服务:$stateProvider 该服务主要用于进行路由状态的定义~ 路由URL和视图模板的绑定
2.例1:简单使用
<ul> <li><a ui-sref="hello" ui-sref-active="active">hello</a></li> <li><a ui-sref="world" ui-sref-active="active">world</a></li></ul><div> <!--<ui-view></ui-view>--> <div ui-view></div></div><script> var app = angular.module("myApp", ["ui.router"]); /* 配置路由信息 */ /* $stateProvider: Ui路由中的状态服务提供者 */ app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise("/hello"); $stateProvider.state({ name: "hello", /* 状态名称,用于链接中使用 */ url: "/hello", /* 显示路径,在url地址中显示*/ template: "<h1>这是hello对应的内容</h1>"/*跳转的目标数据/页面*/ }).state({ name: "world", url: "/world", template: "<h1>这是world跳转之后对应的内容</h1>" }); }]);</script>
例2:组件方式的使用
<ul> <li><a ui-sref="hello" ui-sref-active="active">hello</a></li> <li><a ui-sref="world" ui-sref-active="active">world</a></li></ul><div> <!--<ui-view></ui-view>--> <ui-view name="header"></ui-view> <div ui-view></div> <ui-view name="footer"></ui-view></div><script> var app = angular.module("myApp", ["ui.router"]); /* 配置路由信息 */ /* $stateProvider: Ui路由中的状态服务提供者 */ app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider,$urlRouterProvider) {// $urlRouterProvider.otherwise("/hello"); $stateProvider.state({ name: "hello", /* 状态名称,用于链接中使用 */ url: "/hello", /* 显示路径,在url地址中显示*/ views:{ "":{ template:"<h1>默认路由中显示的内容</h1>" }, "header":{ template:"<h2>这是hello页面的头部内容</h2>" }, "footer":{ template:"<h2>这是hello页面的页面底部内容</h2>" } } }).state({ name: "world", url: "/world", views:{/*用于进行多数据展示的情况下*/ "":{ template:"<h1>这是默认路由ui-view中展示的内容</h1>" }, "header":{ template:"<h1>这是world链接,展示在header中的内容</h1>" }, "footer":{ template:"<h1>这是world链接,footer</h1>" } } }); }]);</script>例3:嵌套方式的应用
<h1>用户中心</h1><ul> <li><a ui-sref=".find">二级路由链接:查看用户</a></li> <li><a ui-sref=".update">二级路由链接:修改用户</a></li> <li><a ui-sref=".delete">二级路由链接:删除用户</a></li></ul><div> <ui-view></ui-view></div>
<ul> <li><a ui-sref="index" ui-sref-active="active">首页</a></li> <li><a ui-sref="user" ui-sref-active="active">用户中心</a></li></ul><div> <!--<ui-view></ui-view>--> <div ui-view></div></div><script> var app = angular.module("myApp", ["ui.router"]); /* 配置路由信息 */ /* $stateProvider: Ui路由中的状态服务提供者 */ app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise("/index"); $stateProvider.state({ name: "index", /* 状态名称,用于链接中使用 */ url: "/index", /* 显示路径,在url地址中显示*/ templateUrl:"tab1.html" }).state({ name: "user", url: "/user", templateUrl:"tab2.html" }).state({ name:"user.find", url:"/userfind", templateUrl:"user/finduser.html" }).state({ name:"user.update", url:"/userupdate", templateUrl:"user/updateuser.html" }).state({ name:"user.delete", url:"/userdelete", templateUrl:"user/deleteuser.html" }); }]);</script>
0 0
- ng-route与ui-router
- AngularJS 路由:ng-route 与 ui-router
- AngularJS 路由:ng-route 与 ui-router
- angularJs 中 ng-route与ui-router路由的区别
- Angular学习-ng-route与ui-router路由的区别
- Angular路由 ng-route和ui-router的区别
- angularjs 中的ng-route和ui-router的区别
- Angular路由 ng-route和ui-router的区别
- angularjs中ng-route和ui-router简单用法的代码比较
- angularjs中ng-route和ui-router简单用法的代码比较
- 再谈路由之——ng-route和ui-router
- ng ui-router $state.go()跳转
- AngualrJs ui-router动态设置ng-class
- ng中使用ui-route配置demo
- angular中的路由 ng-router vs ui.router
- angular中的路由 ng-router vs ui.router
- 一起来看看angular的ui-route--VS--ng-route
- ng ui-route的toState, toParams, fromState, fromParams
- 414. Third Maximum Number
- flex布局(一)
- HDOJ1005(周期计数)
- go语言的使用感受
- 伪随机数算法
- ng-route与ui-router
- CCPC2016解题报告
- 泰斯特
- 学习springmvc的第三天(2:构造方法注入)
- 《Cracking the Coding Interview程序员面试金典》----单词最近距离
- scala 第一天
- 《逆向工程核心原理》<04-32> 通过DLL注入实现IAT钩取的技术
- Curl命令介绍
- Uva 11732 "strcmp()" Anyone? 左儿子右兄弟的trie