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

  • 相关阅读:
    【设计】概要设计-详细设计-到底需要输出什么???
    【Java】Eclipse代码格式化-代码模板
    【Scala】Scala学习资料
    【Java】阿里巴巴Java开发手册(纪念版)
    【Storm】学习笔记
    【HBase】学习笔记
    【Hadoop】Combiner的本质是迷你的reducer,不能随意使用
    【Hadoop】mapreduce采用多进程与spark采用多线程比较
    【ES】elasticsearch学习笔记
    【MySQL】MySQL统计NULL字段处理
  • 原文地址:https://www.cnblogs.com/zcynine/p/5170341.html
Copyright © 2011-2022 走看看