1 / 25

AngularJS A radically different way of building Single Page Apps

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.

dayton
Download Presentation

AngularJS A radically different way of building Single Page Apps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. AngularJSA radically different way of building Single Page Apps by Jivko Petiov

  2. Agenda • Demo - Hello World • What is Angular • Demo - How a real-world app is made • Conclusion – why and when to use it

  3. Demo - Hello World

  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. 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. Architectural Patterns • MVC • MVP • MVVM • MVA (Model View Adapter) • PAC (Presentation Abstraction Control) • HMVC (Hierarchical Model-View-Controller)

  7. Why so Complicated

  8. Angular Pattern? MVW

  9. Angular Pattern? Model View Whatever MV*

  10. Angular Architecture

  11. Demo Time Pray to the Demo Gods

  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. 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. jQuery vs Angular <tabs> <tab title="Tab 1">…</tab> <tab title="Tab 2">…</tab> <tab title="Tab 3">…</tab> </tabs> <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();

  15. Controllers • No Reference to DOM / Views • The “code-behind” of the view • What should happen if user does X • Where do I get X from

  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. 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. 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. Service Example app.factory('myService', function($http, $q) { return { getAllItems: function() { vardeferred = $q.defer(); $http.get(“/api/getItems").success(function(data) { deferred.resolve(data); }).error(function(){ deferred.reject(“Error Message"); }); return deferred.promise; } } }

  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. Filters • currency • date • filter • json • limitTo • lowercase • number • orderBy • uppercase • Simple formatters of data

  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. Conclusion • SPA, Data-driven apps, CRUD • The role of the server-side – HTML vs JSON: • Don’t send HTML if you end up parsing it client-side to do some calculations over it • Don’t send JSON if all you do with it is just put it inside the DOM

  24. QA? jivko@abilitics.com @jivkopetiov

  25. Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Silver Sponsors: Technological Partners: Bronze Partners: Swag Sponsors: Media Partners:

More Related