angularJS $routeProvider
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularJS $routeProvider相关的知识,希望对你有一定的参考价值。
O‘Reilly书上的伪代码
var someModule = angular.module(‘someModule‘,[...module dependencies]); someModule.config(function($routeProvider){ $routeProvider .when(‘url‘,{controller:aController, templateUrl:‘/path/to/template‘}) .when(...)//other mappings for your app .otherwise(...)//what to do if nothing else matches });
$route被用于URLS到controller和view(html模板)之间的链接,它会监控$location.url()并试图对此路径及对应的路由配置进行映射,使用时需要注入安装ngroute模块。
var someModule = angular.module(‘someModule‘,[‘ngRoute‘]);
举个详细的栗子
var app = angular.module(‘app‘, [‘ngRoute‘]); app.config(function ($routeProvider){ $routeProvider .when(‘/other‘, { controller: ‘otherCtrl‘, templateUrl: ‘content/views/other.html‘, publicAccess: true }) .when(‘/‘, { controller: ‘homeCtrl‘, templateUrl: ‘content/views/home.html‘ }) .when(‘/other/:id‘, { controller: ‘otherDetailCtrl‘, templateUrl: ‘content/views/otherDetail.html‘, publicAccess: true }) .otherwise({ redirectTo: ‘/‘ }); } app.controller(‘homeCtrl‘,function($scope,$http){ console.log(‘i am home page‘); $scope.title = ‘i am home page‘; }); app.controller(‘otherCtrl‘,function($scope){ console.log(‘i am other page‘); $scope.title = ‘i am other page‘; }); app.controller(‘otherDetailCtrl‘,function($scope, $routeParams, $location){ var id = $routeParams.id; if(id == 0) { $location.path(‘/other‘); } console.log(‘i am otherDetailCtrl page‘); $scope.title = ‘i am otherDetailCtrl page‘; });
在$route(路由)中,提供了两个依赖性服务:$location、$routeParams。
$location、$routeParams均可在controller中使用,如上otherDetailCtrl中,可通过$routeParams获取路由时所传参数,可通过$location进行路由跳转。
以上是关于angularJS $routeProvider的主要内容,如果未能解决你的问题,请参考以下文章
AngularJs 使用 $routeProvider 的路由问题
AngularJs routeProvider http状态403
angularjs 报错Unknown provider: $routeProvider
AngularJS 的 $routeProvider templateUrl 总是使用 Express 返回 404