$routeProvider will not work as should be

Question!

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.



Answers
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'
        });
    });
By : JPN


This video can help you solving your question :)
By: admin