"Embracing AngularJS with the power of IIF

As I delve into the world of AngularJS, I've encountered some intriguing code samples like this one:

(function(app) { 
    'use strict';
    app.directive('sideBar', sideBar);
    function sideBar() { 
      return { 
         restrict: 'E', 
         replace: true, 
         templateUrl: '/scripts/spa/layout/mypage.html' 
         } 
     }
  })(angular.module('common.ui'));

This snippet demonstrates the creation of a custom directive using an Immediately Invoked Function Expression (IIFE), but what perplexes me is the final line where it's passing a module called common.ui. I'm curious to understand how this method of passing a parameter functions and if there's an alternative approach to achieve the same goal.

javascriptangularjs

Answer №1

app now references angular.module('common.ui'). Check out this explanation on the function construct in JavaScript.

You have the option to declare it in a conventional manner.

(function() {
    var app = angular.module('common.ui');
})();

Answer №2

When the final parentheses (passing the angular.module) are omitted, the function is simply defined without any action and cannot be called without a name. The parentheses serve to invoke it immediately.

To rewrite it, the function could be given a name and then called. However, since it is only being called once, there is no need to assign it a name. Instead, it is executed without being named.

Although there are other reasons for using an Immediately-Invoked Function Expression (IIFE), such as encapsulating data or working with asynchronous code, in this case it primarily serves to avoid naming the function before invoking it.

Answer №3

Until the parentheses are present, the upper function remains out of scope and unseen. Make sure you define parameters for the upper function and then call it.

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

What is the best way to connect three or more variables with one-to-one relationships in AngularJS?

Let's say I want to create a unit converter using AngularJS. I also want the ability for multiple values to change simultaneously when editing. What I mean is, if we have 3 variables, then when one changes, the other two should automatically update. ...

javascriptangularjsmodel-binding

When a specific props element is updated, React Hooks automatically update a corresponding state element

Traditionally, I've relied on componentWillReceiveProps instead of hooks, but now I'm facing the challenge of not being able to use them. How can I efficiently update a specific element of the state when a prop changes, without causing an infini ...

javascriptreactjsreact-nativereact-hooks

Getting variables from different functions in Python can be achieved by using the return

I am trying to implement a feature where I can fetch a search term from the function getRandomVideo() and then use it in a jQuery statement. For example, if I get "Beethoven" as the search term from the variable searches, I want to use it to retrieve JS ...

javascriptjqueryhtml

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...

javascriptangulartypescript

"Creating a Responsive Table with Bootstrap 4: How to Fix the First

Currently, I am in the process of developing a schedule table that displays events alongside their respective hours. It is crucial for the first column to remain fixed as users scroll horizontally through the table. This will greatly enhance user experienc ...

javascriptjqueryhtmlcssbootstrap-4

Unable to transmit Javascript array to PHP using Ajax

I've been pulling my hair out over a seemingly simple problem. Here is the JavaScript array that's causing me trouble: var orderDetailsArray = new Array(); orderDetailsArray[0] = 'test 1'; orderDetailsArray[1] = 'test ...

javascriptphpjqueryarraysajax

Passing a service into a directive results in an undefined value

Can someone help me understand why a service I am injecting into a directive is returning undefined in certain instances? If you would like to take a look at the code, here is a plunker link: https://plnkr.co/edit/H2x2z8ZW083NndFhiBvF?p=preview var app = ...

javascriptangularjs

Sorting with jQuery UI - execute action on drag start and clear on drop

I am currently working with two blocks: one is "draggable" and the other is "sortable". My goal is to add a background color to a div when dragging an item from "sortable" and remove it once the dragging stops. Below is my JavaScript code: $(".sortableL ...

javascriptjqueryjquery-uijquery-ui-sortable

An Angular application running on an Azure App Service experiences crashes exclusively when accessed through the Chrome browser

My webapi/angular site is hosted on the same Azure app service, with authentication token and other APIs located at /site/api and the angular app at /site/app. Everything works fine on our staging environment, which is a Windows 2012 VM with IIS 7. The an ...

javascriptangularjsgoogle-chromeazureasp.net-web-api

Encountering a Typescript error while attempting to utilize mongoose functions

An example of a User interface is shown below: import {Document} from "mongoose"; export interface IUser extends Document{ email: string; password: string; strategy: string; userId: string; isValidPassword(password: string): ...

javascriptnode.jstypescriptexpressmongoose

When TypeScript compiles without errors, the resulting JavaScript file still displays issues

As a newcomer to TypeScript, I decided to experiment with custom type declarations using this straightforward code snippet. The Code Here is the script I wrote: // app.ts type Customer = { name: String, isFrequentVisitor: Boolean, } type Order = { ...

javascriptnode.jstypescript

Generate a new span element within a div element programmatically using Vuex

I have integrated an existing web application developed using vue.js. Below is the code snippet: function () { var e = this, t = e.$createElement, n = e._self._c || t; return e.messag ...

javascriptvue.js

Creating a unique styleset in styled-jsx using custom ruleset generation

TL;DR What's the best way to insert a variable containing CSS rules into styled-jsx (using styled-jsx-plugin-sass)? In my JSX style, I have the following: // src/pages/index.tsx ... <style jsx> {` .test { height: 100vh; width ...

javascriptreactjssassnext.jsstyled-jsx

How can non-numeric characters be eliminated while allowing points, commas, and the dollar sign?

Looking for an efficient method to filter out all characters except numbers, '$', '.', and ','. Any suggestions on achieving this task? ...

javascriptjquery

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

javascriptjqueryhtmlcssuser-interface

The custom layout in NestJS version 13 failed to display

I have implemented NextJs 13 in my project for building purposes. I am trying to use CustomLayout as the primary layout for my entire website. Even though there are no errors, I am facing an issue where the CustomLayout does not display as expected. ...

javascriptreactjsnext.jsnext.js13

Utilizing JQuery to request a file input and subsequently handle its processing

I am working towards creating a functionality where users can click a button, select a file, and have the program perform actions on that file, such as sending it through an AJAX request for processing. Currently, I have set up a hidden form along with a b ...

javascriptjquery

Unable to obtain the vertices of the extremities due to the absence of labels on AxisHelper

My goal is to add labels on AxisHelper in Three.js that rotate along with it. I came across a helpful code snippet from this source: // Axes axes2 = new THREE.AxisHelper(70); // Axes labels addLabelAxes(); // Add axes to zoomScene zoomScene.add(axes2); ...

javascriptthree.js

Learning the process of utilizing Json in Flot to create visually appealing graphs

I'm currently utilizing the Flot Graph Api to showcase bar charts and line charts on my client-side PHP environment. I am attempting to pass Json data to plot the graph as outlined in their examples. This is how I structure the Json data: [{"label": ...

javascriptajaxflot

methods for converting an array to JSON using javascript

Our team is currently working on developing a PhoneGap application. We are in the process of extracting data from a CSV file and storing it into a SQLite database using the File API in PhoneGap. function readDataUrl(file) { var reader = new FileReade ...

javascriptandroidarraysjsoncordova