Estou de desenvolvendo uma ferramenta usando AngularJS, mas estou apanhando constantemente dele, eu preciso reaproveitar código de diferentes módulos e arquivos, mas não está funcionando corretamente. Com javascript puro, é tranquilo reutilizar outras funções, mesmo em arquivos diferentes, elas "se enxergam", mas com angularJs não é bem assim, achei que fosse algo parecido com JAVA, onde vc precisa importar a classe e criar uma instancia, mas também to vendo que não é por esse caminho, alguem poderia me mostrar um exemplo de reutilização de funções em diferentes módulos e arquivos em AngularJS?
2 Respostas
Basicamente existem duas formas, definindo como um serviço ou colocando ela no seu escopo de root. O ideal é criar um serviço para não ficar poluindo seu escopo "root". Você pode criar um serviço e deixar ele disponível na sua controller assim:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.factory('myService', function() {
return {
foo: function() {
alert("I'm foo!");
}
};
});
myApp.controller('MainCtrl', ['$scope', 'myService', function($scope, myService) {
$scope.callFoo = function() {
myService.foo();
}
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="callFoo()">Call foo</button>
</body>
</html>
Se não rolar, você pode adicionar nos eu escopo de root assim:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.globalFoo = function() {
alert("I'm global foo!");
};
});
myApp.controller('MainCtrl', ['$scope', function($scope){
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="globalFoo()">Call global foo</button>
</body>
</html>
Dessa maneira todos seus templates podem chamar globalFoot()
sem ther que passar isso para o template da controller.
-
eu cheguei a criar um service para reaproveitar algumas funções em outro modulo, funciona, mas não consigo reutilizar mais outro modulo. por exemplo: em javascript: 1.js>(depende)2.js>(depende)3.js, em agular pensei algo como, modulo1>(depende)services>(pertencente) modulo2. igual onde eu perguntei pt.stackoverflow.com/questions/93558/… 21/10/2015 às 15:43
Você pode criar um modulo commons similar ao de baixo. Nesse uso modulo utils.commom para deixar os métodos genéricos. Aliado a isso você também pode criar diretivas comuns ao teu programa. Caso não deseje usar um novo modulo pode compartilhar dados usando um serviço do próprio angular.
var commom = angular.module("utils.commom", []);
commom.factory("$commomutils", function($http, $q, $injector) {
return({
fazAlgo:function(algumaCoisa){
console.log(algumaCoisa);
}
});
});
var appQualquer = angular.module("AppQualquer", ["utils.commom"]);
appQualquer.controller("ControllerQualquer", function($scope, $commomutils) {
$scope.iniciar = function() {
$commomutils.fazAlgo("JEC não vai cair!!! Figueira freguês!!!");
};
});
appQualquer.directive("diretiva", [function () {
return {
restrict : "E",
replace : true,
link : function(scope, element, attr) {
angular.element(element).html("Figueira FREGUES!!! JEC Maior de SC");
}
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="AppQualquer" ng-controller="ControllerQualquer" ng-init="iniciar();">
<diretiva>UH</diretiva>
</div>