Scribd
Upload
8 views9 pages

Unit3 - Awp

The document provides an overview of AngularJS directives, including ng-app, ng-init, ng-model, and ng-repeat, which extend HTML functionalities. It explains the data binding process, distinguishing between one-way and two-way data binding, and introduces the concept of Single Page Applications (SPAs) in AngularJS. Additionally, it discusses the role of controllers and modules in AngularJS applications, emphasizing their importance in managing data flow and application structure.

Uploaded by

Prabhdeep kaur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views9 pages

Unit3 - Awp

The document provides an overview of AngularJS directives, including ng-app, ng-init, ng-model, and ng-repeat, which extend HTML functionalities. It explains the data binding process, distinguishing between one-way and two-way data binding, and introduces the concept of Single Page Applications (SPAs) in AngularJS. Additionally, it discusses the role of controllers and modules in AngularJS applications, emphasizing their importance in managing data flow and application structure.

Uploaded by

Prabhdeep kaur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

UNIT-3

1. Define Directive in Angular JS. 03 *


Ans:
Directive in Angular JS.
• AngularJS facilitates you to extend HTML with new attributes. These attributes are called
directives.
• There is a set of built-in directive in AngularJS which offers functionality to your
applications. You can also define your own directives.
• Directives are special attributes starting with ng- prefix. Following are the most common
directives:
1. ng-app: This directive starts an AngularJS Application.
2. ng-init: This directive initializes application data.
3. ng-model: This directive defines the model that is variable to be used in AngularJS.
4. ng-repeat: This directive repeats html elements for each item in a collection.

1.ng-app directive

• ng-app directive defines the root element. It starts an AngularJS Application and
automatically initializes or bootstraps the application when web page containing AngularJS
Application is loaded
• Example:

2.ng-init directive:

• ng-init directive initializes an AngularJS Application data. It defines the initial values for
an AngularJS application.
• Example:

3.ng-model directive:

• ng-model directive defines the model/variable to be used in AngularJS Application.\


• Example:
4.ng-repeat directive:

• ng-repeat directive repeats html elements for each item in a collection.


• Example:

Define following AngularJS concepts *


i. ng-app
ii. ng-model
iii. ng-bind:

• The ng-bind directive tells AngularJS to replace the content of an HTML element with
the value of a given variable, or expression.
• If the value of the given variable, or expression, changes, the content of the specified
HTML element will be changed as well.
• Example:
2. Demonstrates the use of the following directives: i) ng-bind ii) ng-init iii) ng-model iv) ng-checked

3.Explain the data binding process in Angular JS.


Ans:
--> Data binding:
• Data binding is a very usef ul and powerf ul f eature used in sof tware development technologies.
• It acts as a bridge between the view and business logic of the application.
• AngularJS f ollows Two-Way data binding model.
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.

• Example:

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.
• Example:

4.Demonstrate the two way data binding method with suitable example.

4.What is SPA (Single page application) in AngularJS? Explain the advantages of


AngularJS.
Ans:
SPA:
• Single page application is a web application that fits on a single page. That means all the
code present in js, html or css file is retrieved with single page load.
• Single page applications or (SPAs) are web applications that load a single HTML page
and dynamically update the page based on the user interaction with the web application.
• The navigation between various pages is performed without refreshing the whole page.
• The typical layout of any single page web site is as follow

o Header and Footer: The header element specifies the header for the document or
section A footer typically contains the author of the document, copyright information,
links to terms of use, contact information, etc.
o Navigation Links: It is used for declaring a navigational section of the HTML
document. Websites typically have sections dedicated to navigational links that
enable the user to navigate the site.
o Article: This part specifies independent, self-contained content. It displays the
description part when the specific link is clicked.
• Example:
5.Explain controller in AngularJS with example.or Explain use of ng-controller directive in
context of Angular JS with suitable example.
Ans:
Controller in AngularJS:
• AngularJS controllers are used to control the flow of data of AngularJS applications. A
controller is defined using the ng-controller directive.
• Key Responsibilities of a Controller:
1. Handles user input and interaction.
2. Manages the application data.
3. Defines the behavior of the program.
4. Serves as an intermediary between the model and the view.
• Example:

8.Explain Angular JS Module with syntax.


Ans:
• In AngularJS, a module defines an application. It is a container for the different parts of
your application like controller, services, filters, directives etc.
• A module is used as a Main() method. Controller always belongs to a module.
• to create a module:
• Here, "myApp" specifies an HTML element in which the application will run.
• Now we can add controllers, directives, filters, and more, to AngularJS application.
• to add controller to a module:

•
9.Demonstrate the use of ng-route directive with suitable example.

You might also like