DEVOPS AND FULL STACK DEVELOPMENT
UNIT III - Angular JS
Introduction to AngularJS
Introduction to AngularJS
AngularJS is a popular open-source framework that simplifies web development
by creating interactive single-page applications (SPAs).
Unlike traditional websites that load new pages for each click, SPAs offer a
smoother user experience by updating content on the same page.
AngularJS makes this possible by transforming static HTML into dynamic
content that adapts to user interactions.
Features like data binding and dependency injection streamline development,
saving you time and effort.
With regular updates and a large community, AngularJS ensures your web
applications stay modern and efficient.
Why Choose AngularJS?
Easy to Work With: AngularJS requires only basic knowledge of HTML, CSS, and
JavaScript. You don’t need to be an expert; just bring your curiosity and creativity.
Time-Saving Components: AngularJS allows you to work with reusable
components, saving time and reducing unnecessary code. Components are the
building blocks of your application.
Ready-to-Use Templates: AngularJS leverages plain HTML templates, which it
compiles and makes ready for use. No complex setup—just write your HTML and let
AngularJS do the heavy lifting.
Directives: AngularJS extends HTML with custom elements and attributes called
directives. These enable you to create reusable components and define custom
behaviors for your application. Directives make it easier to manipulate the DOM,
handle events, and encapsulate complex UI logic within a single component.
Steps to Install Angular JS using Angular CLI
Step 1: Install the Angular CLI
npm install - g @angular/cli
Step-2: Initialize new project using the below command
ng new my-app
Step-3: Go to your project directory
cd my-app
Project Structure:
Step-4: Run the application using the following command in the terminal
ng serve
Steps to Create First Angular App
Example: This example illustrates the basic Hello World app using Angular JS.
// Filename - app.component.ts
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: '<h1>Hello World!</h1>', styleUrls:
['./app.component.css']})export class AppComponent {}
Output:
Features of AngularJS
Model-View-Controller (MVC) Architecture:
Model: Manages data and logic, responding to requests from the view and
instructions from the controller.
View: Displays application data to users.
Controller: Orchestrates communication between the model and view,
updating the model based on user interactions.
Filters and Data Transformation:
AngularJS provides powerful filters for transforming data before displaying
it in templates. Common filters include filter, orderBy, and currency.
You can also create custom filters tailored to your application’s needs.
Routing and Single-Page Applications (SPAs):
Implement client-side routing to create SPAs.
Handle route parameters and navigation seamlessly.
Services and Dependency Injection:
Services are reusable components that provide specific functionality.
Dependency injection ensures loose coupling between components, making
your code more maintainable.
Custom Directives and Components:
Build reusable components using custom directives.
Isolate scope and communicate between components.
Testing AngularJS Applications:
Write unit tests using Jasmine and Karma.
Explore end-to-end testing with Protractor.
Advanced Topics:
Dive into promises and asynchronous programming.
Interact with RESTful APIs.
Optimize performance and follow best practices.
Architectural Concepts
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.
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.
AngularJS - First Application
An AngularJS application consists of following three important parts −
ng-app − This directive defines and links an AngularJS application to HTML.
ng-model − This directive binds the values of AngularJS application data to HTML
input controls.
ng-bind − This directive binds the AngularJS Application data to HTML tags.
1. Setting Up AngularJS:
Download AngularJS or include it via a CDN.
Add the AngularJS script to your HTML file.
Create an AngularJS module using angular.module.
2. Creating Your First AngularJS Application:
Define a controller using angular.module.controller.
Bind data to the view using ng-model.
Use directives like ng-repeat and ng-if.
Step 1: Load framework
Being a pure JavaScript framework, it can be added using <Script> tag.
<script
src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
Step 2: Define AngularJS application using ng-app directive
<div ng-app = "">
...
</div>
Step 3: Define a model name using ng-model directive
<p>Enter your Name: <input type = "text" ng-model =
"name"></p>
Step 4: Bind the value of above model defined using ng-bind
directive
<p>Hello <span ng-bind = "name"></span>!</p>
Example program:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text"
ng-model="name"
placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
Output:
Organizing the code in Angularjs
Introduction Data binding
Angular provides a function Data Binding which helps us to have an almost real-
time reflection of the input given by the user i.e. it creates a connection between
Model and View.
Data Binding is a way to synchronize the data between the model and view
components automatically.
AngularJS implements data-binding that treats the model as the single-source-of-
truth in your application & for all the time, the view is a projection of the model.
Unlike React, angular supports two-way binding.
In this way, we can make the code more loosely coupled.
Data binding can be categorized into 2 types, ie., One-way Binding & Two-way
Binding.One-Way Data Binding
The one-way data binding is an approach where a value is taken from the data
model and inserted into an HTML element.
There is no way to update model from view.
It is used in classical template systems.
These systems bind data in only one direction.
Two-Way Data Binding
Data-binding in Angular apps is the automatic synchronization of data between
the model and view components.
Data binding lets you treat the model as the single-source-of-truth in your
application. The view is a projection of the model at all times. If the model is
changed, the view reflects the change and vice versa.
Simple Data Binding
Example - 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Data Binding</title>
</head>
<body>
<div>
<p>Your name is: <span id="name-display"></span></p>
<input type="text" id="name-input" />
</div>
<script>
// JavaScript for One-Way Data Binding
const nameInput = document.getElementById('name-input');
const nameDisplay = document.getElementById('name-display');
// Binding data: when input changes, update the display
nameInput.addEventListener('input', () => {
nameDisplay.textContent = nameInput.value;
});
</script>
</body>
</html>
Output:
Input something in the input box:
Your Name is : pradeep
You wrote: pradeep
Example - 2:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></
script>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=20">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>
Output:
Cost Calculator
Quantity: 1 Price: 20
Total in rupees: 20
