Creación de módulo de controladores

se crea un módulo para los controladores y se inyecta en el módulo
principal

Author: axul

app/index.html

@@ -22,12 +22,12 @@ <h1>{{principal.tituloApp}}</h1>
             <h2>Lista Contactos</h2>
           </div>
         </div>
-        <div class="row">
+        <div class="row" ng-show="!contactos.isPerfilActivo()">
           <div class="col-xs-12">
             <input type="text" ng-model="busqueda" class="form-control" placeholder="Filtrar resultados" ng-change="contactos.mostrarPerfil(-1)">
           </div>
         </div>
-        <table class="table table-hover table-striped table-clickable">
+        <table class="table table-hover table-striped table-clickable" ng-show="!contactos.isPerfilActivo(-1)">
           <thead>
             <tr class="row">
               <th class="col-xs-3">Icono</th>
@@ -69,5 +69,6 @@ <h3 ng-click="contactos.mostrarPerfil(-1)" class="btn btn-default">
   <script src="bower_components/angular/angular.min.js"></script>
   <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
   <script src="scripts/app.js"></script>
+  <script src="scripts/controladores.js"></script>
 </body>
 </html>

app/scripts/app.js

@@ -1,51 +1,5 @@
 'use strict';
 var app = angular.module('angularFromScratch', [
-	'ngSanitize'
-]);
-
-app.controller('PrincipalCtrl',['$scope',function($scope){
-	this.tituloApp = 'Hola AngularJS';
-}]);
-
-app.controller('ContactosCtrl',['$scope',function($scope){
-	this.perfilActivo = -1;
-
-	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:''}
-	];
-
-	this.mostrarPerfil = function(indice){
-		this.perfilActivo = indice;
-	};
-
-	this.isPerfilActivo = function(){
-		return (this.perfilActivo==-1) ?  false : true;
-	};
-}]);
-
-app.controller('PerfilCtrl',['$scope',function($scope){
-	this.perfil = '';
-}]);
+	'ngSanitize',
+	'app.controladores'
+]);

app/scripts/controladores.js

@@ -0,0 +1,46 @@
+'use strict';
+angular.module('app.controladores', [])
+.controller('PrincipalCtrl',['$scope',function($scope){
+	this.tituloApp = 'Hola AngularJS';
+}])
+.controller('ContactosCtrl',['$scope',function($scope){
+	this.perfilActivo = -1;
+
+	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:''}
+	];
+
+	this.mostrarPerfil = function(indice){
+		this.perfilActivo = indice;
+	};
+
+	this.isPerfilActivo = function(){
+		return (this.perfilActivo==-1) ?  false : true;
+	};
+}])
+.controller('PerfilCtrl',['$scope',function($scope){
+	this.perfil = '';
+}]);