Search code examples
javascriptangularjsrootscope

$rootScope not rendered in a simple AngularJs Routing Example

I am trying to access name and age through $scope and $rootScope, but getting error even though I feel I done all correct. Can someone help me out where is the mistake? 

<html>

<head> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script> 

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <a href="#/one">One</a><a href="#/two">Two</a>

    <ng-view></ng-view>

    <script> 
    //app declaration
    var app = angular.module("myApp",['ngRoute']);

    //routing
    app.config(['$routeProvider',function($routeProvider){
        $routeProvider
        .when('/one',{templateUrl:'one.html'})
        .when('/two',{templateUrl:'two.html'})
        .otherwise({templateUrl:'one.html'});
    }]);

    //config 
    app.run(['rootScope', function($rootScope){
        $rootScope.age = 25;
    }]);

    //controller
    app.controller('myCtrl',function($scope, $rootScope){
        $scope.name = "Peter";
    });
    </script> 

</body> 

</html>

one.html

ONE => {{name}},{{age}}

two.html

TWO => {{name}},{{age}}

Updated Error:

enter image description here

Solution

  • You can see in docs, that first parameter should be a function

    run(function(injectables) { // instance-injector
  // This is an example of a run block.
  // You can have as many of these as you want.
  // You can only inject instances (not Providers)
  // into run blocks
});

    But in your code 

    app.run('rootScope',function($rootScope,$state){

    First parameter is string instead function.

    So, just remove it, or if you want use injectable syntax wrap in array

    app.run(['$rootScope','$state',function($rootScope,$state){...}]}

    But seems you have another error: use $state provider, but this provider not a part of ngRoute module, it rather part of ui-router. Any way, when run block executed current route can be not defined.

    Working sample without excess

    //app declaration
var app = angular.module("myApp", ['ngRoute']);

//routing
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/one', {
      template: '<div>one: {{name}} | {{age}}</div>'
    })
    .when('/two', {
      template: 'two: {{name}} | {{age}}'
    })
    .otherwise({
      redirectTo: '/one'
    });
}]);

//config 
app.run(function($rootScope) {
  $rootScope.age = 25;
});

//controller
app.controller('myCtrl', function($scope, $rootScope) {
  $scope.name = "Peter";
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <ng-view></ng-view>
</div>