Advanced Web Programming-3161611 Introduction to Angular JS

Unit-2-Introduction to AngularJS

What is AngularJS.
AngularJS is an open-source front-end web application framework developed by Google. It is
designed to facilitate the development of dynamic, single-page applications (SPAs) by
extending HTML with additional features.

Key Features of AngularJS:

1. Two-Way Data Binding:

o One of the most powerful features of AngularJS is two-way data binding.
This means that any change made in the view (the user interface) will
automatically be reflected in the model (the data), and vice versa.
o For example, if the user changes an input field, the corresponding variable in
the model will update instantly.
2. MVC Architecture:
o AngularJS follows the Model-View-Controller (MVC) design pattern, which
separates the application logic (Model), user interface (View), and user input
handling (Controller).
o This separation helps make the application easier to manage and scale.
3. Directives:
o Directives are custom HTML tags or attributes that extend HTML's
functionality.
o For example, ng-model, ng-bind, and ng-repeat are built-in directives that
AngularJS provides.
o Developers can also create their own directives to reuse code and add more
functionality to HTML elements.
4. Dependency Injection (DI):
o AngularJS has a built-in dependency injection system that allows you to
manage services and their dependencies more easily.
o This makes your application easier to test, more modular, and more
maintainable.
5. Routing:
o AngularJS has a built-in routing module that allows you to create single-page
applications by managing views and URLs without needing to reload the
entire page.
o This makes navigation smoother and provides a better user experience.
6. Templates:
o AngularJS uses templates which are HTML pages with embedded AngularJS-
specific tags.
o These templates dynamically bind data to HTML elements, making it easier to
create dynamic content.
7. Filters:
o Filters in AngularJS are used to format or manipulate data before it is
displayed in the view.
o For example, you can use filters to format dates, currency, or even custom data
transformations.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 1

 Advanced Web Programming-3161611 Introduction to Angular JS

8. Testing:
o AngularJS was designed with testability in mind, making it easier to write
unit tests for your application.

Why Use AngularJS?

 Faster Development: AngularJS provides a lot of built-in functionality, such as two-

way data binding, templates, and routing, which makes it faster and easier to develop
rich web applications.
 Better User Experience: It enables the creation of Single Page Applications (SPAs),
which offer a more fluid user experience by loading content dynamically without
refreshing the page.
 Testability: With tools built for testing, AngularJS makes it easier to write unit tests
and ensure that your application works as expected.
 Community Support: Since it’s backed by Google, AngularJS has a large
community of developers, extensive documentation, and many resources to help
developers.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 2

 Advanced Web Programming-3161611 Introduction to Angular JS

Advantages of AngularJS

1. Faster Development:
o With features like two-way data binding, directives, and built-in services,
AngularJS reduces the amount of code developers need to write, speeding up
the development process.
2. Modular Architecture:
o AngularJS promotes modularity in code through components like controllers,
services, directives, and filters, making the application easier to maintain and
extend.
3. Improved Testing:
o AngularJS is designed with testability in mind. It provides tools to easily test
components like controllers, services, and directives.
4. Reusability:
o With services and directives, AngularJS promotes code reusability. You can
create modular and reusable code blocks that can be shared across multiple
parts of the application.
5. Single Page Applications (SPA):
o AngularJS enables building SPAs, where the application loads once and
dynamically updates without requiring full-page reloads, resulting in faster
and smoother user experiences.
6. Two-Way Data Binding:
o Reduces the need for writing complex code to sync data between the model
and view. It automatically handles updates, improving code efficiency and
readability.
7. Community and Support:
o AngularJS, being backed by Google, has a large and active community, plenty
of resources, and strong support, making it easier for developers to get help
and stay up to date with the latest trends.

Disadvantages of AngularJS

1. Complexity: The learning curve can be steep, especially for developers new to
JavaScript frameworks. Concepts like dependency injection and the MVC architecture
may take time to master.

2. Performance Issues: AngularJS can suffer from performance problems in

applications with many watchers or bindings. This can lead to slow rendering and
responsiveness.

3. SEO Limitations: Client-side rendering can complicate search engine optimization,

as crawlers may struggle to index content effectively.

4. Heavy Framework: Being a full-featured framework, it can be bloated for small

applications. This can lead to slower load times.

