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

AngularJS - 为啥更改 url 地址时 $routeProvider 似乎不起作用并且我收到 404 错误

angularjs $routeProvider 不包括视图(未知提供者)