Skip to content

globant-ui/workshop2016-rosario-angularJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Workshop 2016 AngularJS

Requerimientos previos

  • Computadora con Linux o Windows
  • Git (si estás en Windows usá la consola de Git bash)
  • Node.js 6.0 o superior
  • npm 3.0 o superior

Instrucciones de uso

  • 1 Instalar las dependencias
   npm install
  • 2 Iniciar el server de dev
    npm start

Descripción del proyecto

Con el desarrollo de esta app vas a aprender cómo comunicarte con una api y mostrar esos resultados en diferentes rutas y con componentes acordes a cada tipo de información

Esquema de carpetas

.
├── /src/
│   └── /components/          
│        └── /app/                
│            │── /services/
│            │   └── api.js         # Llamadas a los correspondientes endpoints para conseguir data
│            │── /views             # HTML de los templates de cada componente y pagina
│            │── index.js           
│            └── routes.js          # Rutas para cada pagina y llamadas a su correspondiente endpoint 
└── package.json        
API: Como llamar a endpoints

Usamos la clase ApiService que contiene:

  • url: path del server a usar
  • Métodos que retornan respuestas de cada endpoint

Cada llamada usa una estructura similar a esta:

    getSomething(parameter1) {
        return this.http.get(`${this.url}/endpoint/${parameter1}`)
                    .then(response => response.data);
    } 
   
Router

Estructura de rutas

    .when('/path/:pathParameter/', {
                templateUrl: '/components/app/views/template.html',
                resolve: {
                  characters: ($route, ApiService) =>
                      ApiService.getSomething($route.current.params.pathParameter)
                },
            })

Luego en nuestro template podremos acceder a la data conseguida del server de la siguiente forma:

(Asumiendo que characters es un array con la siguiente estructura:

[{title: 'Mike'}, {title: 'Eleven'}, {title: 'Dustin'}, {title: 'Lucas'}, {title: 'Will'}])
    <h1>Stranger Things Characters:</h1>
    <ul> 
        <li ng-repeat="item in $resolve.characters">
            {{item.title}}
        </li>
    </ul>

Have fun!

About

AngularJS Workshop 2016 - AngularJS Implementation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published