Is Angular automatically assigned to `window.angular` on a global level when it is loaded as a CommonJS module?

When I import Angular 1.4 in my Webpack build entry point module as a CommonJS module using

var angular = require("angular");
, it somehow ends up being accessible in the global namespace of the browser (as window.angular).

Upon examining the source code of Angular 1.4, I came across the following snippet:

(function(window, document, undefined) {'use strict';

...

var
    msie,
    jqLite,
    jQuery,
    slice             = [].slice,
    splice            = [].splice,
    push              = [].push,
    toString          = Object.prototype.toString,
    getPrototypeOf    = Object.getPrototypeOf,
    ngMinErr          = minErr('ng'),

    /** @name angular */
    angular           = window.angular || (window.angular = {}),
    angularModule,
    uid               = 0;

To clarify, does this line:

angular           = window.angular || (window.angular = {})

mean that upon requiring Angular, it checks if the global angular object exists and creates it if not, potentially causing a side effect?

Answer №1

Angular relies heavily on global variables, along with a variety of older libraries that were not able to transition into full-fledged CJS/UMD modules (and Angular hasn't made the switch yet, even as of v1.5.2).

var
...
angular           = window.angular || (window.angular = {})

can be simplified to

if (!window.angular)
  window.angular = {};

var
...
angular           = window.angular;

The first option saves a few bytes and is slightly more hacky in nature.

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

Preventing Past Dates from Being Selected in JQuery Date Picker

Need help with a date picker that only allows selection of the 1st and 15th dates of each month. How can I prevent users from selecting previous dates? <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" ty ...

Utilizing recorder.js to incorporate audio recording functionality into web2py

I am currently working on a web application where I need to integrate the recorder.js file for audio recording functionality. However, I am facing issues in implementing it within the web2py framework. Can you provide detailed guidance on how to utilize th ...

Issue encountered in Vite Preview: Uncaught (in promise) SyntaxError: JSON.parse found an unexpected character at the beginning of the JSON data, line 1 column 1

Encountering the error message Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data when running vite preview after running vite build. https://i.sstatic.net/61Y9t.png Here is my vite.config.js: import { ...

Can you please explain the purpose of the mysterious JavaScript function f => f?

Currently, I am utilizing a third-party library that utilizes a function with functions as arguments. During my conditional checks, I determine whether to add a particular function as a parameter or not. However, providing null in these cases results in er ...

Retrieving information from React elements

Recently, I ventured into the world of React and started building a mock website for online food ordering. One of my components is called Items, which utilizes props to display all the food items on the webpage. import { useState } from "react"; ...

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

My current time zone is GMT+8, and the AWS region I am using is Singapore (ap-southeast-1). I am facing an issue where there are discrepancies in date calculations between my local machine and when I deploy my code on AWS Lambda. My goal is to ensure that ...

Maintain the markup created by jQuery inside the AJAX function called by setInterval

In the code snippet below, real-time markup is generated and automatically updates using the setInterval function. The markup includes buttons and hidden content within div elements. Each button reveals its corresponding div, but the div reverts to a hid ...

Dealing with blank values in jQuery DataTables

I am currently utilizing jQuery DataTable to display data in table format; within the table, there is a button that triggers a Bootstrap Modal for editing two of these values, and I utilize Ajax to send the modified values to a Spring Controller. The init ...

What is the best way to prompt users to submit comments with a popup textarea box?

Within my project, I have incorporated a dropdown list: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject <span class="caret"></span> </but ...

AngularJS 2 treats lists as custom directives

I am working on developing an e-commerce website. The project involves displaying a list of goods and a basket (which contains selected goods). In order to achieve this, I have created a controller with two arrays: one for goods (already filled) and anothe ...

Tips for bypassing an argument using the POST method in NodeJS

Hey there! I started off by creating a question about passing over data using the GET method, but now I'm facing a new problem when trying to pass over data with the POST method. Below is my code snippet where things seem to be going wrong. My goal is ...

"Auth.currentSession is indicating that there is no user currently logged in

I am currently working on a basic React app with authentication using aws-amplify. My user pool is set up in Cognito and I can successfully redirect the user to the hosted UI for login. However, when trying to retrieve the current session, I am receiving a ...

incorporating a qml conditional statement when assigning a class

I have an item and I want to dynamically add a class based on a variable import "class1" import "class2" Item { id: myID property variant myVar: 0; anchors.fill: parent; function update() { switch(myID.myVar) { ...

What steps do I need to take in order to show the present value using a range input?

Hey there! I'm working on a code in HTML that includes an input of type range. Here's what it looks like: This is my input: <input type="range" min="1" max="100" value="50" class="slider" id="myRange"> Unfortunately, I'm unable to s ...

Refreshing the current window with the ``Window.location.reload()`` function

I have integrated a map that displays clients using markers. The map I am utilizing is Leaflet with an AngularJS directive. The issue I am facing is that when I initially access the map, it functions correctly. However, when I change routes, all the marke ...

CSS positioning with absolute value + determine the number of elements positioned above

Is it feasible to adjust the position of an absolutely positioned element based on the height of the element above it? The objective is to align elements with the class "pgafu-post-categories" one line above an H2 heading, even when the lengths v ...

When displayed in a dialog, the active tab in AngularJS Bootstrap tabs does not appear properly

When I open my dialog box, I have multiple tabs displayed. When I choose tab_2 to be active, the content does not appear, which is quite unusual. <div class="portlet-body"> <div class="tabbable-blue" id="my_tabDialog& ...

"Identifying Mouse Inactivity in React: A Guide to Detecting When the Mouse

I need to dynamically control the visibility of a button element based on mouse movement. I am able to show the button when the mouse is moving using onMouseMove, but I'm stuck on how to hide it when the mouse stops moving. React doesn't have an ...

Tips for organizing HTML logic in a separate document

I am faced with the task of displaying a list in HTML based on specific conditions: <!-- Display list if there are more than 5 results --> <div list.numberOfResults > 10"> <b>Name: </b>{{list.name}} <b>ID ...

retrieving a map containing the values from an array using the `.includes()`

Currently, I am attempting to map my routes based on the roles they possess. For example, my mapped routes may have roles like ["User", "Admin"] or just ["Admin"]. The current user can have one or multiple roles assigned to them. This particular function w ...