Curso AngularJS - 3. módulos y controladores
Descargar como PPTX, PDF1 recomendación2,002 vistas
El documento presenta una introducción a los módulos y controladores en AngularJS, destacando su funcionalidad, cómo se definen y la importancia de la inyección de dependencias. Se explica el uso de controladores para gestionar el ámbito y proporcionar funcionalidades en la aplicación. También se incluyen ejemplos y ejercicios prácticos relacionados con la creación de controladores y el manejo de datos en AngularJS.
![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 () {
…
});](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-4-320.jpg)
![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) {
…
});](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-6-320.jpg)
![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) {
...
}]);](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-9-320.jpg)
![Dependency Injection
En módulos
10
angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
...
}])
.run(['depService', function(depService) {
...
}]);](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-10-320.jpg)
![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() {
...
}
...
}]);](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-11-320.jpg)
![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>](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-13-320.jpg)
![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>](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-14-320.jpg)
![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>](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-15-320.jpg)
![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>](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-16-320.jpg)
![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>](https://image.slidesharecdn.com/3-161010105658/85/Curso-AngularJS-3-modulos-y-controladores-17-320.jpg)
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