Scribd
Upload
105 views26 pages

HTML Enhanced For Web Apps! Sagar Acharya

AngularJS is a JavaScript framework for building single-page applications. It enhances HTML with new attributes, focuses on the HTML side of web apps, and uses an MVC or MVVM design pattern. Key features include data binding, directives, filters, dependency injection and routing. AngularJS makes it easier to build interactive and dynamic web apps by handling tasks like DOM manipulation, AJAX calls and routing. Developers should use AngularJS because it is developed by Google, supports RESTful actions, dependency injection, testing and provides flexibility.

Uploaded by

ravikarthik24
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
105 views26 pages

HTML Enhanced For Web Apps! Sagar Acharya

AngularJS is a JavaScript framework for building single-page applications. It enhances HTML with new attributes, focuses on the HTML side of web apps, and uses an MVC or MVVM design pattern. Key features include data binding, directives, filters, dependency injection and routing. AngularJS makes it easier to build interactive and dynamic web apps by handling tasks like DOM manipulation, AJAX calls and routing. Developers should use AngularJS because it is developed by Google, supports RESTful actions, dependency injection, testing and provides flexibility.

Uploaded by

ravikarthik24
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/ 26

HTML enhanced for web apps!

~Sagar Acharya

Agenda

Misunderstandings
What is angular?
SPAs
Why angular?
Features
MVC/MVVM
Directives, filters, expression
Demo
Why should we use it?
Why developer should use it?
Stats

Another JS
Lib

Useful for
web only

Used for
styling
purpose

Difficult to
learn

Lots of new
learning

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).

What is ANGULAR JS? (contd)


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.
ANGULARJS is what HTML could have been if it had been designed
for web application development.
AngularJS extends HTML with new attributes.

Single Page Application (SPA)


SPA Demo
http://www.myspa.com

View

View

View

View

The Challenge with SPAs


DOM Manipulation

History

Module Loading

Routing

Caching

Object Modeling

Data Binding

Ajax/Promises

View Loading

Solution?

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


Data
Binding

MVC
Template
s

jqLite

Routing
History

Testing
Factorie
s

ngularJS is a full-featured
SPA framework
ViewMod
el
Controllers

Controllers

Views

Dependency
Injection

Directive
s
Validatio
n

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

User actions, commands


Data binding
Notifications

ViewMod
el

Model

Data Access
Update ViewModel about
change

Presentation Logic

What are Directives?

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>

What are Directives? (contd..)


< !D O C TYPE htm l>
Directive
< htm lng-app>
< head>
< title> < /title>
< /head>
Directive
< body>
< div class= "container">
N am e: < input type= "text" ng-m odel= "nam e" /> {{ nam e }}
< /div>
< script src= "Scripts/angular.js"> < /script>
< /body>
< /htm l>

Data Binding Expression

Iterating with ng-repeat Directive


< htm ldata-ng-app= "">
...
< div class= "container"
data-ng-init= "nam es= ['D ave','N apur','H eedy','Shriva']">
< h3> Looping w ith the ng-repeat D irective< /h3>
< ul>
< lidata-ng-repeat= "nam e in nam es"> { { nam e } } < /li>
< /ul>
< /div>
Iterate through names

...
< /htm l>

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

Using Filters
< ul>
< lidata-ng-repeat= "cust in custom ers | orderBy:'nam e'">
{ { cust.nam e | uppercase } }
Order customers
< /li>
by name property
< /ul>

Filter customers by

< input type= "text" data-ng-m odel= "nam eText" />


model value
< ul>
< lidata-ng-repeat= "cust in custom ers | fi
lter:nam eText | orderBy:'nam e'">
{ { cust.nam e } } - { { cust.city } } < /li>
< /ul>

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

Demo

Why should we use Angular JS?


Bootstrap features
Directives for animation & effects for interactive
UI
SPA : modern way to represent WEB APP
Compatible with mobile app development

Why Developer should use Angular JS?

It is developed by google.

RESTful actions (Using one line of JS you can quickly communicate


with server)

Dependency Injection (DI) is a software design pattern that deals


with how components get hold of their dependencies.

Provides several options for testing (TDD)

Flexibility with filters

Good documentation & resources.

Some Statistics!

o Angular JS is 3 times faster than any external JS available till now ~Google.

More Statistics! (Interesting One)


GITHUB Stats:
Stars:
o if you star a repository, you basically want to show your appreciation as well as
keep track of repositories that you find interesting without it spamming your
timeline.
o In top 3 of github stars project list, only bootstrap & node js is ahead of it.
o Check stars stats:
o https://github.com/search?utf8=%E2%9C%93&q=stars%3A%3E30000&type=Reposit
ories&ref=searchresults
fork:
o In software engineering, a project fork happens when developers take a legal copy
of source code from one software package and start independent development on
it, creating a distinct piece of software.
o In top 7 of github fork project list.
o Check fork stats:
o https://github.com/search?utf8=%E2%9C%93&q=forks%3A%3E10000&type=Reposit
ories&ref=searchresults

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

Sagar
Acharya

[email protected]

You might also like