码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS路由

时间:2017-11-15 21:42:49      阅读:15      评论:0      收藏:0      [点我收藏+]

标签:定向   1.3   col   module   alt   函数   帮助   html模板   color   

 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路由实例

 

});

AngularJS路由

标签:定向   1.3   col   module   alt   函数   帮助   html模板   color   

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!