Série AngularJS: Dependency Injection

 

Olá Pessoal,

No post de hoje vamos ver como usar  dependecy Injection. E para isso vamos precisar aprender como criar services .

Lets go…

 Starting…

E para não ser diferente vamos dar continuidade ao nosso projeto recipeangularexample.  Para o exemplo de hoje vamos precisar apenas alterar o nosso arquivo recipeController.js, alterar o controle existente e criar mais um.

Development

Para criar o serviço é preciso criar um factory, portanto adicione no app.js

O que estamos fazendo aqui? Criamos um array chamado users e duas funções: uma retorna todo o array e outra apenas o primeiro elemento.

Essa é a uma simples estrutura da criação de serviço. UserService é o nome do serviço e é através desse nome que vamos chamar no controller.

Alterando o recipeController.js

Vamos alterar o controle recipeController adicionado a chamada ao UserService, portanto deixe assim:

var recipeController  = function ($scope,UserService){

       $scope.name=””;

//invocando o método do serviço que retorna todos os users

       $scope.users=UserService.all();

//restante do código omitido

};

recipeController.$inject=[“$scope”,”UserService”];

Observe que passamos o UserService no parâmetro da função. Isso é para que o Angular possa fazer IoC.  $inject que colocamos fora do controller é de fato onde o IoC é injetado pelo framework, e precisamos fazer isso para que o objeto seja instanciado.

Vamos adicionar outro controller que terá como objetivo exibir apenas o primeiro elemento do array, portanto adicione:

var anotherController =function ($scope,UserService){

//invocando o metodo do service que retorna apenas o primeiro elemento

       $scope.firstUser = UserService.first();

};

anotherController.$inject=[“$scope”,”UserService”];

Nada de diferente, o código completo deve estar assim:

var recipeController  = function ($scope,UserService){

       $scope.name=””;

       $scope.users=UserService.all();

       //estou considerando que você fez o $watch do post anterior

       $scope.$watch(“name”,function(newValue,oldValue){

             if($scope.name.length > 0){

                    $scope.greeting = “Greeting ” + $scope.name;

             }

       });

};

recipeController.$inject=[“$scope”,”UserService”];

var anotherController =function ($scope,UserService){

       $scope.firstUser = UserService.first();

};

anotherController.$inject=[“$scope”,”UserService”];

Atualizando o arquivo serviceio.html

Vamos colocar carne nesse HTML:

<body>

<div ng-controller=“recipeController”>

<ul ng-repeat=“user in users”>

       <li>{{user}}

</ul>

</div>

<div ng-controller=“anotherController”>

First User:{{firstUser}}

</div>

</body>

 

Para cada div temos um controller.

Testando

angularjsrecipeserviceiocresult

Fantástico, não? Se for a primeira vez que você está vendo o código acima, este pode parecer estranho e confuso, mas com prática e lendo a documentação você se acostuma e vê que é bem lógico. Não há outra forma de acostumar com a estrutura do código e entender se não for praticando e lendo a documentação do framework.

Vou ficando por aqui. Espero que tenham gostado do post e estejam curtindo a série.

Abraços.