deck

¿Qué es ?

No es jQuery

Utiliza jqlite
Permite la integración con jQuery

Framework MVC

Escalable
Facilita el desarrollo
Código mas limpio

Filosofía

Angular se construye alrededor de la creencia de que el código declarativo es mejor que el imperativo cuando se trata de la construcción de interfaces de usuario y componentes de software vinculados, mientras que el código imperativo es excelente para expresar la lógica de negocio.

Es una muy buena idea para desacoplar la manipulación DOM de aplicación lógica. Esto mejora dramáticamente la capacidad de prueba del código.

Es una excelente idea para desacoplar el lado del cliente de una aplicación desde el lado del servidor. Esto permite que el trabajo de desarrollo para avanzar en paralelo, y permite la reutilización de ambos lados.

Versión

1.3.14

Componentes

fundamentales de AngularJS

Vistas

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Js</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">         
        
    </head>
    <body ng-app="appCine" >        
        <div class="container-fluid" ng-controller="inicioCtrl">
                                                        
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="app.js"></script>         
        <script src="controladores.js"></script>         
    </body>
</html>

Controladores


appCine.controller("inicioCtrl", ['$scope',  function ($scope) {
    // Código
}]);

<div class="container-fluid" ng-controller="inicioCtrl">
                                                        
</div>

JavaScript

Html

Directivas

Custom

appCine.directive('miImg', function() {
  return {
    restrict: 'AE',
    transclude: true,
    scope: {
        informacion :'='
    },
    template: '<img class="media-object img-circle" width="64" height="64" src="{{informacion.imagen}}" alt="{{itemPeliculas.informacion}}">{{servicios}}',
    link: function ($scope, element) {               
    }
  };
});

JavaScript

Html

 <td>
    <mi-img informacion="itemPeliculas"></mi-img>
</td>

Servicios

appCine.service('miServicio', function () {
    return {
        datos : 'miservicio'
    };
});

JavaScript

Filtros

appCine.filter('horaCine', function () {
    return function (input) {
        var temp = '';

        switch (input) {
        case 0 :
            temp = "FINALIZADO";
            break;
        case 1:
            temp = "PENDIENTE";
            break;
        }

        return temp;
    };
});

JavaScript

¿Y los modelos?

$Scope

El "scope" es la pieza más importante del motor de AngularJS y es donde están los datos que se tienen que manejar dentro de la parte de presentación.

El scope es un gran contenedor de datos, que transporta y hace visible la información necesaria para implementar la aplicación, desde el controlador a la vista y desde la vista al controlador. En términos de código el scope no es más que un objeto al que puedes asignar propiedades nuevas, con los datos que necesites, o incluso con funciones (métodos).

$scope.persona.nombre = "carlos";

$scope.metodo = function(){
    //Código
};

Data-binding

Se le llama Data-binding (enlace de datos) a la manera de enlazar datos entre el modelo y la vista, de forma que ésta sea actualizada instantáneamente siempre que el modelo cambie


appCine.controller("inicioCtrl", ['$scope',  function ($scope) {
    $scope.persona.nombre = "carlos";
}]);

<div class="container-fluid" ng-controller="inicioCtrl">
    <div>{{persona.nombre}}</div>
</div>

JavaScript

Html

Recursos

https://docs.angularjs.org/guide/

https://www.youtube.com/watch?v=i9MHigUZKEM

https://www.youtube.com/watch?v=8ILQOFAgaXE