5. Limited Flexibility: The framework imposes certain structures and patterns, which
can be restrictive for developers looking for a more flexible approach.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 3

 Advanced Web Programming-3161611 Introduction to Angular JS

MVC with Angular JS

AngularJS follows the Model-View-Controller (MVC) architectural pattern,

Model View Controller or MVC as it is popularly called, is a software design pattern for
developing web applications. A Model View Controller pattern is made up of the following
three parts −
 Model − It is the lowest level of the pattern responsible for maintaining data.
 View − It is responsible for displaying all or a portion of the data to the user.
 Controller − It is a software Code that controls the interactions between the Model
and View.

The Model

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

The View

A presentation of 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.

The Controller

The controller 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.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 4

 Advanced Web Programming-3161611 Introduction to Angular JS

What is SPA (Single page application) in AngularJS?

A Single Page Application (SPA) in AngularJS is a web application that loads a single
HTML page and dynamically updates that page as the user interacts with the app. This
approach contrasts with traditional multi-page applications, where each user interaction
typically results in a full page reload.

Key Characteristics of SPAs in AngularJS

Dynamic Content Loading: SPAs load content dynamically without refreshing the entire
page. AngularJS uses AJAX (Asynchronous JavaScript and XML) requests to fetch data from
the server and update the view accordingly.

Routing: AngularJS provides a routing module (ngRoute) that allows developers to define
routes in the application. Each route corresponds to a different view or component, enabling
seamless navigation without full page reloads.

Two-Way Data Binding: AngularJS's two-way data binding keeps the model and the view in
sync. Any changes made to the model update the view and vice versa, providing a smooth
user experience.

Components and Directives: AngularJS supports the creation of reusable components and
directives, which help manage the application's structure and behavior, making it easier to
build and maintain complex UIs.

Performance: By avoiding full page reloads, SPAs can provide a faster and more fluid user
experience

SEO Challenges: Traditional SPAs can face challenges with search engine optimization
(SEO) because they rely heavily on JavaScript to render content. However, techniques like
server-side rendering (SSR) or pre-rendering can help mitigate these issues.

Key Points of Single-Page Applications.

• The application is responsive in the UI with no page flicker
• The Back/Forward buttons work as expected
• More JavaScript than actual HTML
• Dynamic data loading from the server-side API works with restful web service with
JSON format
• Rich interaction among UI components
• Fewer data transfers from the server and most of the page processes in the UI occurs
client-side.
•Applications written in AngularJS are cross-browser compliant. Angular automatically
handles the JavaScript code suitable for each browser.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 5

 Advanced Web Programming-3161611 Introduction to Angular JS

Basic Concepts in AngularJS:

1. Modules:
o An AngularJS application is organized into modules, which are containers for
the various components like controllers, services, and directives.
o A module can be thought of as an "app" that brings together everything
needed to run the application.

var app = angular.module('myApp', []);

2. Controllers:
o Controllers in AngularJS are used to define the application logic and manage
the data that is passed between the view and the model.
o Controllers are responsible for handling user input and making decisions based
on the application’s state.

app.controller('MainController', function($scope) {
$scope.message = 'Hello, AngularJS!';
});

3. Scope:
oThe $scope object is a fundamental part of AngularJS and acts as a bridge
between the controller and the view.
o Any data added to the $scope object in a controller becomes available in the
view.
4. Expressions:
o AngularJS uses expressions to display dynamic content. Expressions are
written inside double curly braces {{ expression }}.

<h1>{{ message }}</h1>

5. Directives:
o AngularJS uses directives to extend HTML and add behavior to the DOM
elements.
o Some common built-in directives are ng-app, ng-model, ng-repeat, and ng-
click.

<div ng-app="myApp" ng-controller="MainController">

<input ng-model="name" />
<p>Hello, {{ name }}!</p>
</div>

6. Services:
o Services are used to share data and logic between controllers and other
components.
o You can use built-in services like $http for making API calls, $timeout for
scheduling tasks, or create your own custom services.

app.service('UserService', function() {
this.getUser = function() {
return { name: 'John Doe' };
};
});

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 6

 Advanced Web Programming-3161611 Introduction to Angular JS

Basics and Syntax of AngularJS

