angular-ui-router写的一个小例子,刚开始接触,不足之处,大家多多指导

小精豆2016
小精豆2016 发布于 2016-11-09 17:16:53 浏览:617 类型:原创 - 随笔 分类:JavaScript - angularJS 二维码: 作者原创 版权保护
目录如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/angular.min.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="routerApp">
	<h1>angularjs的一个小测试</h1>
	<div ui-view=""></div>
</body>
</html>


main.html
<div>
	<h1>内容在这里显示</h1>
		<div>
			<a ui-sref=".page1">page1</a>
			<a ui-sref=".page2">page2</a>
			<a ui-sref=".page3">page3</a>
		</div>
		<div>
			<div ui-view="" ></div>
		</div>
	</div>	


page1.html
<h1>Page 1 content goes here...</h1>


page2.html
<h1>Page 2 content goes here...</h1>


page3.html
<h1>Page 3 content goes here...</h1>


app.js
var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(function ($stateProvider,$urlRouterProvider) {
    $urlRouterProvider.when('','main');
    $stateProvider
        .state("main", {
                    url:'/main',
                    templateUrl: 'main.html',
               })
		.state("main.page1",{ 
                    url:'/page1',
                    views: {
                        "":{
                            templateUrl: 'page1.html' 
                        }
                    }
                })
		.state("main.page2",{ 
                    url:'/page2',
                    views: {
                        "":{
                            templateUrl: 'page2.html' 
                        }
                    }
                })
		.state("main.page3",{ 
                    url:'/page3',
                    views: {
                        "":{
                            templateUrl: 'page3.html' 
                        }
                    }
                })
})


运行效果如下angular-ui-router写的一个小例子,刚开始接触,不足之处,大家多多指导angular-ui-router写的一个小例子,刚开始接触,不足之处,大家多多指导angular-ui-router写的一个小例子,刚开始接触,不足之处,大家多多指导angular-ui-router写的一个小例子,刚开始接触,不足之处,大家多多指导
z
给个赞 2 人点赞
收藏 0 人收藏
评论 已有 4 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
Jason__Zhou
Jason__Zhou2016-11-15 22:26:234F
还真没用angular写过后台页面,只是学bootstrap的弄过,不知道是不是你想要的那种效果:http://main1.applinzi.com/project/bt/zonghe.html //@小精豆2016:亲,你有没有用angular写过下拉菜单的demo啊,就是后台页面那种 //@Jason__Zhou:http://main1.applinzi.com/desk/index.html#/desk //@Jason__Zhou:可以参考我这个小demo:http://main1.applinzi.com/desk/index.html#/desk/link
举报 支持 (0) 回复 (0)
小精豆2016
小精豆20162016-11-14 17:41:403F
亲,你有没有用angular写过下拉菜单的demo啊,就是后台页面那种 //@Jason__Zhou:http://main1.applinzi.com/desk/index.html#/desk //@Jason__Zhou:可以参考我这个小demo:http://main1.applinzi.com/desk/index.html#/desk/link
举报 支持 (0) 回复 (1)
Jason__Zhou
Jason__Zhou2016-11-14 12:48:272F
http://main1.applinzi.com/desk/index.html#/desk //@Jason__Zhou:可以参考我这个小demo:http://main1.applinzi.com/desk/index.html#/desk/link
举报 支持 (0) 回复 (1)
Jason__Zhou
Jason__Zhou2016-11-14 12:46:331F
可以参考我这个小demo:http://main1.applinzi.com/desk/index.html#/desk/link
举报 支持 (0) 回复 (1)
小精豆2016 小精豆2016 作者

作者最新