curso angularjs - 3. módulos y controladores
TRANSCRIPT
AngularJSMódulos y controladores
Álvaro Alonso
2
Contenidos
Módulos Dependency Injection Controladores
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
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 () {
…});
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>
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) { …});
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
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
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) { ...}]);
10
Dependency Injection
En módulos
angular.module('myModule', []).config(['depProvider', function(depProvider) {
...}]).run(['depService', function(depService) {
...}]);
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() { ... } ...}]);
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
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>
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>
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>
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>
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>
18
Controladores
19
EJEMPLOControladores
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
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
AngularJSMódulos y controladores
Álvaro Alonso