Angularjs service shafts in all controller templates

Question

I am very new to Angularjs.
I created the Angularjs service to store some of the "global" vars. It looks like this:

.factory('authVars', function() { var sdo = { baseBackendUrl: 'https://www.myurl.com', user: '', password: '', token: '', isLogged: false }; return sdo; }) 

Now I want to use ng-show / hide in different controllers.

 <div class="alert" ng-hide="authVars.isLogged"> <strong>whatEver</strong> </div> 

Is it possible? Or is it better to store this in rootScope?
For a little help I would be very grateful ;-) thanks

Answer 1

Just register your factory for each controller. This is a targeted service for code reuse. A service is like a utility, you write it once and you can use it in many controllers.

Js

 myApp.factory('authVars', function() { var sdo = { baseBackendUrl: 'https://www.myurl.com', user: '', password: '', token: '', isLogged: false }; return { getSdo: function() { return sdo; } }; }) function MyCtrl($scope, authVars) { $scope.authVars = authVars.getSdo(); } 

Fiddle Demo

Answer 2

It is 100% normal to put it at the service! Just remember to enter it in the appropriate controllers:

 var Ctrl = function($scope,authVars){ $scope.authVars = authVars; } 

Example: http://jsfiddle.net/cherniv/pzFrs/2/

Answer 3

you need to enter the service into the controller as shown below.

  app.controller('ctrl',function($scope, authVars){ $scope.authVars=authVars; }); 

Answer 4

Yes, this is possible thanks to the dependency injection system.
You can "implement" this service on every controller where you need it.

Say you have a template like this:

 <div ng-controller="MyController"> <div class="alert" ng-hide="authVars.isLogged"> <strong>whatEver</strong> </div> </div> 

Then you should have such a controller:

 .controller('MyController', function (authVars) { $scope.authVars = authVars; }); 

Answer 5

There are several ways to use constants in angular:

Using angular.constant

 angular.module('myApp.config', []). constant('APP_NAME', 'MyApp'); angular.module('myApp.controllers', ['myApp.config']) .controller('AppCtrl', ['$scope', 'APP_NAME', function($scope, appName) { $scope.val = appName; }]); 

Using angular.value

 angular.module('myApp.config', []). value('config', { appName: 'AppName' }); angular.module('myApp.controllers', ['myApp.config']) .controller('AppCtrl', ['$scope', 'config', function($scope, config) { $scope.val = config.appName; }]); 

Or the way you did this, but the factory is very often used to configure something once before returning the configuration object, for example for $ add some dependencies (for example, $ locale).

In addition, I often use the consts directive to attach constants in the area in which I want:

 angular.module('myApp.config', []). directive('consts', function(config) { return { restrict: 'A', link: function($scope) { $scope.config = config; } } }); 

And then:

 <div consts> <h2>{{config.appName}}</h2> </div>