Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
122 views

AngularJS Vittalesh

AngularJS is a JavaScript framework for building single-page applications. It augments HTML with custom attributes and directives to bind data to the view and define application behavior. Key features include declarative data binding, dependency injection, MVC/MVVM patterns, and reusable components. Directives allow AngularJS to teach HTML new tricks and attach custom behavior. AngularJS compiles HTML and links it with an application scope to keep views and models synchronized.

Uploaded by

vittalesh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
122 views

AngularJS Vittalesh

AngularJS is a JavaScript framework for building single-page applications. It augments HTML with custom attributes and directives to bind data to the view and define application behavior. Key features include declarative data binding, dependency injection, MVC/MVVM patterns, and reusable components. Directives allow AngularJS to teach HTML new tricks and attach custom behavior. AngularJS compiles HTML and links it with an application scope to keep views and models synchronized.

Uploaded by

vittalesh
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

TKR College of Engineering &

Technology

ANGULARJS
HTML enhanced for web apps!

Under the Guidance Of


BY NEELAM VITTALESH

Mr. V.Ravi Kumar

What is ANGULARJS?

Its not a JavaScript library (As they say).


There are no functions which we can directly
call and use.

It is not a DOM manipulation library like


jQuery. But it uses subset of jQuery for DOM
manipulation (called jqLite).

Focus more on HTML side of web apps.

For MVC/MVVM design pattern

AngularJS is a Javascript MVC framework


created by Google to build properly
architectured and maintenable web
applications.

Philosophy
ANGULARJS is what HTML could have been if it had been designed for web application development.
ANGULARJS is built around the philosophy that declarative code is better than imperative code
while building UIs and wiring different components of web application together.

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

Why ANGULARJS?

Defines numerous ways to organize web application at client side.

Enhances HTML by attaching directives, custom tags, attributes, expressions, templates within
HTML.

Encourage TDD

Encourage MVC/MVVM design pattern

Code Reuse

Good for Single Page Apps (SPA)

Cool Features -> Next Slide

Key Features of ANGULARJS

Declarative HTML approach

Modules

Easy Data Binding : Two way Data


Binding

Services

Expressions

Filters

Directives

Form Validation

$scope, $http, $routeProvider

Reusable Components

MVC/MVVM Design Pattern

Dependency Injection

End to end Integration Testing / Unit


Testing

Routing

Templating

MVC : Model View Controller


View :

3. Implement the
Business Logic on
response data and
Bind it to View

Model:

Business Logic
Notify view changes
Application Functionality
Data in general

Model

Renders the Model data


Send User actions/events to
controller
UI

View
1. Event or User
Action or View Load

Controll
er

2. Maps to particular
Model after fetching the
data

Controller:

Define Application Behavior


Maps user actions to Model
Select view for response

MVVM: Model View ViewModel


UI
View

Business Logic
and Data

ViewMod
el

Model

Data Access
Update ViewModel about
change

User actions, commands


Data binding
Notifications

Presentation Logic

ng-app
Use this directive to auto-bootstrap an application.
Only one ng-app directive can be used per HTML document
<html ng-app>

HTML Compiler
Angular's HTML compiler allows the developer to teach the browser new HTML syntax. The
compiler allows you to attach behavior to any HTML element or attribute and even create new
HTML elements or attributes with custom behavior. Angular calls these behavior extensions
directives.
Compiler is an angular service which traverses the DOM looking for attributes. The compilation
process happens in two phases.
Compile:traverse the DOM and collect all of the directives. The result is a linking function.
Link:combine the directives with a scope and produce a live view. Any changes in the scope
model are reflected in the view, and any user interactions with the view are reflected in the
scope model. This makes the scope model the single source of truth.

http://docs.angularjs.org/guide/compil

Directive
The directives can be placed in element names, attributes, class names, as well
as comments. Directives are a way to teach HTML new tricks.
A directive is just a function which executes when the compiler encounters it in
the DOM.
<input ng-model='name'>
Custom Defined Directives
<span draggable>Drag ME</span>

Expression
Expressions are JavaScript-like code snippets that are usually placed in bindings
such as {{ expression }}
<body>
1+2={{1+2}}
</body>

Forms
Form and controls provide validation services, so that the user can be notified
of invalid input. This provides a better user experience, because the user gets
instant feedback on how to correct the error.
<input type="text" ng-model="user.name" name="uName" required />
<button ng-click="update(user) ng-disabled="form.$invalid ||
isUnchanged(user)">SAVE</button>

Module
Modules declaratively specify how an application should be bootstrapped.
There can be multiple modules in an app
Those could be interdependent too.
// declare a module
var myAppModule = angular.module('myApp', [-- here goes the dependent
Modules--]);

Modules are configured with routes, controllers, models etc.

Routing
It Is used for deep-linking URLs to controllers and views (HTML partials). It watches
$location.url() and tries to map the path to an existing route definition.
$routeProvider.when('/Book', {
template: 'examples/book.html',
controller: BookCntl,
});
$routeProvider.when('/Book/chapter01', {
template: 'examples/chapter01.html',
controller: ChapterCntl,
});

Scope
Scope is an object that refers to the application model.
It is an execution context for expressions.
Scopes are arranged in hierarchical structure which mimic the DOM structure of
the application.
Scopes can watch expressions and propagate events.
Actually the ViewModel of MVVM.
$scope

Dependency Injection
Dependency Injection (DI) is a software design pattern that deals with how code
gets hold of its dependencies.

Filters
Angular filters format data for display to the user.
{{ expression [| filter_name[:parameter_value] ... ] }}
{{ uppercase_expression | uppercase }}
{{ expression | filter1 | filter2 }}
Can create custom filters

Browser Support
Versions 1.2 and later of
AngularJS do not support
Internet Explorer versions 6
or 7. Versions 1.3 and later
of AngularJS dropped
support for Internet Explorer
8.
Google Chrome is best for
Angularjs

Conclusion
Directives offer developers many ways to accomplish functionalities in a simple,
efficient, and testable manner. Many of these different techniques are common
sense, and some must be discovered by research and practice. The overall point
of a directive is to hide DOM-related complexity and create a solid medium
between the model and the view.
Directives are the glue that connects DOM and the model together in MV*
methodologies. In AngularJS-specific terms, this means connecting the scope
together with the template views. Once the two are working together in unison,
the application gets the ability to keep the model as its "source of truth".

Future Scope
Following are some improvements
excepted in future
es6 modules
web components
standards are mostly:
still in flux
not implemented in browsers
we (the angular team) are mostly:
still in the exploratory phase

Resources
Documentation

AngularJS Developer Guide

AngularJS API

AngularJS Tutorial

Videos

AngularJS Fundamentals In 60-ish Minutes

Introduction to Angular JS

AngularJS end-to-end web app tutorial Part I

Any Query's

You might also like