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 • “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 … … …

jQuery vs Angular

… … … $( "#tabs" ).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 • Simple formatters of data • • • • • currency date filter json limitTo • • • • lowercase number orderBy uppercase

Filter Example myApp.filter('capitalize', function() { return function(input, scope) { return input.substring(0,1).toUpperCase() + input.substring(1); } });

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?

[email protected]

@jivkopetiov

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