https://angularjs.org/

¿Que es Angular?

Es un framework de JavaScript de código abierto, mantenido por Google, que ayuda con la gestión de lo que se conoce como aplicaciones de una sola página

Como Funciona

• ng-app: Nos indica la porción de HTML en donde Angular va a estar activo.
  • ng-controller: Nos indica la porción de HTML en donde el controlador va a estar activo.
    • ng-model: Indica la propiedad del modelo que un input, select o textarea representa.
    • ng-repeat: Genera una instancia de un template una vez por cada elemento de un array
    • ng-click: Ejecuta una función definida en el modelo, cuando se hace click sobre un elemento.
    • ng-submit:  Ejecuta una función definida en el modelo, cuando se hace submit en un formulario.
    • ng-if: Elimina o reinserta parte del DOM de acuerdo a una expresión.

Extendiendo HTML

• var module = angular.module('MiModulo', [ <array de dependencias> ])
  Define un módulo. Se especifica en ng-app. Un módulo es una colección de controladores y directivas.
  • module.controller('MiControlador', function($scope, ...) { ... })
    Define el comportamiento de los elementos de la vista. Se especifica en ng-controller.
  • module.config(function(){ ... })
    Permite realizar configuraciones al inicio.
• ui.router: Dependencia de angular encargado de "routing". Es decir que permite visualizar templates de acuerdo a la dirección actual del navegador.
  • $stateProvider: Se inyecta en la configuración de angular y permite configurar las rutas.
• ​$http: Dependencia que se inyecta en el controlador y permite hacer requerimientos a una API.

Javascript

Ejemplos

• http://plnkr.co/edit/cmoEEwtQsqcwJnaDYX6y
• http://plnkr.co/edit/iOyHeNwl0DMjHRq7G5z8
• http://plnkr.co/edit/rhjX5KvH3g6y4Mrp8pxu

Recomendaciones de Instalación

Bower

Yeoman

Gulp

Instalar bower, yeoman y Gulp

sudo npm install -g bower yo gulp

Instalar un generador de yeoman que contenga a angular

sudo npm install -g generator-gulp-angular

mkdir my-new-project && cd $_

yo gulp-angular

Generar el proyecto

Ejercicio

Dada la siguiente api, crear una interfaz para la carga de notas de un sistema de gestión de alumnos.

• Se deben poder realizar todas las operaciones CRUD para personas, materias y parciales.
• Se debe poder listar todas las materias de la persona (ya sea, como alumno o docente).
• Se debe poder cargar las notas de los parciales de una materia.

Crear una interfaz con Angular con las siguientes características:

Ejercicio

1. Crear un listado de personas
2. Se deben utilizar los verbos de HTTP de la siguiente manera: 

Crear una interfaz con Angular con las siguientes características: