using angular service in order to share data between ng-view's pages

Question

I am trying to build a single page web application using angular.

I have these 3 files below: script.js, index.html and about.html.

I want the about.html to use a service in order to change a shared value (to all the other pages i.e. contact.html) using angular service.

I want this service to have a value (message) that can be access via all the pages and once one page changes this value, all the other pages will be aware of this new value...

for some reason the code below doesn't work for that...

why?

script.js

var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl : 'pages/home.html',
    controller  : 'SharedController'
  }) 
  .when('/about', {
    templateUrl : 'pages/about.html',
    controller  : 'SharedController'
  })
  .when('/contact', {
    templateUrl : 'pages/contact.html',
    controller  : 'SharedController'
  });
});

scotchApp.factory('myService', function() {
 var savedData = {}
 function set(data) {
   savedData = data;
 } 
 function get() {
  return savedData;
}

return {
  set: set,
  get: get
}

});

scotchApp.controller('SharedController', ['$scope', 'myService', function($scope, myService) { 
  myService.set('hello');
  $scope.message = myService.get();
}]);

index.html

 <!DOCTYPE html>
 <html>
 <head>

  <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9">
  </script>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
  <script src="script.js"></script>
</head>
<body>

  <ul>
    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
  </ul>

  <div ng-app="scotchApp" ng-view>
  </div>

</body>
</html>

and about.html

<div class="jumbotron text-center">
    <h1>old value</h1>
    <script type="text/javascript">
        myService.set('hello');
        $scope.message = myService.get();
    </script>
    <p>{{ message }}</p>
</div>

I

This is how i have implemented similarly: mattharris.org/2016/02/… — morissette
– morissette, Commented Jun 25, 2016 at 20:45

Kishor Sharma · Accepted Answer · 2016-06-26 06:03:00Z

Edit 1: You cannot use service directly from view as far as I know. You have to go through controller. As you wanted the user to choose a value say by ng click I would do somthing like:

about.html:

<div class="jumbotron text-center">
  <h1>old value</h1>
  <p>{{ message }}</p>
  <button type="button" ng-click="updateMsg('I am in about')">Click Me</button>
</div>

Controller:

scotchApp.controller('AboutController', ['$scope', '$routeParams', 'myService',
                function($scope, myService) { 


  $scope.updateMsg = function (msg) {
    myService.set(msg);
    $scope.message = myService.get();
  }

}]);

Original:

I would suggest to make different controller for each page. however, One thing you should note and which will not work is you javascript in about.html which is accessing myService as angular does not know/injected service here. What you could have done is:

scotchApp.controller('AboutController', ['$scope', '$routeParams', 'myService',
                function($scope, myService) { 

  myService.set('About');
  $scope.message = myService.get();

}]);

and you route will change to:

.when('/about', {
  templateUrl : 'pages/about.html',
  controller  : 'AboutController'
})

and about.html:

<div class="jumbotron text-center">
  <h1>old value</h1>
  <p>{{ message }}</p>
</div>

Thanks. Tried that before. Problem is that i want the user to choose a value say by ng form and ng click... that is why i dont want to use this service in the controller but in the view itself...

Collectives™ on Stack Overflow

using angular service in order to share data between ng-view's pages

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related