angular jumpstart 8 - services
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
Services
Web Browser
ASP.NETAngularJS
Class LibraryBusiness
Index.htmlAppModule
RoutesDirectivies
TemplatesViews
ControllerViewModel
ServicesFactories
Repository
BreezeJS$resource$http
WebAPI
ApiController Services
Services
UsosSe
comunicam com o server
Manipulam e transformam
dados
Controlam autenticação
Compartilham dados entre controllers
Etc.
Definição
Classes injetáveis nos controllers que gerenciam assuntos além do alcance do mesmo.
Cada service pode ter outro service injetado nele mesmo, desde que não gere referência circular.
Services<script type="text/javascript"> var app = angular.module('app', []); var filterController = function (clienteService) { var self = this; self.cliente = clienteService.cliente; }; var service = function () { this.cliente = { titular: 'jose da silva', saldo: 1003.45 } }; filterController.$inject = ['clienteService']; app.controller('filterController', filterController); app.service('clienteService', service); </script><body ng-controller="filterController as vm"> <p> Titular: {{vm.cliente.titular}} </p> <p> Saldo: {{vm.cliente.saldo | currency}} </p> </body>
O angular usa o $inject para buscar os services registrados
Services
Retornam um objeto simples.
Factory
Retorna uma instância de si mesma.
Service
.factory('Fabrica', function() { var valor = "Vim de um factory"; return { valor: valor }; })
.service('Servico', function() { this.valor = "Vim de um service"; })
.controller('serviceController', function(Servico) { this.valor = Servico.valor; }) .controller('factoryController', function(Fabrica) { this.valor = Fabrica.valor; });
<div ng-controller="serviceController as sc"> service : {{sc.valor}} </div> <div ng-controller="factoryController as fc"> factory : {{fc.valor}} </div>
Controller:
View:
ServicesPraticamente, seu uso é o mesmo, mas determinamos a seguinte convenção:
Service
Ponte para outras aplicações
Chamadas AJAXGerenciamento de Tokens
Factory
Ações que não saem da aplicação
Criação de menusObjetos de configuração
Services
Há também os services que o próprio Angular disponibiliza para uso, e são injetados da mesma forma.
Nativos
$log $parse $rootScope $q $sce $sceDelegate $sniffer $templateCache $timeout $window $$rAF $$asyncCallback
$anchorScroll $animate $browser $cacheFactory $controller $document $exceptionHandler $filter $interpolate $interval $http $httpBackend $location
Wesley A.LemosLages/SC - 2014