AngularJS, as a framework, is built around the concept of MVC (Model-View-Controller) and offers
powerful features like two-way data binding, directives, services, and dependency injection.

1.Data Binding in AngularJS

ng-binding:

ng-binding is an AngularJS directive used to bind an element’s content to a variable in the

AngularJS model (scope).

It’s not often used explicitly anymore, as Angular provides more straightforward data binding
with {{expression }} syntax.

 How it works:
You apply ng-binding to an HTML element, and it will automatically update the
content of that element whenever the value of the model (the associated Angular
variable) changes.
 Example:

<span ng-binding="message"></span>
Here, the content of the <span> will be automatically updated whenever the message
variable in the controller (model) changes.

AngularJS provides two-way data binding, which means changes in the view automatically
update the model, and changes in the model automatically update the view.

 Syntax:

<input ng-model="name">
<p>Hello, {{ name }}!</p>

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 7

 Advanced Web Programming-3161611 Introduction to Angular JS

2. Expression in AngularJS

An expression in AngularJS is any valid JavaScript code enclosed within curly braces {{ }}.
This is the simplest form of binding and is used to display the value of a model or a
calculation result directly in the view.

 How it works:
The expression evaluates the JavaScript code inside the {{}}, and AngularJS
automatically updates the DOM whenever the value changes.

Example:
<p>{{ message }}</p>

In this example, the value of message is displayed in the <p> tag, and if message
changes, the view updates automatically.

<div ng-controller="appController">
<span>
4+5 = {{4+5}}
</span>
<br />
<br />
<span ng-init="quantity=5; cost=25">
Total Cost = {{quantity * cost}}
</span>
</div>

 Using numbers
<p>Expense on Books: {{cost * quantity}} Rs</p>
 Using Strings
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
 Using Object
<p>Roll No: {{student.rollno}}</p>
 Using Array
<p>Marks (Math): {{marks[3]}}</p>

Key Differences:

 ng-binding is a directive used to bind an element's content to a model, and it’s not as
commonly used today as {{}} expressions.
 Expression is a template expression that directly binds data or performs calculations
inside the {{ }} syntax.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 8

 Advanced Web Programming-3161611 Introduction to Angular JS

Directives in AngularJS

A directive is a special marker in AngularJS that attaches behaviour to elements in the DOM
(Document Object Model). Directives can either extend HTML by adding new attributes or
custom tags, or they can be used to manipulate the DOM (e.g., show/hide elements, repeat
elements, etc.).

Types of Directives in AngularJS

1. Built-in Directives: AngularJS provides several built-in directives to simplify DOM

manipulation.
o ng-app: Initializes an AngularJS application.
o ng-controller: Defines a controller to manage a part of the view.
o ng-model: Binds an HTML input element to a variable in the controller.
o ng-repeat: Loops through an array and displays data.
o ng-show / ng-hide: Conditionally shows or hides an element based on a
boolean expression.
o ng-click: Attaches an event handler for click events.
2. Custom Directives: You can also create your own custom directives to add reusable
logic or behavior to your application.

Common Built-in Directives

1. ng-app
o Initializes the AngularJS application.

<html ng-app="myApp">

2. ng-controller
o Defines the controller that will manage the scope for a part of the HTML
view.

<div ng-controller="MainController">
<p>{{ message }}</p>
</div>

3. ng-model
o Binds the value of an HTML form element (like an <input>) to a variable in
the controller.

<input ng-model="name">
<p>Hello, {{ name }}!</p>

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 9

 Advanced Web Programming-3161611 Introduction to Angular JS

4. ng-repeat
o Loops through an array and repeats HTML for each item in the array.

<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>

5. ng-click
o Executes a function when an element is clicked.

<button ng-click="clickMe()">Click Me</button>

Custom Directives Example

AngularJS allows you to create custom directives for specific behavior that you want to reuse
across different parts of your application.

Creating a Custom Directive: A custom directive is created using

angular.module().directive().

angular. Module('myApp', [])

. directive ('helloWorld', function() {
return {
restrict: 'E’, // Restrict to element (you could also use 'A' for attribute or 'C' for class)
template: '<h1>Hello, World! </h1>'
};
});

Using the Custom Directive in HTML:

<hello-world></hello-world>
This would display:
Hello, World!

Explanation:

 restrict: Determines how the directive can be used in HTML (as an element, attribute,
class, or comment).
 template: Defines the HTML to be injected wherever the directive is used.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 10

 Advanced Web Programming-3161611 Introduction to Angular JS

Modules

In AngularJS, an application is defined as a module, which acts as a container for the various
components like controllers, services, directives, etc.

 Syntax:

var app = angular.module('myApp', []);

o 'myApp' is the name of the module.

o The second argument [] is the dependency array (if any, for including other
modules).

Controllers

Controllers in AngularJS are responsible for adding behaviour to the application. They handle
the data and functions that are passed to the view (HTML).

 Syntax:

app.controller('MyController', function($scope) {
$scope.message = 'Hello, AngularJS!';
});

o $scope binds the data between the controller and the view.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 11

 Advanced Web Programming-3161611 Introduction to Angular JS

$scope

$scope in AngularJS is an object which refers to an application model. It is an object that

binds view (DOM element) with the controller. In controller, model data is accessed via
$scope object. As we know, AngularJS supports MV* pattern, $scope object becomes the
model of MV*.

The $scope is a special JavaScript object. Both View and controller have access to the scope
object. It can be used for communication between view and controller. Scope object contains
both data and functions.
Every AngularJS application has a $rootScope that is the topmost scope created on the DOM
element which contains the ng-app directive. It can watch expressions and propagate events.

Characteristics of scope object

 It provides the APIs to observe model (example $watch).

 It can be nested, so that it limits access to the properties. Nested scopes are either child
scope or isolated scope.
 It provides the APIs to propagate any model changes from the outside of "Angular realm"
(example $apply).
 It provides context against the expression to be evaluated.

Filters

Filters are used to format data before it's displayed in the view. They can be applied within
expressions to modify the output (e.g., formatting dates, currency).

 Common Filters:
o currency: Formats a number as currency.
o date: Formats a date.
o lowercase / uppercase: Converts text to lowercase or uppercase.
 Example:

<p>{{ amount | currency }}</p>

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 12

 Advanced Web Programming-3161611 Introduction to Angular JS

Routing

Routing in AngularJS allows you to build Single Page Applications (SPA), where different
views (or pages) are displayed without reloading the entire web page. Instead, the content of
the page is dynamically updated based on the URL, creating a smoother and faster user
experience.

AngularJS provides a built-in service called $route and a module called ngRoute to help
handle routing in the application.

What is AngularJS Routing?

AngularJS routing enables you to:

 Define multiple views for your application (e.g., home, about, contact).
 Map specific URLs to views and controllers.
 Dynamically change views based on the user’s interaction or the URL path.

Setting Up Routing in AngularJS

1. Include ngRoute Module: First, you need to include the ngRoute module, which is a
part of AngularJS but is not included by default.
2. Define Routes: You define the routes in the config function of your AngularJS
module using the $routeProvider.
3. Create Views and Controllers: You create different views (templates) and assign
controllers to them.

Steps to Set Up Routing in AngularJS

1. Include ngRoute Module

To use routing in AngularJS, you must first include the ngRoute module. This can be done by
adding a script tag to include the angular-route.js file.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>

Then, you need to inject the ngRoute module as a dependency into your AngularJS
application.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 13

 Advanced Web Programming-3161611 Introduction to Angular JS

var app = angular.module('myApp', ['ngRoute']);

2. Configure Routes using $routeProvider

Once you have added ngRoute and configured your module, you can set up routes using
$routeProvider inside the .config() block.

 Define Routes: In the route configuration, you map a URL path to a view (HTML
template) and a controller.

app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/home' // Default route if the path doesn't match
}); });

 when(): Defines a route by specifying the URL (/home or /about), the template to
load (home.html or about.html), and the controller to use (HomeController or
AboutController).
 otherwise(): Redirects to a default route when the URL doesn't match any defined
routes.

3. Define Views and Controllers

Each route is associated with a view (template) and a controller. You create these templates
as separate HTML files or inline templates.

 Example Template (home.html):

<div>
<h2>Welcome to the Home Page</h2>
<p>This is the homepage of the application. </p>
</div>

 Example Template (about.html):

<div>
<h2>About Us</h2>
<p>This is the about page of the application. </p>
</div>

 Controllers (HomeController and AboutController):

