Injecting Angular into an Immediately Invoked Function Expression (IIFE)

Question

Injecting Angular into an Immediately Invoked Function Expression (IIFE)

I have come across the following discussions:

Exploring the advantages of enveloping angular controller/service/factory declarations in an anonymous function

Analyzing the benefits of wrapping an angular javascript file with "(function() { ....[js code here]...... })();"

However, none directly address my query. In the context of wrapping JavaScript in IIFE blocks, two common patterns can be observed:

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

angular.doSomething();

// more code here
})(window, window.angular);

and also this:

(function () {
'use strict';

angular.doSomething();

// more code here
})();

While it is evident that 'angular' is globally defined, I am curious about the advantages and disadvantages of the first approach over the second. Since JavaScript passes 'angular' by reference regardless, are there any performance improvements, scope security enhancements, or is it primarily beneficial for code minification?

javascript angularjs

Answer 1

Answer №1

Among the items on your list, only code minification purposes are applicable; the other two are not.

There is one additional benefit to consider. Imagine a scenario where a document loads angular, followed by your script, and then another script. The final script could potentially alter the global namespace of `angular` at a later time, introducing a newer version or even something malicious, causing unexpected behavior in your code.

Take a look at this example:

////////////////////
// 1. Angular is loaded directly.

////////////////////
// 2. Your code:
(function() {
  'use strict';
  
  window.setInterval(function() {
    console.log(angular.version.full);
    document.write(angular.version.full + "<br>");
  }, 1000);

  // more code here
})();

////////////////////
// 3. Another snippet/library:
window.setTimeout(function() {
  window.angular = { version: { full: "muhahaha!" } };
}, 2500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

The output would be different with an alternative approach:

////////////////////
// 1. Angular is loaded directly.

////////////////////
// 2. Your code:
(function(window, angular) {
  'use strict';
  
  window.setInterval(function() {
    console.log(angular.version.full);
    document.write(angular.version.full + "<br>");
  }, 1000);

  // more code here
})(window, window.angular);

////////////////////
// 3. Another snippet/library:
window.setTimeout(function() {
  window.angular = { version: { full: "muhahaha!" } };
}, 2500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Answer 2

Among the items on your list, only code minification purposes are applicable; the other two are not.

There is one additional benefit to consider. Imagine a scenario where a document loads angular, followed by your script, and then another script. The final script could potentially alter the global namespace of `angular` at a later time, introducing a newer version or even something malicious, causing unexpected behavior in your code.

Take a look at this example:

////////////////////
// 1. Angular is loaded directly.

////////////////////
// 2. Your code:
(function() {
  'use strict';
  
  window.setInterval(function() {
    console.log(angular.version.full);
    document.write(angular.version.full + "<br>");
  }, 1000);

  // more code here
})();

////////////////////
// 3. Another snippet/library:
window.setTimeout(function() {
  window.angular = { version: { full: "muhahaha!" } };
}, 2500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

The output would be different with an alternative approach:

////////////////////
// 1. Angular is loaded directly.

////////////////////
// 2. Your code:
(function(window, angular) {
  'use strict';
  
  window.setInterval(function() {
    console.log(angular.version.full);
    document.write(angular.version.full + "<br>");
  }, 1000);

  // more code here
})(window, window.angular);

////////////////////
// 3. Another snippet/library:
window.setTimeout(function() {
  window.angular = { version: { full: "muhahaha!" } };
}, 2500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

Injecting Angular into an Immediately Invoked Function Expression (IIFE)

Answer №1

Similar questions

Issues with displaying data in Angular ChartJS are troubling users

Issue with ngModelChange and change events not functioning properly in Internet Explorer 11

Encountered an issue when trying to add content following $http .then()

The FormData() object in Django backend is consistently found to be void of any data

Angular UI-Select's issue with duplicating tags while adding objects for tagging functionality

Uploading Files with Ajax in Asp.Net Core

Tips for encoding UTF characters with JSON.stringifyendcode:

When attempting to use a context, the type '...' cannot be assigned to type '...'

The console.log function cannot be used within the app.get method, yet it functions correctly when placed outside of it

Having trouble getting the CSS in my tab control to work consistently across all browsers. Any tips on how to troubleshoot and fix this issue?

Storing image data using JavaScript

Express Angular Node Template Render throwing an error: module 'html' not found

What is the best way to implement a hover feature on a Vue / Vuetify Autocomplete dropdown list?

Determining the live total number of Protovis Sparkbar instances

Implementing the requiredUnless validator of vuelidate for checkboxes: A step-by-step guide

Implementing AJAX requests in jQuery DataTable with ASP.NET MVC

Getting rid of unwanted scrollbars in a breeze

Revise the model and execute the function

Is it possible to embed an Angular application within a specific DOM element?

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction