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]
