angular路由写法实例

<!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不同
angular路由写法实例

</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"
        })
}]);


你可能感兴趣的:(Angular,angular路由,angular页面跳转,ui-router)