What is the purpose of installing $ rootScope. $ State = $ state; with angular -ui ui-router?

My code has the following:

var app = angular.module('app', ['admin', 'home', 'questions', 'ui.compat', 'ngResource', 'LocalStorageModule']); app.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) { $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; $state.transitionTo('home'); }]); 

Can someone explain what the two lines starting with $ rootScope do. Are they needed?

+3
source share
3 answers

This comment is taken from the source code sample on the github project pages:

It is very convenient to add links to $ state and $ stateParams to $ rootScope so that you can access them from any area of ​​the application. For example, <li ng-class="{ active: $state.includes('contacts.list') }"> sets <li> active when "contacts.list" or one of its divisions is active.

You can check it out here .

+3
source

I do not think this is standard code. The only reason I see that they are added to you by rootScope is to make it easier to bind in the html view everywhere. If you want to bind any property of $ state or $ stateParams, you will need to enter the service $tate and $stateParams in the controller. Ideally, this should be entered into controllers that require this service.

If you remove it, any html binding that depends on it will fail. Search html views for bindings named $state and $stateParams and you will find where they are used.

+1
source

so that you can pass $ state and $ stateParams values ​​to your root controller and have access to them

usage example: ng-click="$state.transitionTo('stateName', $stateParams)"

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#note-about-using-state-within-a-template

0
source

All Articles