Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso AngularJS - 3. módulos y controladores

107 views

Published on

Curso AngularJS.

Temas:
1. Introducción
2. Conceptos básicos
3. Módulos y controladores
4. Filtros y servicios
5. Rutas
6. Formularios
7. Temas avanzados

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Curso AngularJS - 3. módulos y controladores

  1. 1. AngularJS Módulos y controladores Álvaro Alonso
  2. 2. Contenidos  Módulos  Dependency Injection  Controladores 2
  3. 3. Módulos  Contenedores para diferentes partes de una aplicación  Controladores, servicios, filtros, etc  Especifican de manera declarativa cómo debe arrancar la aplicación  Son reutilizables  Pueden cargarse en cualquier orden  Incluso de forma paralela 3
  4. 4. Módulos 4  Declarar un módulo  Definir controladores, servicios, filtros… var myApp = angular.module(‘”myModule”, [“dependency1”, “dependency2”,…]) myApp.controller(“myController", function () { … }) .factory(“myFactory", function () { … }) .filter(“myFilter", function () { … });
  5. 5. Módulos Inicialización automática 5  Aplicación Angular sin módulo principal  Aplicación Angular con módulo principal <body ng-app> … </body> <body ng-app=“myApp”> … </body>
  6. 6. Módulos  Configuration blocks  Se ejecutan durante la fase de registro y configuración  Run blocks  Se ejecutan después de que se cree el Injector  Una especie de método main() Config & Run 6 angular.module('myModule', []). config(function(injectables) { … }). run(function(injectables) { … });
  7. 7. Módulos  Un módulo por funcionalidad  Un módulo por cada componente reutilizable  Directivas y filtros  Un módulo a nivel de aplicación  Depende del resto  Contiene código de inicialización Recomendaciones de uso 7
  8. 8. Dependency Injection  Patrón de diseño de software que se ocupa de gestionar las dependencias de los componentes  Crea los componentes  Resuelve sus dependencias  Provee dependencias a otros componentes  Favorece el concepto de diseño modular de Angular 8
  9. 9. Dependency Injection  En servicios, directivas o filtros 9 angular.module('myModule', []) .factory('serviceId', ['depService', function(depService) { ... }]) .directive('directiveName', ['depService', function(depService) { ... }]) .filter('filterName', ['depService', function(depService) { ... }]);
  10. 10. Dependency Injection  En módulos 10 angular.module('myModule', []) .config(['depProvider', function(depProvider) { ... }]) .run(['depService', function(depService) { ... }]);
  11. 11. Dependency Injection  En controladores  Los controladores tienen acceso a la dependencia $scope 11 angular.module.('myModule', []) .controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) { ... $scope.aMethod = function() { ... } ... }]);
  12. 12. Controladores  Se utilizan para añadir funcionalidad al Angular Scope  “Pegamento” entre el control y la vista  Al instanciar un controlador se crea un nuevo objeto $scope  Se hace mediante la directiva ng-controller  Establece el estado inicial del $scope  Añade funciones al $scope  La directiva controller as controller1  asigna la instancia a la variable controller1 del $scope  Veremos temas avanzados sobre el $scope más adelante 12
  13. 13. Controladores  Definir un controlador en una aplicación  Instanciar un controlador Definición 13 angular.module("myApp", []) .controller(”myController", [“$scope”, function ($scope) { … }); <div ng-app=”myApp" ng-controller=”myController"> … </div>
  14. 14. Controladores  Definir variables  Acceder a las variables Variables 14 angular.module(’myApp', []) .controller(‘myController’, [“$scope”, function ($scope) { $scope.var1 = 3; $scope.var2 = [‘s’, ’m', ‘l']; }); <div ng-app=”myApp" ng-controller=”myController”> <input ng-model=”var1”> <span ng-repeat=“size in var2"> {{ size }} </span> </div>
  15. 15. Controladores  Definir una función  Llamar a la función Funciones 15 angular.module(“myApp”, []) .controller(“myController”, [“$scope”, function ($scope) { $scope.fun1 = function () { … }; }); <div ng-app=”myApp" ng-controller=”myController"> <span>{{ fun1() }} </span> <button class="btn" ng-click=“fun1()">Pay</button> </div>
  16. 16. Controladores  Acceder a variables globales (window, document, location)  Las expresiones no tienen acceso directo a estas variables 16 angular.module('expressionExample', []) .controller('ExampleController', ['$window', '$scope', function($window, $scope) { $scope.name = 'World'; $scope.greet = function() { $window.alert('Hello ' + $scope.name); }; }]); <div class="example2" ng-controller="ExampleController"> Name: <input ng-model="name" type="text"/> <button ng-click="greet()">Greet</button> <button ng-click="window.alert('Should not see me')">Won't greet</button> </div>
  17. 17. Controladores  Definir variables/funciones  Instanciar controlador controller as 17 angular.module(’myApp', []) .controller(‘myController’, function () { this.var1 = 3; this.fun1 = function () { … }; }); <div ng-app=”myApp" ng-controller=”myController as controller"> <input ng-model=”controller.var1”> <span>{{controller.fun1() }} </span> </div>
  18. 18. Controladores 18
  19. 19. EJEMPLO Controladores 19
  20. 20. EJERCICIO Controladores 20  En nuestra aplicación vamos a crear un controlador de paciente  Hay que crear un fichero con el módulo principal de la app  Este módulo tendrá el controlador de paciente  Un paciente tendrá las variables  Personales: nombre, sexo, edad, …  Estado clínico: peso, altura, IMC, ...  Y funciones  checkIMC: que hace una interpretación del IMC  printInform: pinta en un alert un informe con la informacióm más relevante del paciente
  21. 21. Documentación  Módulos  https://docs.angularjs.org/guide/module  Dependency Ingection  https://docs.angularjs.org/guide/di  Controladores  https://docs.angularjs.org/guide/controller 21
  22. 22. AngularJS Módulos y controladores Álvaro Alonso

×