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.
