Skip to content

Commit 0387637

Browse files
axulaxul
committed
Agregado proveedor de rutas y vistas
Se ha agregado una rootscope para secciones, se han agregado vistas y un proveedor de rutas para manejarlas
1 parent 0e4778f commit 0387637

File tree

6 files changed

+102
-50
lines changed

6 files changed

+102
-50
lines changed

‎app/index.html‎

Lines changed: 18 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,64 +9,37 @@
99
<link rel="stylesheet" href="styles/styles.css"/>
1010
</head>
1111
<body ng-app="angularFromScratch" ng-controller="PrincipalCtrl as principal">
12-
<div class="container">
12+
<div class="container container-principal">
1313
<div class="row">
1414
<div class="col-xs-12">
15-
<h1>{{principal.tituloApp}}</h1>
16-
</div>
17-
</div>
18-
<div class="row">
19-
<div ng-controller="ContactosCtrl as contactos" class="container contactos-container">
20-
<div class="row">
21-
<div class="col-xs-12">
22-
<h2>Lista Contactos</h2>
15+
<div class="navbar navbar-default">
16+
<div class="navbar-header">
17+
<a class="navbar-brand" href="#">{{globales.tituloApp}}</a>
2318
</div>
24-
</div>
25-
<div class="row" ng-show="!contactos.isPerfilActivo()">
26-
<div class="col-xs-12">
27-
<input type="text" ng-model="busqueda" class="form-control" placeholder="Filtrar resultados" ng-change="contactos.mostrarPerfil(-1)">
28-
</div>
29-
</div>
30-
<table class="table table-hover table-striped table-clickable" ng-show="!contactos.isPerfilActivo(-1)">
31-
<thead>
32-
<tr class="row">
33-
<th class="col-xs-3">Icono</th>
34-
<th class="col-xs-3">Nombre</th>
35-
<th class="col-xs-3">Apellido</th>
36-
<th class="col-xs-3">Contacto</th>
37-
</tr>
38-
</thead>
39-
<tbody>
40-
<tr ng-repeat="contacto in contactos.contactosArray | filter:busqueda" class="row" ng-click="contactos.mostrarPerfil($index)">
41-
<td class="col-xs-3" ng-bind-html="contacto.icon"></td>
42-
<td class="col-xs-3">{{contacto.nombre}}</td>
43-
<td class="col-xs-3">{{contacto.apellido}}</td>
44-
<td class="col-xs-3"><a target="_blank" ng-href="https://twitter.com/{{contacto.contacto}}">{{contacto.contacto}}</a></td>
45-
</tr>
46-
</tbody>
47-
</table>
48-
<div class="container" ng-controller="PerfilCtrl as perfil" ng-show="contactos.isPerfilActivo()">
49-
<div class="row">
50-
<div class="col-xs-8">
51-
<h3>Perfil de {{contactos.contactosArray[contactos.perfilActivo].nombre}}</h3>
52-
<span class="img-thumbnail perfil-thumb text-center" ng-bind-html="contactos.contactosArray[contactos.perfilActivo].icon"></span>
53-
</div>
54-
<div class="col-xs-4 text-right">
55-
<h3 ng-click="contactos.mostrarPerfil(-1)" class="btn btn-default">
56-
<span class="glyphicon glyphicon-chevron-left"></span>
57-
<span>volver</span>
58-
</h3>
59-
</div>
19+
<div class="navbar-collapse collapse">
20+
<ul class="nav navbar-nav">
21+
<li ng-class="{'active':globales.seccionActual=='Contactos'}"><a href="#contactos">Contactos</a></li>
22+
<li ng-class="{'active':globales.seccionActual=='Acerca de'}"><a href="#acercade">Acerca de</a></li>
23+
</ul>
6024
</div>
6125
</div>
6226
</div>
6327
</div>
28+
<div class="row">
29+
<div class="col-xs-12">
30+
<h2>{{globales.seccionActual}}</h2>
31+
</div>
32+
</div>
33+
<div class="row">
34+
<div ng-view class="container contactos-container"></div>
35+
</div>
6436
<div class="row">
6537

6638
</div>
6739
</div>
6840
<script src="bower_components/fastclick/lib/fastclick.js"></script>
6941
<script src="bower_components/angular/angular.min.js"></script>
42+
<script src="bower_components/angular-route/angular-route.js"></script>
7043
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
7144
<script src="scripts/app.js"></script>
7245
<script src="scripts/controladores.js"></script>

‎app/scripts/app.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
'use strict';
22
var app = angular.module('angularFromScratch', [
3+
'ngRoute',
34
'ngSanitize',
45
'app.controladores'
5-
]);
6+
])
7+
.config(['$routeProvider', function($routeProvider) {
8+
$routeProvider.when('/contactos', {templateUrl: 'views/contactos.html', controller: 'ContactosCtrl as contactos'});
9+
$routeProvider.when('/acercade', {templateUrl: 'views/acercade.html', controller: 'AcercaDeCtrl as acercade'});
10+
$routeProvider.otherwise({redirectTo: '/contactos'});
11+
}]);
12+
13+
app.run(['$rootScope',function($rootScope){
14+
$rootScope.globales = {};
15+
$rootScope.globales ={
16+
tituloApp : 'Angular from scratch',
17+
seccionActual : ''
18+
};
19+
}]);

