Currently, I am diving into the book Lukas Ruebbelke's AngularJS in Action,
The author emphasizes throughout the text that,
In AngularJS, a view is essentially the modified version of HTML after it has been processed by AngularJS.
I'm struggling to grasp the concept of the compilation process and what exactly takes place behind the scenes.
Could it be related to the process of connecting the HTML and the controllers with the scope through some form of "gluing"?
AngularJS Compilation operates in a unique manner. It interacts directly with the HTML DOM instead of dealing with strings and manipulates it accordingly. This framework utilizes two-way data-binding to keep the model and view synchronized.
The HTML compiler in Angular allows for the addition of new behaviors or attributes to any HTML element through directives. The compilation process in AngularJS occurs within the web browser itself; there is no involvement of server-side processing or pre-compilation steps. Angular employs the $compiler service to compile the Angular-specific HTML page.
The compilation process in Angular begins once the static DOM of your HTML page is fully loaded, progressing through two phases:
1. Compile
This phase involves traversing the DOM and gathering all the directives present, resulting in a linking function.
2. Link
In this stage, the directives are combined with the scope to generate an active view. Any alterations made in the scope model reflect in the view, while interactions by users with the view impact the scope model. The concept of compiling and then linking originates from C programming, where code is first compiled before being linked for execution - a process that mirrors AngularJS closely.
Hence, we can affirm that a view in AngularJS symbolizes the HTML post-compilation by AngularJS.
The author of the book discussed the concept in the upcoming chapter:
Imagine compilation as the process of connecting HTML and controllers with the scope.
https://i.sstatic.net/7cZJn.png
The AngularJS compilation occurs in 2 stages:
1) the compilation phase and,
2) the linking phase.
https://i.sstatic.net/iT7UW.png
https://i.sstatic.net/M3ESH.png
After the HTML is loaded, AngularJS scans the DOM and compiles a list of all AngularJS directives; this is known as the compilation phase. Once the HTML is thoroughly examined, AngularJS moves into the linking phase, where it connects the AngularJS components to relevant scope instances.
Once the AngularJS template is connected to its corresponding controller through scope, the bindings become active and the two(view & controller) can interact.
https://i.sstatic.net/RB5DF.png
The compilation process happens automatically, and the linking between AngularJS templates and scope is seamless, but manual compilation of templates and scope together is also possible. Although it's not commonly needed, the function call effectively demonstrates the process.
$compile(element.contents())(scope);
In this method call, we are combining the contents of an HTML element with a scope object.
I bet you've already digested the official Angular documentation on the compilation process, but let me offer my own take on the subject.
Indeed, the compiler acts as the vital link between the controller, responsible for holding data in the scope, and the HTML template. Essentially, it functions similarly to popular templating engines such as MustacheJS by matching variables within your HTML template with their respective values in the scope. Additionally, the compiler handles the compilation of directives, though further details are available in the provided documentation.
In my quest to integrate Azure AD login into a single-page application built with ReactJS, I utilized the MSAL React package. While successfully implementing the login functionality, I encountered an issue during logout where I found myself unable to redir ...
html file: <select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress"> <option value=''>--Select Address --</option> </select> <form name="shippingForm" class="form-horizontal" role="form" ...
We have a JavaScipt project underway that could greatly benefit from incorporating AngularJS. However, due to the size of the project, completely rewriting it in Angular is not feasible. Does anyone have any suggestions or tips on how to integrate Angula ...
The videoSrc variable is not evaluating correctly images/{{videoSrc}}.mp4 When I write just videoSrc, it works fine. But when I concatenate it with other strings, it doesn't work. Check out this jsfiddle ...
Is there a way to redirect all URLs containing "/something" in Express to the base path "/:=", while still maintaining additional paths to their respective pages? For instance, I would like to implement the following redirects: "/something" redirects to ...
I'm currently working on an Express application and I am trying to capture all routes to redirect users to /public/app/index.html: app.all('/*', function (req, res, next) { // Let's just serve the index.html for other files to enab ...
I have a Component called "CDataTable" that renders columns in a for loop. Inside the loop, there is a template: <template v-if="typeof col.template !== 'undefined'" #body="{data}"> <component :is="compile(co ...
Attempting to update the targetRow's field with a variable converted from a string to a number is resulting in strange output in Chrome's console: targetRow[fieldName] = Number(value); console.log(targetRow[fieldName]); // = ...
There is a feature in my application where clicking the Add button triggers a modal to appear. The modal contains 3 input boxes for filling in details. Once the information is saved, a list is displayed on the main page with the title of the newly added it ...
Is it possible to change multiple textboxes with corresponding labels after a click event? Issue: The current output only displays the value of the last textbox. $(function () { $('a.edit').on('click', function (e) { e.pre ...
I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...
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(&a ...
Within my code example, I encountered an issue with image sources and hrefs in a HTML String named tinymceToHTML. When downloading this html String, the paths were set incorrectly. The original image sources appeared as "/file/:id" in the String. However, ...
I am seeking solutions to restructure an object that has multiple arrays of objects so that I can access the object directly. console.log(value.data.summary[0].data) Instead of accessing arrays in this manner, I want to modify my data structure. Is there ...
Is there a simple method for extracting only the necessary functions from the jQuery library? I have found that many of the functions within the library are not being utilized, so it would be beneficial to remove them. ...
I'm currently working on developing a custom React hook that will provide users with a function to execute. This hook is designed to generate a function internally. Check out this simplified example // fetch.js import { useEffect, useState} from &qu ...
After going through various examples and solutions in related questions on StackExchange in an attempt to solve my issue, I have decided to post my question. My ultimate goal is to access complex JSON data via an API and REST. I intend to import this data ...
Looking to create a page for collecting user information. This is a Codesandbox.io page where the issue arises. https://codesandbox.io/s/material-demo-z1x3q?fontsize=14 When I try to input "d" continuously in the 성별* textfield, I can only enter "d" ...
I have created a Login page that is supposed to post Username and Password using Axios. I wrapped the username and password into an object as shown in the code below, but when I submit the form, I receive a "201" response. Everything seems to be working fi ...
I thought this would be a simple task, but I'm completely stuck with the code I currently have! https://i.sstatic.net/Y36Cg.png render: (num) => { return <span><b>{num.toFixed(2)}</b>%</span>; // rounding to two de ...