Using a built-in AngularJs service http

by Akram kamal

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

// http://blog.pluralsight.com/angularjs-step-by-step-services
//
var myModule = angular.module('myModule', []);

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

});

myModule.factory('userRepository', function($http) {
    return {
        getAllUsers: function() {
            var url = "https://api.mongolab.com/api/1/databases/angularjs-intro/collections/users?apiKey=terrPcifZzn01_ImGsFOIZ96SwvSXgN9";
            return $http.get(url);
        }
    };
});