AngularJS路由
Posted 坚持
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS路由相关的知识，希望对你有一定的参考价值。
AngularJS路由允许我们通过不同的url访问不同的内容，AngularJS中是通过 #+标记。
#符号之后的内容在线服务端请求的时候会被浏览器忽略。所以我们就需要在客户端实现#号后面内容的功能实现。AngularJS就是通过#+标记帮助我们欺负不同的逻辑页面并将不同的页面绑定到对应的控制器上。
$routeprovider为我们提供了when（path，object）&otherwise（object）函数按照顺序定义了多元路由，函数包含两个参数：第一个参数是url或是是url正则表达式；第二个蚕食是路由配置对象。
路由配置对象
路由配置对象的语法规则如下：
$routeProvider.when(url,{
template:string,//如果我们只需要在ng-view中插入简单的html内容，就使用fail参数，如when(‘/computers‘,{templte:‘this is computer page‘})
templateUrl:string,//如果在ng-view中插入的不是简单HTML标签，而是复杂的内容，就可以使用该参数在ng-view中插入一个HTML模板文件。如$routeProvider.when(‘/computers‘,{templateUrl:‘views/computers.html‘})
contorller:string,function or array,//在当前模板山执行controller函数，生成新的scope。
contorllerAs:string,//为controller指定别名
redirectTo:string,function,//重新定向的地址
resolve:object<object,function>//指定当前controller所依赖的其他模块。
<html> <head> <meta http-equiv="content-type" content="text/html charset=UTF-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> <script type="text/javascript"> var app=angular.module("app",[‘ngRoute‘]); app.contoller("homeController",function($scope,$route){$scope.$route=$route;}) app.controller("aboutCntroller",function($scope,$route){$scope.$route=$route;}) app.cofig(function($routeProvider){ $routeProvider.when(‘/home‘,{ templateUrl:‘embedded.home.html‘‘, contorller:‘HomeController‘ }).when(‘/about‘,{ templateUrl:‘embedded.about.html‘, controller:‘AbourController‘ }).otherwise(redirectTo:‘/home‘); })； </script> </head> <body ng-app="app" class="ng-scope"> <script type=‘text/ng-template‘ id="embedded.home.html"> <h1>Home</h1> </script <script type=‘text/ng-template‘ id="embedded.about.html"> <h1>About</h1> </script> <div> <div id="navigation"> <a href="#/home"></a> <a href="#/about"></a> </div> <div ng-view=""></div> </div> </html>
});
以上是关于AngularJS路由的主要内容，如果未能解决你的问题，请参考以下文章