AngularJS Core Concepts:

1.1 What is AngularJS?

AngularJS is an open-source web application framework developed by Google.
It's used for Single Page Application (SPA) projects and extends HTML DOM for interactivity.
It's entirely based on HTML and JavaScript.
AngularJS is a structural framework for creating large, single-page web applications.

1.2 Difference between JavaScript and AngularJS

Features	Javascript	AngularJs
Definition	It is an object-oriented scripted language that is used to develop mobile and dynamic web applications.	It an open-source framework used to develop dynamic web and large single-page web applications.
Developed	Netscape Communications developed it in 1995.	Google mainly developed it in 2010.
Syntax	Its syntax is much complex than Angular JS.	Its syntax is simple and easy.
Programmed	Its interpreters are written in the C and C++ languages.	It is written in the JavaScript language.
Filters	It doesn't support the filters.	It does support filters.
Learnability	It isn't very easy to learn.	It is easy to learn if anyone knows the basic knowledge of JavaScript
Concept	It is based on the dynamic typing concept.	Angular JS is based on the concept of the model view controller to build the applications.
Dependency injection	It doesn't support the dependency injection.	It supports both data binding and dependency injection.

1.3 Advantages of Angular

Open Source

Angularjs is an open source JavaScript MVC framework, therefore, at affordable costs custom application can be available to anyone. Since it is an open source, therefore, It provides the advantage of easily changing the source code to provide clarification. We can make any changes to satisfy the customer requirements. It can add employment or delete employment.

No prerequisite knowledge

HTML, CSS and JavaScript are to work on AngularJS. So, there is no need to learn any other scripting language.

Easy to customize

Due to certain built-in attributes, it is easy to extend. These attributes make it possible to extend the functionality of HTML by attaching a specific behavior with it. One can create its own directives too in it therefore it is customized.

Great MVC

As we know there are three components of MVC architecture (Model, View, Controller) so in many frameworks, a programmer has to split the code into multiple MVC components. Also, after that programmer has to code again to combine the code of these three parts. While in angular it is being done automatically. Angular strings the code together and hence saves the time of programmer too.

1.4 MVC Architecture

MVC stands for Model View Controller. It is a software design pattern for developing web applications. It is very popular because it isolates the application logic from the user interface layer and supports separation of concerns.

fig 1.1 MVC Architecture

The MVC pattern is made up of the following three parts:

1. Model:

It is responsible for managing application data. It responds to the requests from view and to the instructions from controller to update itself.

2. View:

It is responsible for displaying all data or only a portion of data to the users. It also specifies the data in a particular format triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.

3. Controller:

It is responsible to control the relation between models and views. It responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.

1.5 Introduction to SPA

fig 1.2 Diagram of SPA & Traditional life cycle

A Single Page Application is a website or web application that dynamically rewrites the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
Some examples of Single Page Applications are Gmail, Google Maps, AirBNB, Netflix, Pinterest, Paypal, and many more. Companies are using SPAs to build a scalable experience.
Single page application (SPA) is a single page (hence the name) where a lot of information stays the same and only a few pieces need to be updated at a time.
For example, when you browse through your email you’ll notice that not much changes during navigation — the sidebar and header remain untouched as you go through your inbox.
The SPA only sends what you need with each click, and your browser renders that information. This is different than a traditional page load where the server re-renders a full page with every click you make and sends it to your browser.
This piece-by-piece, client-side method makes load time much faster for users and makes the amount of information a server has to send a lot less and a lot more cost efficient

1.6 AngularJS environment

In this topic we will aware about how to set up AngularJS library to be used in web application development.

Step:1

we open the link https://angularjs.org/,we will see option there to download AngularJS library −

fig 1.3 view of AngularJS Application

Step:2

we will clicking on Download AngularJS 1 button, a screen we have get to see a dialog box shown as

fig 1.4 download AngularJS

Step:3

After clicking on download button screen will be visible like below:

fig 1.5 Select All Code

step:4

Open notepad and select all these codes by press ctrl+A Keys after that press ctrl + C keys for copy these codes and then press ctrl + V Keys for paste these codes in notepad and save these codes in notepad file in our system repective name with.js extention e.g. angular.min.js.

1.7 First App using MVC architecture

fig 1.6 AngularJS First Program

Note:The codes highlighted in red color indicate sections of AngularJS code.

Lets Crack the code Step by step:

1)ng-app="myApp":

This attribute specifies that the <div> element it's applied to will be the root of the AngularJS application. It initializes the AngularJS application module named "myApp."

2)ng-controller="myCtrl":

This attribute associates the "myCtrl" controller with the <div> element. The controller defines the logic for the scope and behavior of the elements within its scope.

3)ng-model="firstName":

This is an input element that is bound to the firstName property of the scope. It uses the ng-model directive to create a two-way binding between the input field and the scope variable.

4)ng-model="lastName":

Similar to the previous input, this one is bound to the lastName property.

5){{firstName+" "+lastName}}:

This expression within double curly braces is an example of AngularJS's data binding. It displays the value of firstName followed by a space and the value of lastName. As you type in the input fields, the full name dynamically updates.

6)<script> ... </script>:

This script section contains the JavaScript code responsible for setting up the AngularJS application.

7)angular.module('myApp',[]):

This creates an AngularJS module named "myApp." The empty array [] is used to define any dependencies for the module, but in this case, there are no dependencies.

8)app.controller('myCtrl', function($scope) { ... }):

This defines a controller named "myCtrl" within the "myApp" module. The controller function takes $scope as a parameter, which is an object that serves as a bridge between the controller and the view. Inside this function, the firstName and lastName properties are initialized on the $scope object.

9)<body> and other HTML elements:

These elements form the structure of the web page.

1.8 AngularJS Life Cycle

AngularJS, the first version of the Angular framework, has its own lifecycle for managing the different phases of a web application's existence. The AngularJS lifecycle consists of various phases that AngularJS directives, controllers, and services go through during their lifespan.
Phases of AngularJS life cycle:

The Bootstrap Phase
Compilation Phase
The Runtime Data Binding Phase

The Bootstrap Phase

The first phase of the Angularjs life cycle is the bootstrap phase, which occurs when the Angularjs JavaScript library is downloaded to the browser.
Angularjs initializes its own necessary components and then initializes your module, which the ng-app directive points to.
The module is loaded, and any dependencies are injected into your module and made available to code within the module.

The Compilation Phase

The second phase of the AngularJS life cycle is the HTML compilation stage.
Initially when a web page is loaded, a static form of the DOM is loaded in the browser.
During the compilation phase, the static DOM is replaced with a dynamic DOM that represents the AngularJS view.
This phase involves two parts: traversing the static DOM and collecting all the directives and then linking the directives to the appropriate JavaScript functionality in the AngularJS built-in library or custom directive code.

The Runtime Data Binding Phase

The final phase of the AngularJS application is the runtime phase, which exists until the user reloads or navigates away from a web page.
At that point, any changes in the scope are reflected in the view, and any changes in the view are directly updated in the scope, making the scope the single source of data for the view.
AngularJS behaves differently from traditional methods of binding data.
Traditional methods combine a template with data received from the engine and then manipulate the DOM each time the data changes.
AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than traditional methods.