Transcript
Page 1: Angular jumpstart   8 - Services

Services

Page 2: Angular jumpstart   8 - Services

Web Browser

ASP.NETAngularJS

Class LibraryBusiness

Index.htmlAppModule

RoutesDirectivies

TemplatesViews

ControllerViewModel

ServicesFactories

Repository

BreezeJS$resource$http

WebAPI

ApiController Services

Page 3: Angular jumpstart   8 - 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.

Page 4: Angular jumpstart   8 - Services

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

Page 5: Angular jumpstart   8 - Services

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:

Page 6: Angular jumpstart   8 - Services

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

Page 7: Angular jumpstart   8 - Services

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

Page 8: Angular jumpstart   8 - Services

Wesley A.LemosLages/SC - 2014


Top Related