Angular Service

Best practice for$http

by Alejandro Lasebnik

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>

<body ng-app="ProfileApp" data-ng-controller="ProfileCtrl">
<form id="form1">

<div class="container">
  <h1>Angular $http best practice use</h1>
  <p>Creation Date: March 03, 2016</p>          
</div>

	<div class="container">
	<p>
	<div class="row">
	
	<div class="col-sm-3 col-md-3 text-center input-group-lg">
      <select class="form-control"  ng-options="profile.id as profile.full for profile in profiles"
              ng-model="selectedProfileId" ng-change="selectProfile()">
			<option value="">Select Profile</option>
          
			</select>

	</div>
    <div class="col-sm-3 col-md-3 text-center input-group-lg">
			<input ng-model="selectedProfile.name" type="text" placeholder="Profile Name"  class="form-control" />
    </div>
	
	<div class="col-sm-3 col-md-3 text-center input-group-lg">
			<input ng-model="selectedProfile.bio" type="text" placeholder="Bio"  class="form-control" />
    </div>
	<input id="fbprof" type="hidden">

	<div class="col-sm-2 col-md-2 text-center input-group-lg">
	<input type="button" style="color:white; background-color:#3969a9;" value="Create" class="form-control"  
           ng-click="createProfile()" />
	</div>
	
	</div>
	
	

	<p>
</div>
	
<div class="container marketing" style="padding-top:30px; " >


  <div class="row" style="color:#fbfffa;">

	<div class="col-md-4 text-center"  style="background-color:white; margin:12px; padding:12px; text-align:left;    max-width: 365px;"
         ng-repeat="profile in createdProfiles | filter:filterText">
      <img class="img-circle" ng-src="http://graph.facebook.com/{{profile.fbprof}}/picture">
      <span class="spanbold">{{profile.name}}</span>
      <p style="background-color:red; opacity:0.8;">{{profile.bio}}</p>
    </div>

  </div><!-- /.row -->

</div><!-- /.container...

CSS

.container {
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color: lightblue;
}
    .img-circle {
  border-radius: 50%;
  width:80px; height:80px;
        margin-bottom: 10px;
}
    
    .spanbold
{
 margin-left: 20px;
 font-size: 20px;
color: #333;
}

p
{
  padding-left:5px;
}

JavaScript

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

App.controller("ProfileCtrl", ['$scope','ProfileService', function ($scope, ProfileService){
    $scope.selectedProfileId = null;
	$scope.profiles = [];
    $scope.createdProfiles = [];
    $scope.selectedProfile = {};
    

	  ProfileService.getProfileList().then(function(data) {
      $scope.profiles = data;
      }).catch(function() {
        $scope.error = 'unable to get the profiles';
        alert($scope.error);
      });
    
    $scope.selectProfile = function() {
        ProfileService.getProfileDetails($scope.selectedProfileId).then(function(data)
        {
            $scope.selectedProfile.name = data.full;
            $scope.selectedProfile.bio = data.bio;
            $scope.selectedProfile.fbprof = data.fbprof;
            
        }).catch(function(){
            $scope.error = 'error receiving profile details';
            alert($scope.error);
        })
    };
    
    $scope.createProfile = function() {
      
				$scope.createdProfiles.push({
					id: $scope.selectedProfileId,
					name: $scope.selectedProfile.name,
					bio: $scope.selectedProfile.bio,
                    fbprof: $scope.selectedProfile.fbprof
				});
    };
		
	}]);


	App.service('ProfileService',['$http',function($http){
        
        // get facebook profile list.
        /*[{"id":"bill_gates","full":"Bill Gates"},{"id":"barack_obama","full":"Barack Obama"},{"id":"mark_zuckerberg","full":"Mark Zuckerberg"},{"id":"marissa_mayer","full":"Marissa Mayer"}]
        */
                this.getProfileList = function() {
                    return $http.get('//duda-api-test.herokuapp.com/profiles').then(function(response) {    
                        return response.data;
                    });
                }
                
                this.getProfileDetails = function(profileid) {
                    return $http.get('//duda-api-test.herokuapp.com/profile/' + profileid).then(function(response) {    
                       ...