一个路由实例

来源：互联网发布：mac中文输入法全角编辑：程序博客网时间：2024/06/05 11:14

一个路由实例

为何要使用route路由：

AJAX 请求不会留下 History 记录

用户无法直接通过 URL 进入应用中的指定页面(保存书签、链接分享给朋友)

AJAX对 SEO 是个灾难

<!doctype html><html lang="en" ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Example - example-example64-production</title>    <style>        .content{min-height:400px;background-color: #888888;}    </style>    <script src="js/angular.min.js"></script>    <!--<script src="js/angular-resource.js"></script>-->    <script src="js/angular-route.js"></script>    <script src="js/myJS/mainApp.js"></script>    <script src="js/myJS/homeControl.js"></script></head><body>    <header>header</header>    <div class="content" ng-view></div>    <footer>footer</footer></body></html>

配置路由机制：

var mainApp=angular.module("myApp",['ngRoute']);    mainApp.config(['$routeProvider',function($routeProvider){        $routeProvider.when("/home.do",{            templateUrl:"views/home.html",            controller:'homeController'        }).when("/login.do",{            templateUrl:'views/login.html',            controller:'loginController'        }).when('/dashboard.do',{            templateUrl:'views/dashboard.html',            controller:'dashboardController'        }).otherwise({            redirectTo : '/login.do'        })    }]);

其中 home.html 和 login.html 以及 dashboard.html 均为html片段

ng-view是为了在html文档结构中为分配路由路径加载html片段占位的

home.html代码片段如下：

<h2>homePAGE</h2>   <p> 我是home页面的看法考虑到房价放到空间的克里夫</p><hr/><p>dkfjoefjioe</p><button ng-click="gotoDashboard()">点击跳转到dashboard页面</button>

点击home.html页面的按钮跳转到dashboard页面

mainApp.controller("homeController",['$scope','$location',function($scope,$location){    $scope.gotoDashboard = function(){        $location.path('/dashboard.do');    } ;}]);

0 0