<!DOCTYPE html>
<html ng-app="webPerson">//ng-app 此处实现的是页面的模块化
<head>
<meta charset="UTF-8">
<title>web前端</title>
<link rel="stylesheet" href="css/allStyle.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>//必须引入ui-router 因为 angular.js是不具备这一项功能的 这跟jquery不同
</head>
<body>
<div class="topNav grandFathserWidth">
<ul>
//ng-class ui-sref 均是在配置 ng-class配置路由对应的状态 ui-sref配置链接的地址
<li ng-class="{active: $state.includes('headPage')}"><a ui-sref="headPage">首页</a></li>
<li ng-class="{active: $state.includes('webTech')}"><a ui-sref="webTech">webTech</a></li>
<li ng-class="{active: $state.includes('webResource')}"><a ui-sref="webResource">webResourcesss</a></li>
</ul>
</div>
//下面的ui-view既是子页面展示的视图区域
<div ui-view="" class="contentGrandfather grandFathserWidth" ></div>
<script src="js/pageJs/index.js"></script>
</body>
</html>
//index.js文件部分
var webperson = angular.module('webPerson',['ui.router']);//此时需要注入ui.router的模块
//配置路由 $routeProvider $urlRouterProvider
webperson.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider
.when("/webTech","/subpage/webTechnology.html")
.when("/webResource","/subpage/webResourceCollect.html")
.otherwise('/headPage','/subpage/homepage.html')
.when('/webTechnilogy.singlePage','/subpage/webTechnilogy.singlePage.html');
$stateProvider
.state("headPage/状态标识/",{//默认的首页
url:"/headPage",//填写对应的url 后 实现默认页面的指向
templateUrl:"subpage/homepage.html"
})
.state("webTech",{//一级子页
url:"/",
templateUrl:"subpage/webTechnology.html"
})
.state("webTech.singlePage",{//演示的二级子页面 属于webTech的子页
url:"/webTech.singlePage",
templateUrl:"subpage/webTech.singlePage.html"
})
.state("webResource",{//一级子页
url:"/",
templateUrl:"subpage/webResourceCollect.html"
})
}]);
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
