Angular: Services and Controllers

http://angularjs.org/

by JuanMa Garrido

HTML

<div >
 <h1>Services</h1>
  <div ng-controller="ListCtrl as list">
    <p ng-repeat="message in list.messages">{{ message.id }}: {{ message.text }}</p>
  </div>
</div>

<div ng-controller="PostCtrl as post">
  <form ng-submit="post.addMessage(post.newMessage)">
    <input type="text" ng-model="post.newMessage">
    <button type="submit">Add Message</button>
  </form>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

/* SERVICE: messagesSrvc */
myApp.factory('messagesSrvc', function() {
  var messages = {};
  messages.list = [];
  messages.add = function(message){
    messages.list.push({id: messages.list.length, text: message});
  };
  return messages;
});

/* CONTROLLER: ListCtrl */
var ListCtrl = function(messagesSrvc) {
    this.messages = messagesSrvc.list;
}
myApp.controller('ListCtrl', ListCtrl);

/* CONTROLLER: PostCtrl */
var PostCtrl =  function (messagesSrvc){
  this.newMessage = 'Hello World!';
  this.addMessage = function(message) {
    messagesSrvc.add(message);
    this.newMessage = '';
  }
}
myApp.controller('PostCtrl', PostCtrl);