AngularJS : basic controller As VM using .service (get & updated)

AngularJS : basic controller As VM using .service (get & updated)

by Daan De Smedt

HTML

<div ng-app="app" ng-controller="BasicController as vm">
  Hello, {{vm.movieTitle}}!<br/><br/>
  <button ng-click="vm.changeTitle()">
    Change title
  </button>
</div>

JavaScript

angular
  .module('app', [])
  .service('MovieService', MovieService)
  .controller('BasicController', BasicController)

function MovieService(){
	this.getTitle = getTitle;
  this.setTitle = setTitle;
  
  var movieTitle = "The Matrix Service";
  
  function getTitle(){
    return movieTitle;
  };
  
  function setTitle(title){
  	movieTitle = title;
  }
  
}

function BasicController(MovieService) {
  /* declare VM */
  var vm = this;
  vm.changeTitle = changeTitle;
  /* set constant to VM */
  vm.movieTitle = MovieService.getTitle();
  /* functions */
  function changeTitle(){
  	MovieService.setTitle('The Matrix Updated');
    vm.movieTitle = MovieService.getTitle();
  };
}