一个路由实例
为何要使用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'); } ; }]);