Serivico para consumir los json

Agregado el servicio $http de angularjs para traer los json al modelo de
la pp

Author: axul

app/data/contactos.json

@@ -0,0 +1,44 @@
+[
+  {
+    "nombre": "Axel",
+    "apellido": "Salmeron",
+    "contacto": "@axulsr",
+    "icon": "<span class='glyphicon glyphicon-user'></span>",
+    "thumb": ""
+  },
+  {
+    "nombre": "Guillermo",
+    "apellido": "Seminario",
+    "contacto": "@gjseminario",
+    "icon": "<span class='glyphicon glyphicon-user'></span>",
+    "thumb": ""
+  },
+  {
+    "nombre": "Alexander",
+    "apellido": "Rondón",
+    "contacto": "@arondn2",
+    "icon": "<span class='glyphicon glyphicon-user'></span>",
+    "thumb": ""
+  },
+  {
+    "nombre": "José",
+    "apellido": "Salazar",
+    "contacto": "@jslzrt",
+    "icon": "<span class='glyphicon glyphicon-user'></span>",
+    "thumb": ""
+  },
+  {
+    "nombre": "Marlys",
+    "apellido": "Villafranca",
+    "contacto": "@MarlysitaV",
+    "icon": "<span class='glyphicon glyphicon-user'></span>",
+    "thumb": ""
+  },
+  {
+    "nombre": "Katrina",
+    "apellido": "Ortiz",
+    "contacto": "@KatrinaOrtiz",
+    "icon": "<span class='glyphicon glyphicon-user'></span>",
+    "thumb": ""
+  }
+]

app/index.html

@@ -41,6 +41,7 @@ <h2>{{globales.seccionActual}}</h2>
   <script src="bower_components/angular/angular.min.js"></script>
   <script src="bower_components/angular-route/angular-route.js"></script>
   <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
+  <script src="bower_components/angular-resource/angular-resource.js"></script>
   <script src="scripts/app.js"></script>
   <script src="scripts/controladores.js"></script>
 </body>

app/scripts/app.js

@@ -2,6 +2,7 @@
 var app = angular.module('angularFromScratch', [
 	'ngRoute',
 	'ngSanitize',
+	'ngResource',
 	'app.controladores'
 ])
 .config(['$routeProvider', function($routeProvider) {

app/scripts/controladores.js

@@ -3,35 +3,13 @@ angular.module('app.controladores', [])
 .controller('PrincipalCtrl',['$scope',function($scope){
 
 }])
-.controller('ContactosCtrl',['$scope','$rootScope',function($scope,$rootScope){
+.controller('ContactosCtrl',['$scope','$rootScope','$http',function($scope,$rootScope,$http){
 	this.perfilActivo = -1;
 	$rootScope.globales.seccionActual = 'Contactos';
-	this.contactosArray = [
-		{nombre: 'Axel', apellido: 'Salmeron', contacto: '@axulsr',
-		icon: '<span class="glyphicon glyphicon-user"></span>',
-		thumb:''},
 
-		
-		{nombre: 'Guillermo', apellido: 'Seminario', contacto: '@gjseminario',
-		icon: '<span class="glyphicon glyphicon-user"></span>',
-		thumb:''},		
-		
-		{nombre: 'Alexander', apellido: 'Rondón', contacto: '@arondn2',
-		icon: '<span class="glyphicon glyphicon-user"></span>',
-		thumb:''},
-		
-		{nombre: 'José', apellido: 'Salazar', contacto: '@jslzrt',
-		icon: '<span class="glyphicon glyphicon-user"></span>',
-		thumb:''},
-		
-		{nombre: 'Marlys', apellido: 'Villafranca', contacto: '@MarlysitaV',
-		icon: '<span class="glyphicon glyphicon-user"></span>',
-		thumb:''},
-		
-		{nombre: 'Katrina', apellido: 'Ortiz', contacto: '@KatrinaOrtiz',
-		icon: '<span class="glyphicon glyphicon-user"></span>',
-		thumb:''}
-	];
+	$http.get('data/contactos.json').success(function (data) {
+		$scope.contactosArray = data;
+	});
 
 	this.mostrarPerfil = function(indice){
 		this.perfilActivo = indice;

app/views/contactos.html

@@ -13,7 +13,7 @@
     </tr>
   </thead>
   <tbody>
-    <tr ng-repeat="contacto in contactos.contactosArray | filter:busqueda" class="row" ng-click="contactos.mostrarPerfil($index)">
+    <tr ng-repeat="contacto in contactosArray | filter:busqueda" class="row" ng-click="contactos.mostrarPerfil($index)">
       <td class="col-xs-3" ng-bind-html="contacto.icon"></td>
       <td class="col-xs-3">{{contacto.nombre}}</td>
       <td class="col-xs-3">{{contacto.apellido}}</td>
@@ -25,7 +25,7 @@
   <div class="row">
     <div class="col-xs-8">
       <h3>Perfil de {{contactos.contactosArray[contactos.perfilActivo].nombre}}</h3>
-      <span class="img-thumbnail perfil-thumb text-center" ng-bind-html="contactos.contactosArray[contactos.perfilActivo].icon"></span>
+      <span class="img-thumbnail perfil-thumb text-center" ng-bind-html="contactosArray[contactos.perfilActivo].icon"></span>
     </div>
     <div class="col-xs-4 text-right">
       <h3 ng-click="contactos.mostrarPerfil(-1)" class="btn btn-default">