JoLuGaMa Blog

Amante de la tecnología y las cosas bien hechas

TopPeliculas: Angularjs Y Rest

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
  • Instalamos las dependencias necesarias
  • 1
    
    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
    1
    
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    
  • Modificamos index.html, concretamente
  • 1
    2
    3
    4
    5
    6
    7
    8
    
    <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.
    1
    2
    3
    4
    5
    6
    7
    
    <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í
  • 1
    2
    3
    4
    5
    6
    7
    8
    
    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á
    1
    
    <script src="app.js"></script>
    
    quitamos los script view que vienen por defecto y añadimos este
    1
    
    <script src="scripts/controllers/lista.js"></script>
    
    La estructura ya está hecha!
  • Para ejecutar el servidor
  • 1
    
    npm start
    
    Desde un nevegador, escribimos http://localhost:8000/app/

Comentarios