How about using AngularJS with JavaScript modules?

I have an old AngularJS app (using version 1.2) and I am trying to organize my code into JavaScript modules. However, I am struggling to figure out how to define the controller as a function within the module. In other words, I want to transition from:

  <script>
    function Controller($scope){
      // do stuff
    }
  </script>
  <div ng-app ng-controller="Controller"></div>

to something more like this:

  <script type="module">
    export function Controller($scope){
      // do stuff
    }
  </script>
  <div ng-app ng-controller="Controller"></div>

Unfortunately, I cannot seem to figure out how to achieve this. While I don't necessarily need the top-level function to be within a module, I would like to be able to call functions from modules within it. This seems to imply that it also needs to be a module. Is there a way to make this possible?

Answer №1

When exporting from a JavaScript module, it doesn't automatically add anything to the global window object. However, AngularJS 1.2 looks for functions in the global scope when used as controllers. If you want to wrap your controllers in modules and still use them in the AngularJS 1.2 style, you'll need to explicitly attach each one to the window. This can be done within each module or in a dedicated script.

// controller.js
export function Controller($scope){
  // do stuff
}
window.Controller = Controller

You may also consider moving away from relying on the window object and instead use the controller registration style:

angular.module('my-app',[])
  .controller('Controller1', function() {
    // do stuff
  })

This approach works in modules just like traditional scripts and eliminates the need for manual window manipulation. You could still export and name the function if desired, but it may be less necessary at that point.

export function Controller1() {
  // do stuff
}
angular.module('my-app',[]).controller('Controller1', Controller1)

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

FNS Date-Timezone Abbreviation

Is there a way to shorten the Australian Eastern Daylight Time abbreviation to just AEDT? When I use it currently, it displays as 11/11/2022 15:29:25 Australian Eastern Daylight Time. I would like it to show as 11/11/2022 15:29:25 AEDT import { formatInT ...

Communication with child processes in node.js is not done using the child_process module

Hello Everyone, I'm currently experimenting with node.js to utilize JS plugins developed by others using the child_process API. However, I'm facing an issue where the child process is not able to communicate effectively with the parent process. ...

Is it feasible to access a variable outside the scope of a function if it is initially created within the scope of another function that returns a function using that same variable?

function creatPrintNumFunction() { var num= 12; return function printNum() { console.log(num); } } var printer = creatPrintNumFunction(); printer.num =13; //this part doesn't work but is there a way to access this Num variable Outside t ...

The value is currently unset in the TypeScript language

The variable `this.engenes_comparte` is showing up as undefined inside the subscribe function, but it works fine outside of it. baja(){ this._restService.getEngines(this._globalService.currentFisherMan.nid).subscribe((data : any[]) => { le ...

Leveraging Material-UI in Electron Environment

I'm currently working on an electron app using React and incorporating Material-UI for the user interface. I've added a datepicker and timepicker to a component, but when clicking on the input in the electron app, nothing happens. I'm unsure ...

Managing uncaught exceptions in node.js

While working on my project, I encountered an issue with catching exceptions when opening a connection using mongoose.createConnection. Here's the code snippet causing the problem: var createdDb = mongoose.createConnection(connectionString); createdD ...

Is it possible to add an element to an array every time a particular function is executed?

Implementing infinite scroll involves using an array called hotels that receives data from the $http.get() method. Now, the goal is to populate a new array named hotelsNew[] with the values from the hotels array, while incrementing the values of m and j. ...

When the width of the window is hidden, conceal

My webpage has a carousel with pictures, but on smaller devices, they do not appear properly. I am now trying to figure out how to hide the div if the width is less than 1015px. Here is the code for my div: <html> <body> <div id="myCarou ...

neither displayed on the webpage nor logged in the console

As a beginner in ReactJS, I am facing an issue where my Product component is not showing up when I check in the browser. Surprisingly, there are no errors in the console. Both my index.html and app.js files are located at the same level. To run the app, I ...

Observing data within an AngularJS service

I am currently working with a service called sharedData and a controller named HostController. My goal is to have the HostController monitor the saveDataObj variable within the sharedData service, and then update the value of host.dataOut, which will be re ...

What does getsession.insert in the Ace Editor return?

Seeking clarification on the return values of the addMarker and insert functions in ace editor's edit session. The official documentation lacks detail, leaving me uncertain. Refer to the edit session API for more information. I've encountered i ...

What steps can be taken to ensure your bot successfully sends the second argument?

Who just handed out an L to user#0000? Looks like JohnGameRage#0000 did! ...

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

Change the colors of a dynamic row in an HTML table using various options

I have successfully implemented a dynamic table using HTML and JavaScript. However, instead of applying alternate row colors, I want to assign a unique color to each row. How can I achieve this? <!DOCTYPE HTML> <html> <head> ...

Unlocking the Power of Localization: An Easy Guide to Accessing JavaScript Values

After utilizing the localization helper created by Matt Hawley, I found it to be incredibly effective. However, I am encountering an issue when attempting to retrieve the values in javascript/jQuery. For example, I am unable to fetch the resource text usi ...

Is there a way to trigger a function for both a left and middle click at the same time?

Check out this code snippet: $('a').on('click', function(){ myfunc($(this)); }); function myfunc(el){ console.log('Either left or middle click clicked on the link'); } a{ cursor: pointer; } <script src="https://aj ...

I am experiencing an issue wherein after using jquery's hover() function, the CSS :hover state is not

Following the jquery hover function, the css hover feature ceases to work. In my html, there are multiple svg elements. A jquery script is applied where hovering over a button at the bottom triggers all svg elements to change color to yellow (#b8aa85). S ...

What is the reason behind needing to restart the server each time I make a change to my React application?

I'm diving into my first project using React, stepping away from my usual tools of pure HTML, JavaScript, PHP, and Node.js. I decided to create a single-page application portfolio, but I've encountered a frustrating issue. Every time I make a cha ...

Angular displaying undefined for service

I have created a service for uploading images to a server, and I am encountering an issue when calling this service from my controller. The error message indicates that the function 'uploadFileToUrl' is undefined. Below is the code for my servic ...

React Context Matters: Troubles Unleashed

I've been facing some difficulties with passing a value from one file to another. The problem seems to be related to implementing context, but I can't seem to figure out where I went wrong! import React from 'react' const Mycontext = ...