What is the best way to reuse codes between modules

Question

What is the best way to reuse codes between modules

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

I'm developing a tool using AngularJS, but I'm constantly picking it up, I need to reuse code from different modules and files, but it's not working properly. With javascript pure, it is quiet to reuse other functions, even in different files, they "see", but angularJs is not well, I thought it was something like JAVA, where you need to import the class and create an instance, but also I would like to know if this is the way to do it.

javascript angularjs angular-module

asked by anonymous 21.10.2015 / 16:16

2 answers

asp.net - Prevent consecutive button clicks JavaFX: pros and cons of MVC, MVP, MVVM, etc.

score 1 · Answer 1

Basically there are two ways, defining as a service or putting it in your root scope. Ideally, you should create a service so that you do not pollute your "root" scope. You can create a service and leave 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><scriptsrc="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 does not scroll, you can add us in the root scope as follows:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><scriptsrc="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>

In this way all your templates can call globalFoot() without ther that pass this to the controller template.

Source: link

score 0 · Answer 2

You can create a commons module similar to the one below. In this module use utils.commom to leave the generic methods. Allied to this you can also create common policies for your program. If you do not want to use a new module you can share data using a service of the same angle.

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><divng-app="AppQualquer" ng-controller="ControllerQualquer" ng-init="iniciar();">
  <diretiva>UH</diretiva>
</div>