$rootScope undefined in an easy AngularJs Routing Demo

Question

$rootScope undefined in an easy AngularJs Routing Demo

I've been trying to access the name and age using $scope and $rootScope, but I keep getting an error even though I'm pretty sure everything is set up correctly. Can someone please point out where I might be making a 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:

https://i.sstatic.net/4OCoC.png

javascript angularjs rootscope

Answer 1

Answer №1

Check out the documentation to see that the 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
});

However, in your code

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

The first parameter is a string instead of a function.

Therefore, you should remove it, or if you want to use the injectable syntax, wrap it in an array like this:

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

It appears that you have another error: you are using the $state provider, which is not part of the ngRoute module but rather part of ui-router. Even when the run block is executed, the current route might not be defined.

Here is a working sample without any unnecessary elements:

//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>

Answer 2

Check out the documentation to see that the 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
});

However, in your code

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

The first parameter is a string instead of a function.

Therefore, you should remove it, or if you want to use the injectable syntax, wrap it in an array like this:

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

It appears that you have another error: you are using the $state provider, which is not part of the ngRoute module but rather part of ui-router. Even when the run block is executed, the current route might not be defined.

Here is a working sample without any unnecessary elements:

//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>

Answer 3

Answer №2

Make sure to include ngRoute as a dependency in your module

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

Answer 4

Make sure to include ngRoute as a dependency in your module

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

Answer 5

Answer №3

The angular().run() code snippet shows how $rootScope and $state are injected.

app.run('rootScope',function($rootScope,$state){
    if($state.current.name == 'one'){$rootScope.age = 25;}
    if($state.current.name == 'two'){$rootScope.age = 30;}
});

It's important to note that $state cannot be injected since it is not part of the ngRoute module.

Answer 6

The angular().run() code snippet shows how $rootScope and $state are injected.

app.run('rootScope',function($rootScope,$state){
    if($state.current.name == 'one'){$rootScope.age = 25;}
    if($state.current.name == 'two'){$rootScope.age = 30;}
});

It's important to note that $state cannot be injected since it is not part of the ngRoute module.

Answer 7

Answer №4

Spelling mistake found,

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

corrected version should read as

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

Answer 8

Spelling mistake found,

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

corrected version should read as

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

$rootScope undefined in an easy AngularJs Routing Demo

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

jQuery ajax issue: Unable to locate file using relative path

Unable to capture user input text using $watch in AngularJS when applied on ng-if condition

Having trouble launching the freshly developed Angular app

Generating a new array based on the keys found in a collection of objects

Tips to prevent the @click event from firing on a specific child component

Running SOAP services with Jasmine framework in Node.js: A step-by-step guide

Encountering challenges with implementing debouncing functionality in React programming

AngularJs Application Encountering Issues with Loading/Installing Google Maps API

Oops! We encountered an internal issue: MongooseError: The operation `posts.insertOne()` has exceeded the buffering time limit of 100

transmitting a CSV file from PHP to the web browser

Angular - service workers leading to unsuccessful uploads

Reload the Angular application and navigate to a different state

Node.js express version 4.13.3 is experiencing an issue where the serveStatic method is not properly serving mp3 or

Easily transform your Twitter Bootstrap menu dropdown to appear on hover instead of click with this simple solution

What is the best way to trigger the opening of a Component upon an onPress event?

Is there a way to add a sub-heading into the side menu?

What is the best way to handle newline characters ( ) when retrieving text files using AJAX?

Sending JSON data from AngularJS to Laravel Controller through POST request

exploring the ins and outs of creating computed properties in TypeScript

Accessing the camera or photo library in React Native does not require any permissions