How can i get values from $stateChanges

Question

Please Helpme How can i get values from $statechangeStart and $stateChaneSuccess

MyApp.js

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
          $scope.IsLoading = true;

    })
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
           $scope.IsLoading = False;
    })
})

Home.js

///Here How can i use IsLoading

You have to use **$rootScope** to reflect change in your application. — Immanuel Kirubaharan, Dec 07 '17 at 07:14
Don't use $rootScope, it will work but better to define your own provider — shaunhusain, Dec 07 '17 at 07:15

score 2 · Accepted Answer · answered Dec 07 '17 at 07:18

Use providers (generally a service or factory, maybe a .value) to define things that can be injected into controllers.

https://docs.angularjs.org/guide/providers

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Best practice for using $rootscope in an Angularjs application?

angular.module('myapp',[])
  .value('SharedObject', {isLoading:true})
  .run(function($timeout, SharedObject){
    $timeout(function(){SharedObject.isLoading = false}, 2000);
  })
  .controller('MyCtrl', function(SharedObject){
    this.SharedObject = SharedObject;
  })

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  </head>

  <body ng-controller="MyCtrl as myctrl">
    {{myctrl.SharedObject}}
  </body>

</html>

No problem thanks for considering the options, will be better off in the long run, good to know you can put things on $rootScope but just better in general to use your own special purpose services (easier to debug/manage as projects grow too and keep all shared functionality, basically everything in factories/services so you can keep it DRY [don't repeat yourself]) — shaunhusain, Dec 07 '17 at 07:28

score 0 · Answer 2 · answered Dec 07 '17 at 07:17

Because you are adding this logic in the run function, you'll want to set the isLoading property on the $rootScope object, not the $scope object, which does not exist in this context:

app.run(function ($rootScope) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
        $rootScope.isLoading = true;

    });
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
        $rootScope.isLoading = false;
    });
});

Then, in your template that has access to $rootScope, you can show a loading screen by using ngIf, which conditionally adds elements to the DOM:

<div ng-if="isLoading" class="loading-screen">
    Loading...
</div>

Don't think it's generally good practice to dump everything into $rootScope it becomes a global space which is a mess to manage, only use it for broadcasting events or listening for events that are broadcast on rootscope really (or applying a digest cycle in some cases but most of the time people do that when they shouldn't too) — shaunhusain, Dec 07 '17 at 07:19

How can i get values from $stateChanges

2 Answers2