• 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进行路由跳转。

  • 相关阅读:
    测开之路九十五:css进阶之光标和溢出内容处理
    测开之路九十四:css之盒子模型
    测开之路九十三:css之文字样式和段落对齐
    测开之路九十二:css之背景色和背景
    测开之路九十一:css常用的选择器
    测开之路九十:css的引用方式
    测开之路八十九:HTML之图片处理
    测开之路八十八:HTML之文本格式化
    测开之路八十七:HTML之a标签的用法
    十、Django之Admin
  • 原文地址:https://www.cnblogs.com/zcynine/p/5170341.html
Copyright © 2020-2023  润新知