app.controller('HomeController', function($scope) {
$scope.message = "This is the home page";

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 14

 Advanced Web Programming-3161611 Introduction to Angular JS

});

app.controller('AboutController', function($scope) {
$scope.message = "This is the about page";
});

4. Use <ng-view> to Display the View

To display the content associated with the active route, you need to include the <ng-
view></ng-view> directive in the HTML. This is where AngularJS will insert the
corresponding view (template) for the active route.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Routing</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-
route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
<a href="#/home">Home</a> |
<a href="#/about">About</a>
</div>

<!-- Where views are loaded -->

<div ng-view></div>
</body>
</html>

 The links (<a href="#/home"> and <a href="#/about">) allow the user to navigate
between views.
 The ng-view directive is the placeholder where the corresponding templates will be
inserted when a route is activated.

Example of a Complete AngularJS App with Routing

HTML:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Routing Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-
route.js"></script>
<script src="app.js"></script>
</head>
<body>

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 15

 Advanced Web Programming-3161611 Introduction to Angular JS

<div>
<a href="#/home">Home</a> |
<a href="#/about">About</a>
</div>

<div ng-view></div> <!-- Route content will be displayed here -->

</body>
</html>

app.js:
var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/home'
});
});

app.controller('HomeController', function($scope) {
$scope.message = "Welcome to the Home Page!";
});

app.controller('AboutController', function($scope) {
$scope.message = "Learn more about us on the About Page!";
});

home.html:
<div>
<h2>{{ message }}</h2>
<p>This is the home page content.</p>
</div>

about.html:
<div>
<h2>{{ message }}</h2>
<p>This is the about page content.</p>
</div>

Understanding Routes with Parameters

You can also pass parameters in the URL and retrieve them inside the controller.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 16

 Advanced Web Programming-3161611 Introduction to Angular JS

Route with Parameters Example:

javascript

app.config(function($routeProvider) {
$routeProvider
.when('/user/:id', {
templateUrl: 'user.html',
controller: 'UserController'
});
});

app.controller('UserController', function($scope, $routeParams) {

$scope.userId = $routeParams.id; // Get the id from the URL
});

URL:

 $routeParams allows you to access the parameters defined in the route (:id).

Template (user.html):
html

<div>
<h2>User Profile</h2>
<p>User ID: {{ userId }}</p>
</div>

When the user navigates to #/user/123, the controller will display User ID: 123.

Handling 404 (Page Not Found)

You can handle cases where the user tries to access an undefined route by setting up a
fallback route using the. otherwise() method.

$routeProvider
. otherwise({
redirectTo: '/home'
});

This will redirect users to /home if they access an undefined URL.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 17

 Advanced Web Programming-3161611 Introduction to Angular JS

Services

Services in AngularJS are reusable business logic components that can be injected into
controllers or other services.

They are used to share data and functions between different parts of the application.

 Syntax:

app.service('UserService', function() {
this.getUser = function() {
return { name: 'John Doe' };
};
});

AngularJS internal services

AngularJS internally provides many services that we can use in our application. $http is one
example. There are other useful services, such as $route, $window, $location and so on.
Some of the commonly used services in any AngularJS applications are listed below.

 $window Provide a reference to a DOM object.

 $Location Provides reference to the browser location.
 $timeout Provides a reference to window.settimeout function.
 $Log Used for logging.
 $sanitize Used to avoid script injections and display raw HTML in page.
 $Rootscope Used for scope hierarchy manipulation.
 $Route Used to display browser based path in browser URL.
 $Filter Used for providing filter access.
 $resource Used to work with Restful API.
 $document Used to access the window. Document object.
 $exceptionHandler Used for handling exceptions.
 $q: Provides a promise object.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 18

 Advanced Web Programming-3161611 Introduction to Angular JS

Application Structure of an AngularJS Application

The typical structure of an AngularJS application consists of several key parts, organized into
directories for clarity:

/myApp
/app
/controllers
- mainController.js
/services
- userService.js
/views
- index.html
/assets
- css
- js
- index.html

 index.html: The main entry point of the application where AngularJS is bootstrapped
using ng-app and where the app's view is loaded.
 controllers/: Contains all the AngularJS controllers responsible for managing the
app's logic and data.
 services/: Contains the services used to share data or handle API calls.
 views/: Contains the HTML templates used by AngularJS to display the content.
 assets/: Contains static files such as CSS and JS.

Example of Simple AngularJS Application

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-controller="MainController">
<h1>{{ message }}</h1>
<input type="text" ng-model="name" placeholder="Enter your name">
<p>Hello, {{ name }}!</p>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
$scope.message = 'Welcome to AngularJS!';
$scope.name = '';

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 19

 Advanced Web Programming-3161611 Introduction to Angular JS

});
</script>
</body>
</html>

In this example:

 The ng-app="myApp" directive initializes the AngularJS application.

 The ng-controller="MainController" directive binds the controller to the HTML view.
 The ng-model="name" directive binds the input field to the name variable in the
scope, enabling two-way data binding.
 {{ message }} and {{ name }} are AngularJS expressions that bind the data from the
controller to the view.

Explanation:

1. ng-app="myapp": This tells AngularJS that this HTML page is part of the myapp
AngularJS application.
2. ng-controller="mycrl": The mycrl controller is assigned to this part of the HTML,
which allows access to the $scope object (where the message variable is stored).
3. {{ message }}: This is AngularJS's data binding. It binds the message variable from
the $scope to the HTML content.
4. ng-click="show()": This binds the button to the show function. When the button is
clicked, it will execute the show() function, which updates the message to
"Welcome".

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 20

 Advanced Web Programming-3161611 Introduction to Angular JS

How To Install and Setup Angular JS on Windows.

Step 1: Download AngularJS
Visit the AngularJS Website: Go to the AngularJS official download page.
https://angularjs.org/

Download the Library: You can either download the minified or unminified version of AngularJS.

For development, download the unminified version.

For production, download the minified version.

Click on the version you want to download, which will prompt a download of a .js file (e.g., angular.js
or angular.min.js).

Step 2: Create Your Project Directory

Create a New Folder: Open File Explorer and create a new folder for your AngularJS project. For
example, C:\my-angular-app.
Step 3: Set Up Your Project Files
Create an index.html File: Inside your project folder, create a file named index.html with the
following content:

Html(index.html)
<!DOCTYPE html>

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 21

 Advanced Web Programming-3161611 Introduction to Angular JS

<html ng-app="myApp">
<head>
<title>My AngularJS App</title>
<script src="angular.js"></script> <!-- or angular.min.js for production -->
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{ message }}</h1>
</div>
</body>
</html>

Create an app.js File: In the same directory, create a file named app.js with the following content:

Javascript(app.js)

var app = angular.module('myApp', []);

app.controller('MainController', function($scope) {
$scope.message = "Hello, AngularJS!";
});

Step 4: Serve Your Application

To view your application in a browser, you need to serve it through a local server. You can
use several options, but here are a couple of simple ones:

Option 1: Using a Simple HTTP Server (http-server)

