CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui-router
Matoy
Matoy

Reputation: 1808

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

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

Upvotes: 0

Views: 97

Answers (1)

Kishor Sharma
Kishor Sharma

Reputation: 599

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>

Upvotes: 2

Related Questions