How do I change rootScope into Service in Angular?

Question

I am new to Angular and still learning.

I would like to know how do I convert it to a service? I find writing both setStatus on NavController and HeaderController seems quite wrong, are there any better way working for this one?

Scenario

When the user click on close button, the whole nav which with background will be displayed none while when the user clicked on menu button, nav will get a class of is-active which makes the nav displayed block.

JS

var app = angular.module('myapp', ['ngRoute']);

app.controller('NavController', function($rootScope, $scope) {
    $rootScope.status = 'off';
    this.setStatus = function(status) {
        $rootScope.status = status;
    };
});

app.controller('HeaderController', function($rootScope, $scope) {
    this.setStatus = function(status) {
        $rootScope.status = status;
    };
});

DOM

<div ng-app="myapp">
  <nav ng-controller="NavController as nav" ng-class="{ 'is-active': status == 'on' }" ng-init="nav.status" class="nav">
    <div class="nav__wrapper">
      <button ng-click="nav.setStatus('off')" class="nav__close">close</button>
    </div>
  </nav>

  <header ng-controller="HeaderController as header">
    <button ng-click="header.setStatus('on')">menu</button>
  </header>
</div>

Any help would be greatly appreciated, thank you!

For the fiddle to work (at least not fail with unknown module), click the Javascript options in the Javascript pane and select "Load type: No wrap - in < body >" — Nikos Paraskevopoulos, Dec 30 '15 at 11:59

score 1 · Accepted Answer · edited May 23 '17 at 10:27

There are couple of things which caused the issue on JSFiddle

The angular js library was being loaded onload which is parsing the script way before the module myapp defined, so the LoadType on JSFiddle should be No Wrap-in<body>
The styles which has been dumped in JSFiddle needs to be RAW CSS & not less/sass, since JSFIddle would not parse those to CSS.

I corrected those things & your JSFiddle worked smoothly ;)

Running JSFiddle link

Now, regarding the actual issue of moving the common/sharable data to factory /service is achieved by creating a simple factory module like below & referring it all controllers

JS CODE:

myApp.factory('Data', function () {
   return { FirstName: '' };
});

myApp.controller('FirstCtrl', function ($scope, Data) {
   $scope.Data = Data;
});

myApp.controller('SecondCtrl', function ($scope, Data) {
   $scope.Data = Data;
});

HTML CODE:

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="Data.FirstName">
  <br>Input is : <strong>{{Data.FirstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{Data.FirstName}}
</div>

Live Demo using factory/service @ JSFiddle

Note: Using $rootScope for defining a global object like in your current code itself is a decent way of doing things, but anyway the same can be achieved using defining a new factory module like above.

References :

Using $rootScope : How do I use $rootScope in Angular to store variables?
using service/factory module : Share data between AngularJS controllers

thank you, changed on the original post. Although my main issue is how to convert the rootScope into service. — whalesingswee, Dec 30 '15 at 13:05
thanks again, I used custom directive instead, seems like that's the perfect way to use it instead of using service/factory without any datas sharing anyway. — whalesingswee, Jan 15 '16 at 15:38

How do I change rootScope into Service in Angular?

1 Answers1