Scribd
Upload
6 views

UNIT2- awp

The document outlines the features of AngularJS, including its MVC architecture, data binding, and support for single-page applications. It explains how to integrate AngularJS with HTML and differentiates between AngularJS and JavaScript expressions. Additionally, it describes AngularJS events and their functionalities in web development.

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
6 views

UNIT2- awp

The document outlines the features of AngularJS, including its MVC architecture, data binding, and support for single-page applications. It explains how to integrate AngularJS with HTML and differentiates between AngularJS and JavaScript expressions. Additionally, it describes AngularJS events and their functionalities in web development.

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/ 8

Unit-2

1.Write a note on Features of Angular JS. 03


Ans: features of AngularJS
1.The architecture of Model-View-Controller (MVC):

• Model: Manages data and logic, responding to requests from the view and instructions
from the controller.
• View: Displays application data to users.
• Controller: Coordinates interactions between the view and the model, updating the model
in response to user input.
2.Data transformation and filters:

• Strong filters are available in AngularJS for modifying data before it is displayed in
templates. Currency, orderBy, and filter are examples of common filters.
3.Single-Page Applications (SPAs) and Routing:

• Create SPAs by putting client-side routing into practice.


• Easily manage navigation and route parameters.
4.Dependency Injection and Services:

• Services are reusable components that provide specific functionality.


• Dependency injection makes your code easier to maintain by ensuring loose connectivity
between components.
5.Custom Components and Directives:

• Use custom directives to create reusable components.


6.Examining applications using AngularJS:

• Create unit tests with Karma and Jasmine.


• Use Protractor to investigate end-to-end testing.
Advanced Subjects:

• Explore asynchronous programming and promises.


• Interact with the RESTful API
• Implement best practices and improve performance.
2. Define MVC. How it is implemented in an Angular JS application?Explain with suitable
example. OR. Explain AngularJS MVC Architecture *
ANS:
Model-View-Controller (MVC)
• Model-View-Controller (MVC) is a software design pattern that separates application
logic, user interface, and data processing.
• Each component provides a specific role, encouraging clear separation of concerns and
modular development.
• It increases modularity and reusability by breaking down an application into three
interconnected components:
o Model: It is responsible for managing application data. It responds to view
requests and to the controller's instructions to update itself.
OR
It is the lowest level of the pattern responsible for maintaining data.
o View: It is responsible for displaying all data to the users. It also specifies the data
in a particular format triggered by the controller's decision to present the data.

o Controller: It is responsible for controlling the relation between models and


views. It responds to user input and interacts with the model objects information.
The controller receives input data, validates this data, and then performs
functionality and operations that modify the state of the data model.
OR
It is a software Code that controls the interactions between the Model and View
1. Model in AngularJS:

• In AngularJS, the Model represents both the data structure and the business logic. Its
responsibilities include retrieving, storing, and altering data.

2. View in AngularJS.
• The View is responsible for presenting data to the user. It consists of HTML templates
that include AngularJS directives and expressions.

3. Controller in AngularJS.

• The Controller in AngularJS serves as a bridge between the Model and the View. It accepts
user input and modifies the View accordingly.
3.How can you integrate AngularJS with HTML? 03
ANS:

To integrate AngularJS with HTML:

1) Include the AngularJS library:


• Add the AngularJS script in your HTML file using a CDN or a local file:
• Add following script in head section:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
2) Use ng-app to initialize the app:
• Use the ng-app directive to define an AngularJS application:

<body ng-app="myApp">

<h1>Welcome to AngularJS</h1>

</body>

3) Define a controller with ng-controller:


• Define a controller using the ng-controller directive to manage data:

div ng-app="myApp" ng-controller="myController">

<h2>{{ message }}</h2>

</div>

4) Use AngularJS directives to enhance HTML functionality.


• AngularJS provides built-in directives for dynamic HTML content:
• ng-model: Binds input fields to variables.
• ng-repeat: Loops through arrays.
• ng-if/ng-show/ng-hide: Controls element visibility.
4.Differentiate between expressions of AngularJS and JavaScript.
Ans:

AngularJS Expressions JavaScript Expressions

1 Used to bind data in HTML. Used to perform operations in


JavaScript code.

2 Written inside {{ }} (double curly Written as regular JavaScript


braces). statements.

3 Works inside AngularJS scope Works in global or function scope.


($scope).

4 Used in HTML templates Used inside <script> or .js files.

(<div>{{ expression }}</div>).

5 Supports arithmetic, logical, and Supports all JavaScript operations,


ternary operations. including loops and conditionals.

6 Cannot call functions directly. Can call functions directly.

7 Cannot use loops (for, while) or Supports loops, conditions, and


conditions (if, switch). complex logic.

example : Example:

{{ 5 + 3 }} → Output: 8 document.write(5 + 3); → Output: 8


4.Write a note on angular JS
Ans:
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 is a JavaScript Framework
• AngularJS is a JavaScript framework written in JavaScript.
• AngularJS is distributed as a JavaScript file, and can be added to a web page with a script
tag:

AngularJS Extends HTML


• AngularJS extends HTML with ng-directives.
1. The ng-app directive defines an AngularJS application.
2. The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
3. The ng-bind directive binds application data to the HTML view.
Example:

What are AngularJS expressions?


Ans:
• In Angular]S the expressions are written within {{ }}. For example {{2+3}} is
expression.
• Angular]S binds data to HTML using Expressions.
• Angular]S solves the expression and return the result of evaluation.
• The expressions in Angular]S are just similar to JavaScript expressions. The expression
contains literals, variables and operators.
• Example:

Explain Angular JS events using suitable example.


Ans:An Events in AngularJS can be used to perform particular tasks, based on the action taken.
Both Angular Event & the HTML Event will be executed & will not overwrite with an HTML
Event.
Events are:
• ng-mousemove: The movement of the mouse leads to the execution of the event.
• ng-mouseup: Movement of the mouse upwards leads to the execution of the event.
• ng-mousedown: Movement of the mouse downwards leads to the execution of the event.
• ng-mouseenter: Click of the mouse button leads to the execution of the event.
• ng-mouseover: Hovering the mouse leads to the execution of the event.
• ng-cut: Cut operation leads to the execution of the event.
• ng-copy: Copy operation leads to the execution of the event.
• ng-keypress: Press of key leads to the execution of the event.
• ng-keyup: Press of upward arrow key leads to the execution of the event.
• ng-keydown: Press of downward arrow key leads to the execution of the event.
• ng-click: Single click leads to the execution of the event.
• ng-dblclick: Double click leads to the execution of the event.
• ng-blur: Fired when an HTML element loses its focus.
• ng-change: It is used whenever the value of an input element changes.
• ng-focus: It is used to apply custom behavior when an element is focused.
• ng-paste: It is used to specify custom behavior functions when the text in input fields is
pasted into an HTML element.
• ng-mouseleave: It is used to apply custom behavior when a mouse-leave event occurs on
a specific HTML element.
Example:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy