Angular Talk: 4 - Services

http://angularjs.org/

by boneskull

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<!-- body tag has ng-app="myApp" -->
<div ng-cloak>
<div ng-controller="MyCtrl">
    <h3>Available Toppings</h3>
     <ul ng-repeat="topping in toppings">
         <li>{{topping}} <button ng-click="addTopping(topping)">add topping</button></li>
    </ul>
    
</div>
<br/>
<div ng-controller="SelectedToppingCtrl">
    <h3>Selected Toppings</h3>
    <ul ng-repeat="topping in selected_toppings">
        <li>{{topping}}</li>
    </ul>
</div>
</div>

CSS

li {
    display: list-item;
}

h3 {
    font-weight: bold;
}

JavaScript

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

myApp.controller('MyCtrl', ['$scope', 'Toppings', function($scope, Toppings) {
    $scope.toppings = ['ham', 'olives', 'anchovies'];
    $scope.selected_toppings = Toppings.selected_toppings;
    $scope.addTopping = function(topping) {
        $scope.selected_toppings.push(topping);
    };
}]);

myApp.controller('SelectedToppingCtrl', ['$scope', 'Toppings', function($scope, Toppings) {
    $scope.selected_toppings = Toppings.selected_toppings;
}]);

myApp.service('Toppings', function() {
    this.selected_toppings = [];
});