AngularJs - TopPeliculas: Usando api

Publicado: por

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/