路由

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../7-BoothStrap/CSS/bootstrap.css" />

</head>

<body ng-app="app" ng-controller="control">
<nav class="navbar navbar-default">
<!-- Collect the nav links, forms, and other content for toggling -->

<ul class="nav navbar-nav">
<li class="active"><a href="#/">首页</a></li>
<li><a href="#/page1">01 指令与表达式.html</a></li>
<li><a href="#/page2">0501-factory.html</a></li>
<li><a href="#/page3">04-service.html</a></li>
</ul>


<!-- /.container-fluid -->
</nav>
<div ng-view></div>
</body>
<script src="libs/angular.js"></script>
<script src="libs/angular-route.js"></script>
<script type="text/javascript">
/*angularJS中使用路由
* 1、导入angular-route.js
* 2、给模块注入“ngRoute” ,eg:angular.module("app",["ngRoute"])
* 3、将超链接地址改为路由格式 eg:<a href="#/">首页</a>
* 4、在config中,注入$routeProvider,进行路由配置
* eg: $routeProvider
.when('/',{template:'这是首页页面'})
.when('/page1',{template:'这是page1页面'})
.when('/page2',{template:'这是page2页面'})
.when('/page3',{template:'这是page3页面'})
.otherwise({redirectTo:'/'});
5、在页面合适的位置,添加ng-view,用于承载打开的页面:
<div ng-view></div>或<ng-view></ng-view>
[路由参数对象中可选属性]
①template:自定的html模板,
②templateUrl:导入外部的html模板。为了避免冲突,外部的html模板,保留body以内的
部分即可。
③redirectTo:重定向,一般用于.otherwise()中。重定向到某个路由页面
④controller:在当前模板上执行的controller函数,生成新的scope。
*/
angular.module("app",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/page1',{template:'这是page1页面'})
.when('/page2',{templateUrl:'page2.html'})
.when('/page3',{template:'这是page3页面'})
.otherwise({redirectTo:'/'});
})
.controller("control",function($scope){//给函数注入系统服务

})



</script>

</html>

posted @ 2017-07-09 19:34  赵娜  阅读(111)  评论(0编辑  收藏  举报