Angular路由之ui-router
Angular路由之ui-router说明官网hello world完整代码在线测试补充效果图说明上一篇介绍了angular自带的路由的使用，但实际上已经用的很少了，基本被第三方的ui-router取代。二者使用上区别不是很大，之所以前者被取代，是因为ui-router功能更为强大官网https://ui-router.github.io/hello world自认为最好的入...
·
说明
上一篇介绍了angular自带的路由的使用，但实际上已经用的很少了，基本被第三方的ui-router取代。二者使用上区别不是很大，之所以前者被取代，是因为ui-router功能更为强大
官网
hello world
- 自认为最好的入门教程是官方demo
完整代码
<html>
<head>
<title>ui-router入门程序</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
<script src="https://unpkg.com/@uirouter/angularjs@1.0.22/release/angular-ui-router.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body ng-app="helloworld">
<!-- ui-sref-active="active" 会自动匹配当前访问的是哪一个 -->
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<!-- 呈递视图，不要忘记加，这个小东西很重要，一个页面可以放多个 -->
<ui-view></ui-view>
</body>
<script>
//创建应用模块，加载ui.router
var myApp = angular.module('helloworld', ['ui.router']);
//配置路由
myApp.config(function($stateProvider) {
var helloState = {
name: 'hello',//状态名，与 ui-sref的值相同
url: '/hello',//访问地址
template: '<h3>hello world!</h3>'//显示的内容
}
var aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
//挂载路由
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
</script>
</html>
在线测试
https://lengyuexin.github.io/ui_router/
补充
-
既然要用，首先就是引包，可以用cdn方式在线引用，也可以npm或者bower下载到本地用
-
注意，你引用的angular版本要和ui-router版本匹配，这里是1.x配1.x
-
$stateProvider.state很智能，支持链式调用，和jquery很像，每次操作结束都返回自身对象
-
$stateProvider.state(helloState).state(aboutState) ，这样写也是可以的
效果图
注意地址栏和active的变化
- 初始界面
- 点击Hello后
- 点击About后
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)