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.j

s • CanJS

• SproutCore • Polymer • Cujo.js• dermis • Spine.js• Ext.js• Sammy.js • JavascriptMV

C• 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: