Curso AngularJS - 3. módulos y controladores
•Descargar como PPTX, PDF•
1 recomendación•1,998 vistas
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
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Curso AngularJS - 3. módulos y controladores
Similar a Curso AngularJS - 3. módulos y controladores (20)
Más de Álvaro Alonso González
Más de Álvaro Alonso González (17)
Último
Último (15)
Curso AngularJS - 3. módulos y controladores
- 1. AngularJS Módulos y controladores Álvaro Alonso
- 2. Contenidos Módulos Dependency Injection Controladores 2
- 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. 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. 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. 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. 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. 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. 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. Dependency Injection En módulos 10 angular.module('myModule', []) .config(['depProvider', function(depProvider) { ... }]) .run(['depService', function(depService) { ... }]);
- 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. 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. 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. 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. 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. 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. 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. Controladores 18
- 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. 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. AngularJS Módulos y controladores Álvaro Alonso