spa jumpstart - angular - 3 - controllers
DESCRIPTION
Curso ministrado por mim na NDDigital sobre como iniciar uma aplicação AngularJS direcionada ao consumo de WebAPI, baseado neste fluxo: https://www.examtime.com/pt-BR/p/1084807 ::Table of Contents 1 - Introdução http://pt.slideshare.net/anisanwesley/angular-jumpstart-1-introduo-38460785 2 - Arquitetura http://pt.slideshare.net/anisanwesley/angular-jumpstart-2-arquitetura 3 - Controllers http://pt.slideshare.net/anisanwesley/angular-jumpstart-3-controllers 4 - Diretivas nativas http://pt.slideshare.net/anisanwesley/angular-jumpstart-4-diretivas-nativas 5 - Diretivas customizadas http://pt.slideshare.net/anisanwesley/angular-jumpstart-5-diretivas-customizadas 6 - Filters http://pt.slideshare.net/anisanwesley/angular-jumpstart-6-filters 7 - Validação http://pt.slideshare.net/anisanwesley/angular-jumpstart-7-validao 8 - Services http://pt.slideshare.net/anisanwesley/angular-jumpstart-8-services 9 - Modulos http://pt.slideshare.net/anisanwesley/angular-jumpstart-9-modulos 10 - Requests http://pt.slideshare.net/anisanwesley/angular-jumpstart-10-requests 11 - Roteamento http://pt.slideshare.net/anisanwesley/angular-jumpstart-11-roteamentoTRANSCRIPT
![Page 1: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/1.jpg)
Controllers
![Page 2: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/2.jpg)
Web Browser
ASP.NETAngularJS
Class LibraryBusiness
Index.htmlAppModule
RoutesDirectivies
TemplatesViews
ControllerViewModel
ServicesFactories
Repository
BreezeJS$resource$http
WebAPI
ApiController Services
![Page 3: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/3.jpg)
Controllers
Nome do controller em “camelCase” com sulfixo “Controller”. Ex: “printerListController”
O que fazem• Expõem o modelo para a view• Conter (ou ser) a “cola-quente” com o
HTML
O que não fazem• Manipulam o DOM• Se comunicam com fora da
aplicação
![Page 4: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/4.jpg)
ControllersImplementação
<html ng-app="app" > <script type="text/javascript"> var app = angular.module('app',[]); var nameController = function($scope) { $scope.firstName = "João"; $scope.lastName = "da Silva"; }; app.controller('nameController', nameController); </script> </head><body data-ng-controller="nameController"> <div> <input type="text" ng-model="firstName" /> <input type="text" ng-model="lastName" /> </div> {{firstName}} {{lastName}} tem {{(firstName+lastName).length}} letras. </body> </html>
Relacionar modulo
Declarar moduloDeclarar controller
Registrar controller
Relacionar controller
![Page 5: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/5.jpg)
ControllersController As Syntax
Há outra forma de utilizar o controlador, com a sintaxe “controller as” onde o viewmodel não é mais o $scope, mas sim o próprio controller:
Vantagens
Melhor visibilidade
Código mais organizado
Evita conflitos com herança de escopo
var nameController = function() { this.firstName = "João"; this.lastName = "da Silva"; };
<div> <input type="text" ng-model="vm.firstName" /> <input type="text" ng-model="vm.lastName" /> </div> {{vm.firstName}} {{vm.lastName}} tem {{(vm.firstName+vm.lastName).length}} letras. </body>
<body ng-controller="nameController as vm">
Shell
![Page 6: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/6.jpg)
Controllers
Simples (pode gerar problemas com minificação)
Injeção automática
Injeção manual (recomendado)
Modos de declarar
app.controller('nameController', function(dependencia1, dependencia2) {});
app.controller('controllerInjetavelAuto', [ 'dependencia1', 'dependencia2', function (d1, d2) { } ]);
function Ctrl(dependencia1, dependencia2) { }
Ctrl.$inject = ["dependencia1", "dependencia2"]; app.controller('controllerInjetavelManual', Ctrl);
![Page 7: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/7.jpg)
Controllers Controlador completo(function (angular) { 'use strict';//using namesListController.$inject = ['dataservice'];
//definindo namespace angular .module('controllers.module') .controller('nameListController', namesListController); //class function namesListController(context) { var self = this; self.names = [];
//initialize / page_load activate(); function activate() { context.Names.getNames().then(function(results) { self.names = results; self.selectedEvent = results[0]; }, function(error) { context.Log.error("Não foi possivel acessar a lista de nomes."); }); }//métodos self.selectEvent = function (name) { self.selectedEvent = name; }; self.refresh = function () { location.reload(); }; self.delete = function (name) { context.Names.deleteEvent(name.id).then(function (response) { context.Log.info("Deleted", self.name, response.status + " - " + response.statusText); }); }; } })(window.angular);
![Page 8: SPA Jumpstart - Angular - 3 - Controllers](https://reader036.vdocument.in/reader036/viewer/2022082811/558bb269d8b42a5e048b4601/html5/thumbnails/8.jpg)
Wesley A.LemosLages/SC - 2014