‎app/scripts/controladores.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use strict';
22
angular.module('app.controladores', [])
33
.controller('PrincipalCtrl',['$scope',function($scope){
4-
this.tituloApp = 'Hola AngularJS';
4+
55
}])
6-
.controller('ContactosCtrl',['$scope',function($scope){
6+
.controller('ContactosCtrl',['$scope','$rootScope',function($scope,$rootScope){
77
this.perfilActivo = -1;
8-
8+
$rootScope.globales.seccionActual = 'Contactos';
99
this.contactosArray = [
1010
{nombre: 'Axel', apellido: 'Salmeron', contacto: '@axulsr',
1111
icon: '<span class="glyphicon glyphicon-user"></span>',
@@ -41,6 +41,9 @@ angular.module('app.controladores', [])
4141
return (this.perfilActivo==-1) ? false : true;
4242
};
4343
}])
44-
.controller('PerfilCtrl',['$scope',function($scope){
44+
.controller('PerfilCtrl',['$scope','$rootScope',function($scope,$rootScope){
4545
this.perfil = '';
46+
}])
47+
.controller('AcercaDeCtrl',['$scope','$rootScope',function($scope,$rootScope){
48+
$rootScope.globales.seccionActual = 'Acerca de';
4649
}]);

‎app/styles/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,7 @@ body{
1616
}
1717
.perfil-thumb span{
1818
font-size: 90px;
19+
}
20+
.container-principal{
21+
padding-top: 20px;
1922
}

‎app/views/acercade.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="row">
2+
<div class="seccion col-md-3">
3+
<h3>Autor</h3>
4+
<div class="">
5+
<div class="">
6+
<h4><a href="https://plus.google.com/u/0/+axelsalmeron">Axel Salmerón R. </a></h4>
7+
<h4>Twitter <a href="https://twitter.com/aXulsr">@aXulsr</a> </h4>
8+
<h4>GitHub <a href="https://github.com/axul"> Perfil</a></h4>
9+
<h4>SirIdeas Web <a href="https://sirdieas.com">Home</a></h4>
10+
</div>
11+
</div>
12+
</div>
13+
<div class="seccion col-md-6">
14+
<h3>AngularJs</h3>
15+
<div>
16+
<h4>Home <a href="https://angularjs.org/">AngularJS</a></h4>
17+
<h4>API <a href="https://docs.angularjs.org/api">Api reference</a></h4>
18+
<h4>Guía para desarrolladores <a href="https://docs.angularjs.org/guide">Guía</a></h4>
19+
<h4>Curso de Codeschool.com <a href="http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro">Shaping up with Angularjs</a></h4>
20+
</div>
21+
</div>
22+
</div>

‎app/views/contactos.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div class="row" ng-show="!contactos.isPerfilActivo()">
2+
<div class="col-xs-12">
3+
<input type="text" ng-model="busqueda" class="form-control" placeholder="Filtrar resultados" ng-change="contactos.mostrarPerfil(-1)">
4+
</div>
5+
</div>
6+
<table class="table table-hover table-striped table-clickable" ng-show="!contactos.isPerfilActivo(-1)">
7+
<thead>
8+
<tr class="row">
9+
<th class="col-xs-3">Icono</th>
10+
<th class="col-xs-3">Nombre</th>
11+
<th class="col-xs-3">Apellido</th>
12+
<th class="col-xs-3">Contacto</th>
13+
</tr>
14+
</thead>
15+
<tbody>
16+
<tr ng-repeat="contacto in contactos.contactosArray | filter:busqueda" class="row" ng-click="contactos.mostrarPerfil($index)">
17+
<td class="col-xs-3" ng-bind-html="contacto.icon"></td>
18+
<td class="col-xs-3">{{contacto.nombre}}</td>
19+
<td class="col-xs-3">{{contacto.apellido}}</td>
20+
<td class="col-xs-3"><a target="_blank" ng-href="https://twitter.com/{{contacto.contacto}}">{{contacto.contacto}}</a></td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
<div class="container" ng-controller="PerfilCtrl as perfil" ng-show="contactos.isPerfilActivo()">
25+
<div class="row">
26+
<div class="col-xs-8">
27+
<h3>Perfil de {{contactos.contactosArray[contactos.perfilActivo].nombre}}</h3>
28+
<span class="img-thumbnail perfil-thumb text-center" ng-bind-html="contactos.contactosArray[contactos.perfilActivo].icon"></span>
29+
</div>
30+
<div class="col-xs-4 text-right">
31+
<h3 ng-click="contactos.mostrarPerfil(-1)" class="btn btn-default">
32+
<span class="glyphicon glyphicon-chevron-left"></span>
33+
<span>volver</span>
34+
</h3>
35+
</div>
36+
</div>
37+
</div>

0 commit comments

Comments
 (0)