Exploring the concept of inheriting AngularJS modules

I am intrigued by the behavior of AngularJS. I am wondering if AngularJS modules inherit dependencies from other modules. Let's consider the following structure:

var PVNServices = angular.module('PVN.services', []);

PVNServices.factory('ItemService', ['$q', 'apiUrl', '$http', 'errorHandler', function($q, apiUrl, $http, errorHandler) {
    return {
        getAlert: function(alert_id, user_id, category_id) {
            return $http({  method: 'get',
                            url: apiUrl + 'getAlert/',
                            params : {
                'alert_id' : alert_id,
                'user_id' : user_id,
                'category_id' : category_id,
              }
            }).then(function(res){return res.result }, errorHandler);
        }
  }
}]);

var PVNControllers = angular.module('PVN.controllers', ['PVN.services']);

PVNControllers.controller('AppController', ['$scope', 'ItemService', function($scope, ItemService) {
  $scope.getAlert = function(alert_id, user_id, category_id) {
     ItemService.getAlert(alert_id, user_id, category_id).then(function(alert){
         $scope.alert = alert;
     }
  }
}]);

var PVNDashboard = angular.module('PVN', ['ngSanitize','ngMaterial','PVN.controllers'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<<');
    $interpolateProvider.endSymbol('>>');
});

PVNDashboard.run(function() {
    moment.locale('nl');
});

<body class="" ng-app="PVN">
</body>

In this setup, can I utilize the ItemService in the PVNDashboard module because it has controllers as a dependency, which in turn depends on services? Also, due to the ng-app being set to the PVN module, will the configuration of the PVN module (such as setting moment.js locale in this case) persist in the services because it is the first to run?

Answer №1

Indeed, all dependencies inherit in the system. The initial idea was to allow for the creation of a module for each specific feature and then combine them to build applications through module injections.

However, there is a caveat: Angular appears to utilize a unified namespace for all injectable components, potentially leading to overwriting of items with identical names. An example of this issue can be found on this blog post:

It remains uncertain if any updates have been made since then, although some feedback suggests that this particular problem may have been addressed in Angular 2.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the use of data attributes in jQuery to access JSON objects

I have set a data-attribute for multiple elements and I am looking to access the JSON object using this data attribute in jQuery. <div class="content"> <div class="plans" data-plan="state-1"><span class="pricing-symbol">$</span> ...

Slow auto page refresh in local development for Angular2 on Windows can be quite frustrating

Recently diving into angular2 and following the heros tutorial from docs. Struggling with a sluggish development experience while working with angular2. It's taking approximately 5 seconds for angular2 to recognize changes in files, followed by anothe ...

Mobile site's call button functionality is malfunctioning

For the telephone number on my mobile site, I employed the <a href="tel:+1800229933">Call us free!</a> code. However, it seems to be malfunctioning on several devices. Any insight on this issue would be greatly appreciated. Thank you. ...

Removing a select menu in Discord.js once a selection has been made

Currently in the process of creating a ticket tool that utilizes a select menu for choosing a topic const row = new MessageActionRow() .addComponents( new MessageSelectMenu() .setCustomId(`select_menu`) .setPlac ...

What steps should I take to resolve the textarea border bottom CSS effect?

My simple border bottom animation is working fine with a basic input element, but it's not functioning properly when used with a textarea. (If using JavaScript is necessary for a solution, please provide guidance) How can I adjust the height of a te ...

Function compilation did not succeed in the module

I've put together a MERN (MongoDB, ExpressJS, React, Node) project using express-generator (express myNewApp). Within a react component, I have implemented this ES6 code snippet: onChange = (event, { newValue }) => { // Line 53 this.setSt ...

Creating a render function that includes the img.src parameter requires careful thought and consideration

I am currently working on a dilemma where I need to dynamically adjust the height and width of an image in my render() function every time there is a state change. Here is the code snippet: render() { const imageURL = photos[this.state.currentImage]. ...

Strategies for Implementing Multi-Step Password Form Validation

Currently, I am using https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps as the foundation of my form with some adjustments. Validation is functioning correctly where empty fields disable the next button. However, when I attempt to add ...

Creating a custom class implementation in JavaScript and initializing it with a constructor function

Perhaps there is a similar question out there, but I haven't come across it yet and I'm still facing an issue. Here's what I've tried: function createClass(obj) { const constructor = obj.constructor; constructor.prototype = obj; ...

How can you selectively export a single function from a JavaScript file?

Within my project, I have two separate modules - one written in ts and the other in js. There is a utility within the js module that needs to be accessed by the ts module. The utility service.js looks like this: module.exports = { helloFriends: functi ...

Exploring AngularJS and HTTP Digest Authentication

I am currently grappling with the implementation of the digest auth algorithm within Angular. However, my lack of understanding regarding the requests that Angular will send is hindering me from achieving this objective. I have decided to manipulate the re ...

De-duplicating data in the ng-grid

After applying a cell template in my Ng-grid cell, I am getting data but with duplicated regionName values. <select ng-cell-input ng-options="l.RegionID as l.RegionName for l in regionActivities" ng-class="'colt' + $index" ng-model="C ...

choosing a section within a table cell

This seems like a simple task, but I'm encountering some difficulties $("#info-table tbody tr").each(function(){ $(this).find(".label").addClass("black"); }); .black{ font-weight:bold; } <script src="https://ajax.googleapis.com/ajax/libs/j ...

How to assign values to an object within an array in React?

In React, I am currently working on creating a swipeable card that consists of 4 slides. The data displayed within the card is entirely dependent on user input. To start off, I define a sample object like so: const initialState = { id: '', title ...

Output the keycode to the console repeatedly

I'm currently facing a minor mental obstacle: I have a javascript function embedded in html that displays the keycode when a key is pressed. It's connected to a function that provides detailed information about the character and keycode being pre ...

Avoid the occurrence of the parent's event on the child node

Attempting to make changes to an existing table created in react, the table is comprised of rows and cells structured as follows: <Table> <Row onClick={rowClickHandler}> <Cell onCLick={cellClickHandler} /> <Cell /> ...

Convert a JSON object into a string using Node.js

Here is my code snippet: app.get('/status',function ( req,res) { var data = { "error": 1, 'data status': "" }; connection.query("SELECT * from status", function (err, rows, fields) { ...

Are there any publicly accessible Content Delivery Networks that offer hosting for JSON2?

Everyone knows that popular tech giants like Google and Microsoft provide hosting for various javascript libraries on their CDNs (content distribution networks). However, one library missing from their collection is JSON2.js. Although I could upload JSON2 ...

Enhance Data3 Sankey to disperse data efficiently

There are a few instances where the D3 Sankey spread feature is showcased here. However, it seems that this specific function is not included in the official D3 Sankey plugin. Is there anyone who can assist me in obtaining the code for the Spread function ...

Click on Angular ng-repeat to dynamically insert data using ng-click

When using $http.get to fetch PHP data in ng-repeat, everything works fine. However, I encounter an issue when attempting to use ng-click to add PHP data from a second page into the ng-repeat, but it is not functioning correctly. Do you have any suggestio ...