0
AngularJS
A radically different way of
building Single Page Apps
by 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
• ...
JavaScript Frameworks
•
•
•
•
•
•
•
•
•

Backbone.js
Ember.js
KnockoutJS
AngularJS
Dojo
YUI
Agility.js
Knockback.js
CanJS
...
Architectural Patterns
•
•
•
•
•
•

MVC
MVP
MVVM
MVA (Model View Adapter)
PAC (Presentation Abstraction Control)
HMVC (Hie...
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 mo...
Directive Examples
<rating max="5" model=“data.rating" />
<tabs>
<tab title="Tab 1">…</tab>
<tab title="Tab 2">…</tab>
</t...
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 hr...
Controllers
• No Reference to DOM / Views
• The “code-behind” of the view
o What should happen if user does X
o Where do I...
Controller Example
app.controller("myController", function($scope, backendService) {
$scope.people = [
{ name: “Person 1”,...
Models and Scope
• Model = data = JSON
• Scope is container for model, one scope per controller
• $scope.people = [
{ name...
Services
• Usually no reference to DOM
• Singletons, SRP, Dependency Injection

• How do I do X?
• Server communication, b...
Service Example
app.factory('myService', function($http, $q) {
return {
getAllItems: function() {
var deferred = $q.defer(...
Service Example (continued)
app.controller("myController", function($scope, myService) {
myService.getAllItems().then(func...
Filters
• Simple formatters of data
•
•
•
•
•

currency
date
filter
json
limitTo

•
•
•
•

lowercase
number
orderBy
upperc...
Filter Example
myApp.filter('capitalize', function() {
return function(input, scope) {
return input.substring(0,1).toUpper...
Conclusion
• SPA, Data-driven apps, CRUD
• The role of the server-side – HTML vs JSON:
o Don’t send HTML if you end up par...
QA?
jivko@abilitics.com
@jivkopetiov
Thanks to our Sponsors:
Diamond Sponsor:

Gold Sponsors:

Silver Sponsors:

Technological Partners:
Bronze Partners:
Swag ...
Upcoming SlideShare
Loading in...5
×

AngularJS - a radically different way of building Single Page Apps

2,903

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,903
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Добре дошли на презентацията за AngularJSКазвам се живкоЩе си говорим за Angular – това е един Javascript framework който се появи някъде 2010-та година но една миналата година започна да става популярен.
  • Има славата на не много лесен за използване фреймурк. затова ще започнем с един hello world – как се сетъпва проект и т.н.
  • Gmail е по-скоро десктоп приложение отколкото уебсайт.
  • Колко от вас сте ползвали в реален проект повече от тези фреймуърци сте ползвали.Колегите ми казаха задължително да сложа Batman JS
  • Сякаш преди 5 години беше по-лесно да се пише javascript
  • Controller – малка jsфункцияТука това трябва да го разберете щото после ще ви трябва
  • Някой HTML Purist може би ще каже че да правим такива custom тагове в html е било лоша идея поради тая и тая причина. Но мисля че този пример говори сам за себе си. Пишейки такива custom тагове вие на практика разширявате HTML и можете да си направите Domain Specific Language.
  • Transcript of "AngularJS - a radically different way of building Single Page Apps"

    1. 1. AngularJS A radically different way of building Single Page Apps by Jivko Petiov
    2. 2. Agenda • Demo - Hello World • What is Angular • Demo - How a real-world app is made • Conclusion – why and when to use it
    3. 3. Demo - Hello World
    4. 4. 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”
    5. 5. 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
    6. 6. Architectural Patterns • • • • • • MVC MVP MVVM MVA (Model View Adapter) PAC (Presentation Abstraction Control) HMVC (Hierarchical Model-View-Controller)
    7. 7. Why so Complicated
    8. 8. Angular Pattern? MVW
    9. 9. Angular Pattern? Model View Whatever MV*
    10. 10. Angular Architecture
    11. 11. Demo Time Pray to the Demo Gods
    12. 12. 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
    13. 13. 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>
    14. 14. 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>
    15. 15. 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
    16. 16. 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); }; }
    17. 17. 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” } ]
    18. 18. 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
    19. 19. 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; }}}
    20. 20. 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(); }
    21. 21. Filters • Simple formatters of data • • • • • currency date filter json limitTo • • • • lowercase number orderBy uppercase
    22. 22. Filter Example myApp.filter('capitalize', function() { return function(input, scope) { return input.substring(0,1).toUpperCase() + input.substring(1); } }); <div>{{person.Name | capitalize }}</div>
    23. 23. 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
    24. 24. QA? jivko@abilitics.com @jivkopetiov
    25. 25. Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Silver Sponsors: Technological Partners: Bronze Partners: Swag Sponsors: Media Partners:
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×