angular 路由模版
<script src="angular-route.js"></script>
<script>
//二.实例化模块时, 注入ngRoute模块
var app = angular.module('app', ['ngRoute']);
//
app.controller('skController', ['$scope',function ($scope) {
}]);
//路由,监听锚点变化
//三.配置路由 ->让路由帮你监听哪些锚点发生了变化
app.config(['$routeProvider', function ($routeProvider) {
//when() 当锚点为指定值时,帮你处理相应的逻辑
//路由规定, 在锚点之前,加上一个 '/'
$routeProvider.when('/home',{
//template:'<h1>首页内容<h1>'
//找到文件之后，会把文件当中所有的内容，放到ng-view占位的标签当中
templateUrl:'home.html'
}).when('/my',{
template:'<h1>关于我们内容<h1>'
}).when('/contact',{
template:'<h1>联系我们内容<h1>'
}).otherwise({
//都不是设置默认值
redirectTo:'/home'
})
}]);
</script>
<body ng-app="app" ng-controller="skController">
<div class="header">
<ul>
<!--注意:锚点后也要加 /-->
<li><a href="#/home">首页</a></li>
<li><a href="#/my">关于我们</a></li>
<li><a href="#/contact">联系我盟</a></li>
</ul>
<!-- 四.布局模版 -->
<div class="content">
<div ng-view></div>
<!-- <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>-->
</div>
</div>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
