AngularJS Step-by-Step: Services

AngularJS Step-by-Step: Services

HTML

<body ng-app="myModule" ng-controller="myController">
    <input type="text" ng-model="user.firstName"/>
    <div>Hello, {{user.firstName}}!</div>
    
    <div ng-repeat="user in users | filter:user">
         {{user.firstName}} {{user.lastName}} - Age: {{user.age}}
    </div>
    
    <button ng-click="changeFirstUsersFirstName()">Change Name</button>

</body>

JavaScript

// AngularJS Step-by-Step: Services
// http://blog.pluralsight.com/angularjs-step-by-step-services

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

myModule.controller('myController', function($scope, userRepository) {
    $scope.users = userRepository.getAllUsers();
    
    $scope.changeFirstUsersFirstName = function() {
        $scope.users[1].firstName = 'Jill'
    }

});

myModule.factory('userRepository', function() {
   return {getAllUsers: function() {
       return [
          { firstName: 'Jane', lastName: 'Doe', age: 29 },
          { firstName: 'John', lastName: 'Doe', age: 32 }
       ];
    }
 };
 });