What is the process for invoking a function within a dependency module?

Question

What is the process for invoking a function within a dependency module?

Currently, I am diving into the world of Angular and have encountered an issue. How can I successfully call a method from a dependency module in Angular?

app.js

(function(){
    var myApp = angular.module('myApp',['map']);
    myApp.filter('move', function(){
        return function(name){
            return walk(name);
        } 
    });
})();

map.js

(function(){
    var mapMod = angular.module('map',[]);

    mapMod.factory('walk', function(){
        return "walking...";
    });

})();

After adding app.js and map.js to the HTML page's scripts,

 ReferenceError: walk is not defined

I am determined to find a way to properly call the 'walk' method within the 'move' filter. Any suggestions?

javascript angularjs

Answer 1

Answer №1

Well done, you're very close to getting it right! Just remember to include walk in the filter and choose your preferred method of dependency injection, whether it's through explicit annotation using array syntax (as shown below), $inject syntax, or implicit dependency annotation with ng-annotate for safe minification. By listing map as a dependency for your module myApp, all the components registered in the map module will also be accessible in myApp. Additionally, make sure to consult the documentation on how to write a factory/service.

(function() {
  var mapMod = angular.module('map', []);

  mapMod.factory('walk', function() {
    return function(name) {
      return "walking..." + name;
    }
  });

})();
(function() {
  var myApp = angular.module('myApp', ['map']);
  myApp.filter('move', ['walk',
    function(walk) {
      return function(name) {
        return walk(name);
      }
    }
  ]);
})();

(function() {
  var mapMod = angular.module('map', []);

  mapMod.factory('walk', function() {
    return function(name) {
      return "walking..." + name;
    }
  });

})();
(function() {
  var myApp = angular.module('myApp', ['map']);
  myApp.filter('move', ['walk',
    function(walk) {
      return function(name) {
        return walk(name);
      }
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div>{{"test"|move}}</div>
</div>

Answer 2

Well done, you're very close to getting it right! Just remember to include walk in the filter and choose your preferred method of dependency injection, whether it's through explicit annotation using array syntax (as shown below), $inject syntax, or implicit dependency annotation with ng-annotate for safe minification. By listing map as a dependency for your module myApp, all the components registered in the map module will also be accessible in myApp. Additionally, make sure to consult the documentation on how to write a factory/service.

(function() {
  var mapMod = angular.module('map', []);

  mapMod.factory('walk', function() {
    return function(name) {
      return "walking..." + name;
    }
  });

})();
(function() {
  var myApp = angular.module('myApp', ['map']);
  myApp.filter('move', ['walk',
    function(walk) {
      return function(name) {
        return walk(name);
      }
    }
  ]);
})();

(function() {
  var mapMod = angular.module('map', []);

  mapMod.factory('walk', function() {
    return function(name) {
      return "walking..." + name;
    }
  });

})();
(function() {
  var myApp = angular.module('myApp', ['map']);
  myApp.filter('move', ['walk',
    function(walk) {
      return function(name) {
        return walk(name);
      }
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div>{{"test"|move}}</div>
</div>

What is the process for invoking a function within a dependency module?

Answer №1

Similar questions

Are there any jQuery Context Menu plugins clever enough to handle window borders seamlessly?

Transparent background with opaque text

Utilizing HTML properties in stenciljs for variable binding

Display a React constant value inside an alert message box

``What is the mechanism behind callbacks in AngularJS when making a call to a REST service?

Updating the texture passed to a RawShaderMaterial uniform in Three.js after the initial rendering process

Learn the method to duplicate Outer HTML with the use of jQuery or Pure JavaScript

The addEventListener method fails to respond to changes in input

Incorporate additional query parameters into a dynamic route with React Router to enhance functionality

Employing a combination of IF clauses for form validation

Replacing a string in a textarea using Jquery

Calculate the difference in time spans using Javascript

Implementing validation and displaying fields with v-model in vue.js

The search feature is currently malfunctioning due to an issue with the array in Vue and Vuetify's v-data-table component

Angular - Modify column based on selection in dropdown menu

I have decided to forego the method I initially wanted to use

Steps to refresh the data source upon clicking a checkbox row in a Kendo grid view:

Unlocking Node.js packages within React JS is a seamless process

AJAX cached outcomes

Exploring AngularJS: Effortlessly Retrieving Object Values