![Page 1: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/1.jpg)
AngularJSMódulos y controladores
Álvaro Alonso
![Page 2: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/2.jpg)
2
Contenidos
Módulos Dependency Injection Controladores
![Page 3: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/3.jpg)
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
![Page 4: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/4.jpg)
4
Módulos
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 () {
…});
![Page 5: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/5.jpg)
5
Módulos Inicialización automática
Aplicación Angular sin módulo principal
Aplicación Angular con módulo principal
<body ng-app>…
</body>
<body ng-app=“myApp”>…
</body>
![Page 6: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/6.jpg)
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
angular.module('myModule', []).config(function(injectables) { …}).run(function(injectables) { …});
![Page 7: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/7.jpg)
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
![Page 8: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/8.jpg)
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
![Page 9: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/9.jpg)
9
Dependency Injection
En servicios, directivas o filtros
angular.module('myModule', []).factory('serviceId', ['depService', function(depService) {
...}]).directive('directiveName', ['depService', function(depService) {
...}]).filter('filterName', ['depService', function(depService) { ...}]);
![Page 10: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/10.jpg)
10
Dependency Injection
En módulos
angular.module('myModule', []).config(['depProvider', function(depProvider) {
...}]).run(['depService', function(depService) {
...}]);
![Page 11: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/11.jpg)
11
Dependency Injection
En controladores
Los controladores tienen acceso a la dependencia $scope
angular.module.('myModule', []).controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) { ... $scope.aMethod = function() { ... } ...}]);
![Page 12: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/12.jpg)
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
![Page 13: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/13.jpg)
13
Controladores
Definir un controlador en una aplicación
Instanciar un controlador
Definición
angular.module("myApp", []).controller(”myController", [“$scope”, function ($scope) {
…});
<div ng-app=”myApp" ng-controller=”myController">…
</div>
![Page 14: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/14.jpg)
14
Controladores
Definir variables
Acceder a las variables
Variables
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>
![Page 15: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/15.jpg)
15
Controladores
Definir una función
Llamar a la función
Funciones
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>
![Page 16: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/16.jpg)
16
Controladores
Acceder a variables globales (window, document, location) Las expresiones no tienen acceso directo a estas variables
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>
![Page 17: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/17.jpg)
17
Controladores
Definir variables/funciones
Instanciar controlador
controller as
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>
![Page 18: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/18.jpg)
18
Controladores
![Page 19: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/19.jpg)
19
EJEMPLOControladores
![Page 20: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/20.jpg)
20
EJERCICIOControladores
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
![Page 21: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/21.jpg)
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
![Page 22: Curso AngularJS - 3. módulos y controladores](https://reader036.vdocuments.mx/reader036/viewer/2022070516/5871e5ee1a28ab6a7b8b6ffb/html5/thumbnails/22.jpg)
AngularJSMódulos y controladores
Álvaro Alonso