Olá, pessoal!
No artigo de hoje vamos ver como usar IoC, ou melhor, dependecy Injection. E para isso vamos precisar aprender como criar services.
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:
//creating my service
app.factory("UserService",function(){
var users = ["Ivete", "Camilo", "Lopes"];
return{
all:function(){
return users;
},
first:function(){
return users[0];
}
};
});
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 é 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. O $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
Fantástico, não?! Se for a primeira vez que você está vendo o código de IoC com Angular, 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 artigo e estejam curtindo a série.
Abraços.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?