slides - jQuery Bulgaria

berserkarithmeticInternet and Web Development

Dec 14, 2013 (3 years and 7 months ago)

101 views

AngularJS


A
radically different way of
building Single Page
Apps



b
y Jivko
Petiov



Agenda


Demo
-

Hello
World



What is Angular




Demo
-

How a real
-
world app is made



Conclusion


why and when to use it





Demo
-

Hello World

What is Angular


What is a SPA (Gmail,
Github
, Hotmail,
Trello
, Facebook)



JavaScript Framework for building SPA apps



“Angular
is what HTML should have been, if it has been
specifically designed for AJAX
apps”




JavaScript Frameworks


Backbone.js


Ember.js


KnockoutJS



AngularJS


Dojo


YUI


Agility.js


Knockback.js


CanJS




SproutCore



Polymer


Cujo.js


dermis


Spine.js


Ext.js


Sammy.js


JavascriptMVC


Epitome


Kendo UI


PureMVC



Olives


PlastronJS



Dijon


rAppid.js


Batman.js


React


Exoskeleton

Architectural Patterns



MVC


MVP


MVVM


MVA
(Model View
Adapter)


PAC
(Presentation Abstraction
Control)


HMVC (Hierarchical Model
-
View
-
Controller)


Why so Complicated

Angular Pattern?


MVW


Angular Pattern?


Model View Whatever

MV*

Angular Architecture

Demo Time


Pray to
the Demo
Gods


Views


Views = HTML



Directives are reusable components within the View; They
are similar
to jQuery Plugins, but much more than that



Declarative DSL


controversial and yet powerful


Directive Examples

<
rating max="5" model
=“
data.rating
"
/>



<tabs>


<tab title="Tab 1">…</tab>


<tab title="Tab 2">…</tab>

</tabs>


<span tooltip="{{
model.text
}}">…</span>



jQuery
vs

Angular

<div id="tabs">


<
ul
>


<li><a
href
="#tabs
-
1">Tab 1</a></li>


<li><a
href
="#tabs
-
2">Tab 2</a></li>


<li><a
href
="#tabs
-
3">Tab 3</a></li>


</
ul
>


<div id="tabs
-
1">...</div>


<div id="tabs
-
2">...</div>


<div id="tabs
-
3">...</div>

</div>


$( "#tabs" ).tabs();





<tabs>


<
tab title="Tab 1
">…</
tab>


<
tab title="Tab 2">…</tab>


<
tab title="Tab 3">…</tab>

</tabs>

Controllers



No Reference to DOM / Views



The “code
-
behind” of the view


o
What should happen if user does X


o
Where do I get X from



Controller Example

app.controller
("
myController
", function($scope,
backendService
) {


$
scope.people

= [



{ name: “Person 1”, city: “Sofia” },



{ name: “Person 2”, city: “Moscow” },



{ name: “Person 3”, city: “New York” }



];




$
scope.addPerson

=
function(person) {



backendService.addPerson
(person
);


};

}



Models and Scope


Model = data = JSON



Scope is container for model, one scope per controller



$
scope.people

= [


{ name: “Person 1”, city: “Sofia” },


{
name: “
Person 2”,
city:
“Moscow” },


{ name: “
Person 3”,
city:
“New York” }


]


Services



Usually no reference to DOM



Singletons, SRP, Dependency Injection



How do I do X?



Server communication, business logic, helpers, modal
dialogs, error handling, sharing data between controllers

Service Example

app.factory
('
myService
', function($http, $q) {


return {



getAllItems
: function() {



var

deferred = $
q.defer
();



$
http.get
(“/
api
/
getItems
").success(function(data
) {



deferred.resolve
(data
);


}).
error(function(){



deferred.reject
(“Error Message");


});



return
deferred.promise
;


} } }

Service Example (continued)

app.controller
("
myController
", function($scope,
myService
) {


myService.getAllItems
().then(function(data) {



$
scope.items

= data;


});

}



app.controller
("myController2", function($scope,
myService
) {


$
scope.items

=
myService.getAllItems
();

}

Filters


currency


date


filter


json


limitTo


lowercase


number


orderBy


uppercase



Simple formatters of data



Filter Example


myApp.filter
('capitalize', function() {


return function(input, scope) {


return
input.substring
(0,1).
toUpperCase
() +




input.substring
(1
);


}

});


<div>{{
person.Name

| capitalize }}</div>

Conclusion


SPA
,
Data
-
driven apps
,
CRUD



The role of the server
-
side


HTML
vs

JSON:


o
Don’t send HTML if you end up parsing it client
-
side to do
some calculations over
it


o
Don’t send JSON if all you do with it is just put it inside the
DOM


QA?

jivko@abilitics.com

@
jivkopetiov

Thanks to our Sponsors:

Diamond
Sponsor:

Gold Sponsors:

Swag Sponsors:

Media Partners:

Technological Partners:

Silver Sponsors:

Bronze
Partners: