SUB.

Name : Web Design Technologies

UNIT-3
Angular JS:

BY . MS.vilash vadhel , NJSMTI

AngularJS is a discontinued free and open-source JavaScript-based web
framework for developing single-page applications. It was maintained mainly
by Google and a community of individuals and corporations. It aimed to simplify both the
development and the testing of such applications by providing a framework for client-
side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures,
along with components commonly used in web applications and progressive web
applications.

AngularJS was used as the frontend of the MEAN stack, that consisted
of MongoDB database, Express.js web application server framework, AngularJS itself
(or Angular), and Node.js server runtime environment.

As of January 1, 2022, Google no longer updates AngularJS to fix security, browser

compatibility, or jQuery issues. The Angular team recommends upgrading to Angular
(v2+) as the best path forward, but they also provided some other options.

Bootstrap
The task performed by the AngularJS bootstrapper occurred in three phases[11] after
the DOM has been loaded:

Creation of a new Injector

Compilation of the directives that decorate the DOM

Linking of all directives to scope

AngularJS directives allowed the developer to specify custom and reusable HTML-like
elements and attributes that define data bindings and the behavior of presentation
components. Some of the most commonly used directives were:

ng-app
Declares the root element of an AngularJS application, under which directives can be
used to declare bindings and define behavior.

ng-class
Conditionally apply a class, depending on the value of a Boolean expression.

ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.

ng-if
Basic if statement directive that instantiates the following element if the conditions are
true. When the condition is false, the element is removed from the DOM. When true, a
clone of the compiled element is re-inserted.

ng-model
Similar to ng-bind, but establishes a two-way data binding between the view and the
scope.

ng-model-options
Provides tuning for how model updates are done.

ng-repeat
Instantiate an element once per item from a collection.

ng-show & ng-hide

Conditionally show or hide an element, depending on the value of a Boolean
expression. Show and hide is achieved by setting the CSS display style.

ng-switch
Conditionally instantiate one template from a set of choices, depending on the value of
a selection expression.

ng- view
The base directive responsible for handling routes that resolve JSON before rendering
templates driven by specified controllers.

Since ng-* attributes are not valid in HTML specifications, data-ng-* can also be used
as a prefix. For example, both ng-app and data-ng-app are valid in AngularJS.

Single Page Application

Single page application (SPA) is a web application that fits on a
single page. All your code (JS, HTML, CSS) is retrieved with a
single page load. And navigation between pages performed without
refreshing the whole page.

Angular Application
Every angular application starts from creating a module. Module is
a container for the different parts of your application: controllers,
service, etc.

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

Lets define a simple controller:

app.controller('HomeController', function($scope) {

$scope.message = 'Hello from HomeController';

});

After we created module and controller, we need to use them in our

HTML.

First of all, we need to include angular script and app.js that we

built.

Then need to specify our module in ng-app attribute and controller

in ng-controller attribute

If you done this correctly, you should see:

ngRoute
Since we are making a single page application and we don’t want
any page refreshes, we’ll use Angular’s routing capabilities.

We will use ngRoute module for that.

The ngRoute module provides routing, deeplinking services and

directives for angular apps.

We need to include angular-route script after the main angular

script.

Then we need to specify that our module depends

on ngRoute module to be able to use it.

The next thing is to distinguish common HTML for every page. This
HTML will be layout of the website.

Then we need to specify the place where HTML of each page will
be placed in our layout. There is a ng-view directive for that.
ng-view is an Angular directive that will include the template of
the current route (for example, /blog or /about) in the main layout
file.

In plain words, it takes the file we specified for current route and
injects it into the layout in the place of ng-view directive.

When HTML is ready, we need to configure our routes. We will

use $routeProvider service from the ngRoute module.

For each route, we need to specify templateUrl and controller.

If user will try to go to the route that does not exist, we can handle
this by using otherwise function. In our case, we will redirect user
to the “/” route:
Then we need to build controllers for every route (we already
specified their names in routeProvider):
Index.html
App.js

```
  ng-disabled,
 ng-show,
 ng-hide,
 ng-click,
 Modules (Application, Controller) ,
 Forms (Events, Data validation, ng-click)

 ng-show,
The ng-show directive shows the specified HTML element if the expression
evaluates to true, otherwise the HTML element is hidden.

Syntax
<element ng-show="expression"></element>

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="">

CLICK ON checkbox<input type="checkbox" ng-model="check">

<div ng-show="check">
<h1 style="color:green">ANGULAR JS</h1>
</div>

</body>
</html>

The ng-disabled Directive in AngularJS is used to enable or disable

the HTML elements. If the expression inside the ng-disabled attribute
returns true then the form field will be disabled or vice versa. It is usually
applied on the form field (i.e, input, select, button, etc). The value of
the disabled attribute can’t be set to false, that in turn, disabled the elements,
regardless of their value, in the presence of the disabled attribute in HTML.
Syntax:

<element ng-disabled="expression">
Contents...
</element

 ng-disabled,
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.
js"></script>
<body ng-app="">
Click here to disable all the form fields:

<input type="checkbox" ng-model="all"><br>

<br>

<input type="text" ng-disabled="all">

<input type="radio" ng-disabled="all">Female
<input type="radio" ng-disabled="all">Male
<select ng-disabled="all">
<option>MCA</option>
<option>IMCA</option>
</select>

</body>
</html>
  ng-click,
The ng-click directive tells AngularJS what to do when an HTML element is
clicked.

Syntax
<element ng-click="expression"></element>

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body ng-app="">

<p>Click the button:</p>

<button ng-click="count = count + 1" ng-init="count=0">OK</button>

<p>The button has been clicked {{count}} times.</p>

<p>This example increases the value of the variable "count" every time you click
the button.</p>

</body>
</html>

Adding a Controller
Add a controller to your application, and refer to the controller with the ng-
controller directive:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "NJSMTI";
$scope.lastName = "MCA SEM-1";
});
</script>
</body>
</html>