Download and Install Node.js (if not already done): Download from Node.js official
site(https://nodejs.org/en/download/) and install it.

Install http-server Globally: Open Command Prompt and run:

npm install -g http-server

Navigate to Your Project Directory: In Command Prompt, change to your project directory:

cd C:\my-angular-app
Start the Server: Run the following command:

http-server
Open Your Browser: Go to http://localhost:8080 to see your AngularJS application.

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 22

 Advanced Web Programming-3161611 Introduction to Angular JS

Setup AngularJS/NodeJS development Environment

The following tools to set up a development environment for AngularJS/NodeJS/MongoDB:

1. AngularJS Library/Framework(frontend)
https://angularjs.org/
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
https://react.dev/

2. Editor/IDE
https://code.visualstudio.com/docs/nodejs/angular-tutorial
https://www.jetbrains.com/webstorm/
https://github.blog/news-insights/product-news/sunsetting-atom/
https://www.sublimetext.com/
https://notepad-plus-plus.org/
https://developer.apple.com/xcode/(for apple platform)
https://netbeans.apache.org/front/main/index.html
https://brackets.io/
Online
https://onecompiler.com/
https://www.programiz.com/python-programming/online-compiler/

3. Web Browser
https://www.google.com/chrome/
https://www.mozilla.org/en-US/firefox/windows/
https://www.opera.com/
https://www.microsoft.com/en-us/edge/download

4. Web server Nodejs Library/Runtime environment/Framework(backend)

https://nodejs.org/en/download/
https://www.npmjs.com/package/http-server
https://www.mamp.info/en/windows/
https://httpd.apache.org/
https://expressjs.com/

5.MongoDB
https://www.mongodb.com/try/download/community

6.Online Practical and Assignment

https://www.bharatvainsh.in/
https://smarteportal.blogspot.com/

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 23

 Advanced Web Programming-3161611 Introduction to Angular JS

Background
Comparison Between 200 and 400

Status
Meaning Description Example
Code
The request was successfully processed
Accessing a webpage or
200 OK Success and the server returned the requested
API endpoint successfully.
data.
The server could not understand the
400 Bad Client Invalid parameters in a
request due to malformed syntax or
Request Error URL or API request.
invalid data.

AngularJS vs. ReactJS: Key Differences

Feature AngularJS ReactJS

Type Full framework Library (view layer)
Data Binding Two-way data binding One-way data flow
Performance May suffer in large apps Excellent with virtual DOM
Learning
Steep Moderate
Curve
Ecosystem Complete, monolithic Modular, flexible
Dynamic UI and component-based
Use Case Large-scale applications
apps
Large but transitioning to Angular
Community Very large and active
2+

Key Differences

Feature Refresh Reload

A simple page refresh, which A complete reload, sometimes forcing the

Definition
might use cached resources browser to ignore the cache

Cache Uses cached resources unless Can bypass the cache (hard reload) or use
Behavior manually forced cached resources (soft reload)

Faster, since cached content is Can be slower, as it fetches all resources

Speed
reused anew

Common For minor updates or re-rendering For clearing cache issues or ensuring you
Use the page see the latest content

Action Pressing F5 or using the refresh Pressing Ctrl + F5 or Cmd + Shift + R

Trigger button in the browser (hard reload)

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 24

 Advanced Web Programming-3161611 Introduction to Angular JS

References
Faculty Guide: Prof. Bharat Vainsh, Information Technology, GEC Bhavnagar

Textbooks (Best for beginners to foundational learning):

1. "HTML and CSS: Design and Build Websites" by Jon Duckett

2. "JavaScript and JQuery: Interactive Front-End Web Development" by Jon Duckett
3. "Learning Web Design" by Jennifer Niederst Robbins
4. Web Technologies Black Book HTML, JavaScript, PHP, Java, JSP, ASP.NET, XML, and
AJAX.

Reference Books (Best for in-depth information on specific technologies):

5. "JavaScript: The Definitive Guide" by David Flanagan

6. "CSS: The Definitive Guide" by Eric A. Meyer
7. AngularJS Essentials by Rodrigo Branas
8. Angularjs in Action ISBN 9789351198383 Ruebbelke, Wiley Publication
9. Node.js in Action ISBN 9789386052049 Alex Young, Bradley Meck, Mike
10. Node.Js in Practice ISBN 9789351197744 Alex Young, Marc Harter, Ben Noordhuis
Wiley Publication

Technical Books (Best for advanced, specialized knowledge and best practices):

11. "Designing with Web Standards" by Jeffrey Zeldman

12. "Node.js Design Patterns" by Mario Casciaro
13. "You Don’t Know JS (Book Series)" by Kyle Simpson
14. "Pro Git" by Scott Chacon and Ben Straub

• Website :

1. https://www.bharatvainsh.in/
2. https://smarteportal.blogspot.com/
3. https://www.w3schools.com/
4. https://www.javatpoint.com/
5. https://www.studentstutorial.com/
6. https://www.tutorialspoint.com/seo/index.htm
7. https://javascript.info/
8. https://www.guru99.com/
9. https://www.tutorialspoint.com/php/
10. https://www.codecademy.com/catalog/subject/web-development
11. https://www.geeksforgeeks.org/
12. https://www.studentstutorial.com/
13. https://www.freecodecamp.org
14. https://www.w3schools.com/angular/
15. https://devfreebooks.github.io/
16. https://www.javatpoint.com/nodejs-tutorial
17. https://nodejs.org/en/download/

Prof.Bharat Vainsh, Information Technology, GEC Bhavnagar 25