javascript - $routeProvider will not work as should be - Stack Overflow

admin管理员组

文章数量:1022623

i am having a problem and a question

my cliend side uses:

<div ng-view></div>

and the following scripts:

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/services.js"></script>
  <script src="js/filters.js"></script>

my routProvider was:

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

which worked fine.

i can't figure out why this implemention doesn't work, i saw it used many times before:

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider) {
  $routeProvider.
      when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
      }).
      when('/view2', {
        controller: 'MyCtrl2',
        templateUrl: 'partials/partial2.html'
      }).
      otherwise( {redirecTo: '/view1'});
});

another question is: why in the first example there is '$routeProvider' injection before the function? as i understand the function($routProvider) should do this job.

thanks.

i am having a problem and a question

my cliend side uses:

<div ng-view></div>

and the following scripts:

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/services.js"></script>
  <script src="js/filters.js"></script>

my routProvider was:

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

which worked fine.

i can't figure out why this implemention doesn't work, i saw it used many times before:

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider) {
  $routeProvider.
      when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
      }).
      when('/view2', {
        controller: 'MyCtrl2',
        templateUrl: 'partials/partial2.html'
      }).
      otherwise( {redirecTo: '/view1'});
});

another question is: why in the first example there is '$routeProvider' injection before the function? as i understand the function($routProvider) should do this job.

thanks.

• javascript
• node.js
• angularjs

Share Improve this question Follow edited Aug 2, 2013 at 11:31 Henrik Andersson 47.3k1616 gold badges100100 silver badges9494 bronze badges asked Aug 2, 2013 at 11:12 lobengula3rdlobengula3rd 1,86155 gold badges2727 silver badges3939 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Your code works just fine (plnkr), but you misspelled redirectTo so the initial redirect to /view1 didn't work.

With regard to explicitly injecting $routeProvider: using the explicit version of injection prevents issues with variable renaming when you minify your JS code for production use. For instance, without being explicit, your code might be minified into something like this:

a.config(function(b) { b.when('/view1', ...) });

Since Angular depends the name of the argument to inject the correct provider, you can explicitly name it as a string (which won't get minified):

a.config([ '$routeProvider', function(b) { ... } ]);

That way, Angular knows the first argument should be $routeProvider.

You are super close. You do need to include the $routeprovider. This should work for you.

angular.module('myApp', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            when('/view1', {
                controller: 'MyCtrl1',
                templateUrl: 'partials/partial1.html'
            }).
            when('/view2', {
                controller: 'MyCtrl2',
                templateUrl: 'partials/partial2.html'
            }).
            otherwise({
                redirectTo: '/view1'
            });
    }]);

This should work!

angular.module('myApp', [])
    .config(function($routeProvider) {
        $routeProvider.when('/view1', {
                controller: 'MyCtrl1',
                templateUrl: 'partials/partial1.html'
            });
        $routeProvider.when('/view2', {
                controller: 'MyCtrl2',
                templateUrl: 'partials/partial2.html'
            });
        $routeProvider.otherwise({
            redirectTo: '/view1'
        });
    });

i am having a problem and a question

my cliend side uses:

<div ng-view></div>

and the following scripts:

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/services.js"></script>
  <script src="js/filters.js"></script>

my routProvider was:

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

which worked fine.

i can't figure out why this implemention doesn't work, i saw it used many times before:

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider) {
  $routeProvider.
      when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
      }).
      when('/view2', {
        controller: 'MyCtrl2',
        templateUrl: 'partials/partial2.html'
      }).
      otherwise( {redirecTo: '/view1'});
});

another question is: why in the first example there is '$routeProvider' injection before the function? as i understand the function($routProvider) should do this job.

thanks.

i am having a problem and a question

my cliend side uses:

<div ng-view></div>

and the following scripts:

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/services.js"></script>
  <script src="js/filters.js"></script>

my routProvider was:

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

which worked fine.

i can't figure out why this implemention doesn't work, i saw it used many times before:

var myApp = angular.module('myApp', []);

myApp.config(function($routeProvider) {
  $routeProvider.
      when('/view1', {
        controller: 'MyCtrl1',
        templateUrl: 'partials/partial1.html'
      }).
      when('/view2', {
        controller: 'MyCtrl2',
        templateUrl: 'partials/partial2.html'
      }).
      otherwise( {redirecTo: '/view1'});
});

another question is: why in the first example there is '$routeProvider' injection before the function? as i understand the function($routProvider) should do this job.

thanks.

• javascript
• node.js
• angularjs

Share Improve this question Follow edited Aug 2, 2013 at 11:31 Henrik Andersson 47.3k1616 gold badges100100 silver badges9494 bronze badges asked Aug 2, 2013 at 11:12 lobengula3rdlobengula3rd 1,86155 gold badges2727 silver badges3939 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Your code works just fine (plnkr), but you misspelled redirectTo so the initial redirect to /view1 didn't work.

With regard to explicitly injecting $routeProvider: using the explicit version of injection prevents issues with variable renaming when you minify your JS code for production use. For instance, without being explicit, your code might be minified into something like this:

a.config(function(b) { b.when('/view1', ...) });

Since Angular depends the name of the argument to inject the correct provider, you can explicitly name it as a string (which won't get minified):

a.config([ '$routeProvider', function(b) { ... } ]);

That way, Angular knows the first argument should be $routeProvider.

You are super close. You do need to include the $routeprovider. This should work for you.

angular.module('myApp', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            when('/view1', {
                controller: 'MyCtrl1',
                templateUrl: 'partials/partial1.html'
            }).
            when('/view2', {
                controller: 'MyCtrl2',
                templateUrl: 'partials/partial2.html'
            }).
            otherwise({
                redirectTo: '/view1'
            });
    }]);

This should work!

angular.module('myApp', [])
    .config(function($routeProvider) {
        $routeProvider.when('/view1', {
                controller: 'MyCtrl1',
                templateUrl: 'partials/partial1.html'
            });
        $routeProvider.when('/view2', {
                controller: 'MyCtrl2',
                templateUrl: 'partials/partial2.html'
            });
        $routeProvider.otherwise({
            redirectTo: '/view1'
        });
    });

本文标签： javascriptrouteProvider will not work as should beStack Overflow