SPA Jumpstart - Angular - 3 - Controllers

Controllers

Web Browser

ASP.NETAngularJS

Class LibraryBusiness

Index.htmlAppModule

RoutesDirectivies

TemplatesViews

ControllerViewModel

ServicesFactories

Repository

BreezeJS$resource$http

WebAPI

ApiController Services

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

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

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

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);

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);

Wesley A.LemosLages/SC - 2014

SPA Jumpstart - Angular - 3 - Controllers

Software

Transcript of SPA Jumpstart - Angular - 3 - Controllers