AngularJs - TopPeliculas: Usando api

Publicado: 22 Febrero 2015 por José Luis García Martínez

Categorías:
Tutorial 26

Para ello usaremos angular-seed, aplicación esqueleto para AngularJs. Puedes usarlo para crear proyectos bootstrap y angular rápidamente.

Con este proyecto inicial, echaremos de menos yeoman (y su 'yo angular'). El esqueleto de Angular-seed es altamente simple. Hay que hacer una serie de modificaciones en la estructura.

Web angular seed (web oficial)

Código fuente TopPeliculas en github

Acceder a la aplicación

Pasos para la creación del proyecto

Creamos una carpeta y dentro escribimos

 git clone https://github.com/angular/angular-seed.git

Instalamos las dependencias necesarias

 npm install

Usaremos las librerías bootstrap. Para ello accede a http://www.bootstrapcdn.com/
En app/index.html añadimos dentro de head, al principio de las cargas css

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

Modificamos index.html, concretamente

<ul class="menu">
  <li><a href="#/view1">view1</a></li>
  <li><a href="#/view2">view2</a></li>
</ul>

<div ng-view></div>

<div>Angular seed app: <span app-version></span></div>

por este código, que tiene el contenedor por defecto de bootstrap.

<div class="container">
  <div class="col-md-12 text-center">
    <a href="#" class="brand">Nuevos Estrenos Cine</a>
  </div>
  <hr>
  <div ng-view></div> 
</div>

Esto modificará el aspecto de la web por defecto, en todas las vistas.

Mueve la carpeta bower_componentes dentro de app
Creación de rutas: En app/app.js modificamos el archivo, añadimos las routeProvider aquí

angular.module('myApp', [
'ngRoute',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/',{templateUrl:'views/lista.html', controller: 'ListaCtrl'})
$routeProvider.otherwise({redirectTo: '/'});
}]);

Modificamos un poco la estructura por defecto
Borramos las carpetas view1 y view2, creamos carpetas views y controllers y luego:
- views/lista.html
- scripts/controllers/lista.js
- scripts/services/miservicio.js
- scripts/directives
Añadimos controladores y servicios a index.html Debajo donde está

<script src="app.js"></script>

quitamos los script view que vienen por defecto y añadimos este

<script src="scripts/controllers/lista.js"></script>

La estructura ya está hecha!

Para ejecutar el servidor

npm start

Desde un nevegador, escribimos http://localhost:8000/app/

... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.