Scribd
Upload
4 views

1. Angular Introduction- MVC

Angular is a powerful application-design framework for creating single-page apps, utilizing a model-view-controller architecture for efficient data handling and user interaction. AngularJS, the JavaScript framework version, enhances HTML with directives and supports features like data binding, filters, and routing. While it offers advantages such as maintainability and unit testing, it also has drawbacks including security concerns and dependency on JavaScript for functionality.

Uploaded by

advaithks1947
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

1. Angular Introduction- MVC

Angular is a powerful application-design framework for creating single-page apps, utilizing a model-view-controller architecture for efficient data handling and user interaction. AngularJS, the JavaScript framework version, enhances HTML with directives and supports features like data binding, filters, and routing. While it offers advantages such as maintainability and unit testing, it also has drawbacks including security concerns and dependency on JavaScript for functionality.

Uploaded by

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

Angular

Introduction
• Angular is an application-design framework and development platform for
creating efficient and sophisticated single-page apps.
• AngularJS is a very powerful JavaScript Framework written in TypeScript.
• It extends HTML DOM with additional attributes and makes it more
responsive to user actions.
• AngularJS is open source, completely free, and used by thousands of
developers around the world.
• It is licensed under the Apache license version 2.0.
Angular Architecture
• Angular is a full-fledged model-view-controller (MVC) framework.
• It provides clear guidance on how the application should be structured
and offers bi-directional data flow while providing real DOM.
Model View Controller Architecture
• A software design pattern for developing web
applications.
• MVC is popular because it isolates the application logic
from the user interface layer and supports separation of
concerns.
• The controller receives all requests for the application
and then works with the model to prepare any data
needed by the view.
• The view then uses the data prepared by the controller
to generate a final presentable response.
Model View Controller Architecture
Model View Controller Architecture
• The model is the driving force of the application. This is generally the data
behind the application, usually fetched from the server. Any UI with data
that the user sees is derived from the model, or a subset of the model.
• The view is the UI that the user sees and interacts with. It is dynamic, and
generated based on the current model of the application.
• The controller is the business logic and presentation layer, which peforms
actions such as fetching data, and makes decisions such as how to present
the model, which parts of it to display, etc
Model View Controller Architecture
• 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.
• 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.
Model View Controller Architecture
• 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.
Angular JS Introduction
• AngularJS is a JavaScript framework. It can be added to an HTML page
with a <script> tag.
• AngularJS extends HTML attributes with Directives, and binds data to
HTML with Expressions.
• 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:
• <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
AngularJS
• AngularJS extends HTML with ng-directives.
• The ng-app directive defines an AngularJS application.
• The ng-model directive binds the value of HTML controls (input,
select, textarea) to application data.
• The ng-bind directive binds application data to the HTML view.
AngularJS
<!DOCTYPE html>
<html ng-app>
<body>
<h1>Hello {{1 + 2}}</h1>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"
>
</script>
</body>
</html
AngularJS
<!DOCTYPE html>
<html>
<body ng-app>
<input type="text"
ng-model="name"
placeholder="Enter your name">
<h1>Hello <span ng-bind="name"></span></h1>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
</body>
</html>
AngularJS
• ng-app directive- This is the first and most important directive that
AngularJS has, which denotes the section of HTML that AngularJS controls.
• The ng-model directive is used with input fields whenever we want the
user to enter any data and get access to the value in JavaScript
• ng-bind and the double-curly notation are interchangeable, so instead
of , we could have written {{ name }}.
Core features of AngularJS
• Data-binding − It is the automatic synchronization of data between
model and view components.
• Scope − These are objects that refer to the model. They act as a glue
between controller and view.
• Controller − These are JavaScript functions bound to a particular
scope.
• Services − AngularJS comes with several built-in services such as
$http to make a XMLHttpRequests. These are singleton objects which
are instantiated only once in app.
Core features of AngularJS
• Filters − These select a subset of items from an array and returns a new
array.

• Directives − Directives are markers on DOM elements such as elements,


attributes, css, and more. These can be used to create custom HTML tags
that serve as new, custom widgets. AngularJS has built-in directives such as
ngBind, ngModel, etc.

• Templates − These are the rendered view with information from the
controller and model. These can be a single file (such as index.html) or
multiple views in one page using partials.

• Routing − It is concept of switching views.


Advantages of AngularJS
• It provides the capability to create Single Page Application in a very
clean and maintainable way.
• It provides data binding capability to HTML. Thus, it gives user a rich
and responsive experience.
• AngularJS code is unit testable.
• AngularJS uses dependency injection and make use of separation of
concerns.
• AngularJS provides reusable components.
• With AngularJS, the developers can achieve more functionality with
short code.
• In AngularJS, views are pure html pages, and controllers written in
JavaScript do the business processing.
Disadvantages of AngularJS
• Not Secure − Being JavaScript only framework, application written in
AngularJS are not safe. Server side authentication and authorization is
must to keep an application secure.

• Not degradable − If the user of your application disables JavaScript,


then nothing would be visible, except the basic page.

You might also like