How best to reuse code between modules

Asked

Viewed 870 times

3

I am developing a tool using Angularjs, but I am constantly picking it up, I need to reuse code from different modules and files, but it is not working properly. With pure javascript, it’s easy to reuse other functions, even in different files, they "see each other", but with Angularjs it’s not like that, I thought it was something similar to JAVA, where you need to import the class and create an instance, but also seeing that it is not that way, someone could show me an example of reusing functions in different modules and files in Angularjs?

javascript angularjs oop dependency-injection angular-module

2 answers

1

Basically there are two ways, defining as a service or putting it in its root scope. The ideal is to create a service so as not to pollute its "root" scope. You can create a service and make it available on your controller like this:

<!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>

If it doesn’t roll, you can add us to root scope like this:

<!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>

That way all your templates can call globalFoot() without having to pass this to the controller template.

Source: https://stackoverflow.com/questions/15025979/can-i-make-a-function-available-in-every-controller-in-angular

  • I came to create a service to reuse some functions in another module, works, but I can’t reuse another module. for example: in javascript: 1.js>(depends)2.js>(depends)3.js, in agular I thought something like, modulo1>(depends)services>(belonging) modulo2. like where I asked http://answall.com/questions/93558/inje%C3%A7%C3%A3o-de-dependencia-em-service/93562#93562

0

You can create a Commons module similar to the one below. In this use module utils. to make the methods generic. Allied to this you can also create common directives to your program. If you do not want to use a new module you can share data using a service from the angular itself.

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>

Browser other questions tagged javascript angularjs oop dependency-injection angular-module

You are not signed in. Login or sign up in order to post.