CODEWITHSUNDEEP
javascriptnode.jsangularjs
lobengula3rd
lobengula3rd

Reputation: 1851

$routeProvider will not work as should be

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.

Upvotes: 0

Views: 4980

Answers (3)

JPN
JPN

Reputation: 683

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'
        });
    });

Upvotes: 0

Zack Argyle
Zack Argyle

Reputation: 8407

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'
            });
    }]);

Upvotes: 0

robertklep
robertklep

Reputation: 203251

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.

Upvotes: 5

Related Questions