zoukankan      html  css  js  c++  java
  • 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进行路由跳转。

  • 相关阅读:
    架构师是怎么炼成的?
    互联网架构
    软件质量属性之可测试性
    用百度 AI Studio完成猫狗识别
    【2021.02.22】智能家居之门窗传感器与人体传感器
    【2021.02.21】逻辑斯蒂回归、处理多维特征的输入
    【2020.02.20】树莓派3B安装home assistant全过程
    【2020.02.18】反向传播、线性回归
    【2021.02.17】线性模型、梯度下降算法
    【2021.02.16】pytorch导论
  • 原文地址:https://www.cnblogs.com/zcynine/p/5170341.html
Copyright © 2011-2022 走看看