1. AngularJs
AmasterdamJs 24 April 2013

2. Who am I?
● Marcin Wosinek
● 5 years IT experience
- WebDev: Javascript
- C# dev: UnitTests
● Currently js contractor in Poznan, Poland

3. jQuery

4. You?

5. Topic

6. New reality

7. Traditional web architecture
Server
Client
html +
data
request

8. Application approach
Server
Client
js
template
RESTdata

9. Communication with backend
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
}
}

10. Changes

11. Challenges - testability
function PasswordCtrl() {
var msg = $('.ex1 span');
var input = $('.ex1 input');
var strength;
this.grade = function() {
msg.removeClass(strength);
var pwd = input.val();
password.text(pwd);
if (pwd.length > 8) {
strength = 'strong';
}
else {
strength = 'weak';
}
msg
.addClass(strength)
.text(strength);

12. Challenges - boilerplate
initialize: function () {
this.allCheckbox = this.$('#toggle-all')[0];
this.$input = this.$('#new-todo');
this.$footer = this.$('#footer');
this.$main = this.$('#main');
this.listenTo(app.Todos ,'add',this.addOne);
this.listenTo(app.Todos, 'reset', this.addAll);
this.listenTo(app.Todos, 'change:completed', this.
filterOne);
this.listenTo(app.Todos, 'filter', this.filterAll);
this.listenTo(app.Todos, 'all', this.render);
app.Todos.fetch();
}

13. AngularJs

14. MV* Architecture
ViewModel
View Model
Shared with backend
$scope
Angular html
AngularJs core
Controller

15. View
<ul>
<li ng-repeat="todo in todos">
<span></span>
</li>
</ul>
<form ng-submit="addTodo()">
<input ng-model="todoText" />
<input type="submit" value="add" />
</form>

16. Filters
<ul>
<li ng-repeat="project in projects |
filter:search | orderBy:'name'">
<a href=""></a>:
</li>
</ul>

17. Controller

18. $scope
presentation

19. Plain JS objects
// Backbone
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false }
});
// Ember
Todos.Todo = DS.Model.extend({
title: DS.attr('string'),
isCompleted: DS.attr('boolean') });
// Angular
todos.push({
title: $scope.newTodo,
completed: false });

20. Two ways binding

21. Web form support
presentation
<!-- Html updated by angular -->
<form name="exampleForm" class="ng-pristine ng-invalid
ng-invalid-required">
Required field:
<input ng-model="required" required="" class="ng-
pristine
ng-invalid ng-invalid-required"></label> <br>
Email field:
<input ng-model="email" type="email" class="ng-pristine
ng-valid ng-valid-email"></label> <br>
<button ng-disabled="!exampleForm.$valid"
disabled="disabled">Submit</button>
</form>

22. Dependency injection
function HelloCtrl($scope, $window, $log) {
$scope.message = 'Display me in view';
$window.alert('Use window via $window service - that
improves testability');
$log.log('We can even test console log calls - thats to
$log wrapper');
}

23. Services
// Services that persists and retrieves ToDos from
// localStorage
todomvc.factory('todoStorage', function () {
var STORAGE_ID = 'todos-angularjs';
return {
get: function () {
return JSON
.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
put: function (todos) {
localStorage
.setItem(STORAGE_ID, JSON.stringify(todos));
}};});

24. Routing - $routeProvider
angular.module('phonecat', [])
.config(['$routeProvider',
function($routeProvider, $locationProvider) {
// $locationProvider.html5Mode(true);
$routeProvider
.when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
})
.when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
})
.otherwise({
redirectTo: '/phones'
});}]);

25. REST - $resource
myApp.factory('ProductService', function($resource) {
var ProductResource = $resource('/product/:productId')
, ProductService = {};
ProductService.getItem = function (index) {
return ProductResource.get({productId: index});}
ProductService.addItem = function (item) {
ProductResource.save({}, item));}
return ProductService;
});
function ProductCtrl($scope, ProductService) {
// Take products form ProductService and put it on
$scope
}

26. Directives
<ANY class="ng-show: {expression};">
<ANY ng-show="{expression}">
<ANY class="ng-hide: {expression};">
<ANY ng-hide="{expression}">
<ng-view> <any ng-view>
<ANY ng-class="{expression}"> <ANY class="ng-class:
{expression};">
<ANY ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
...
<ANY ng-switch-default>...</ANY>
</ANY>

27. Yeoman

28. Karma (Testacular)

29. Habits
Writing callbacks

30. Habits
Imperative binding

31. Habits
Changing DOM in
controller

32. Gotchas - writing directives
angular.module('blink', [])
.directive('blink', function() {
return {
restrict: 'E',
link: function(scope, elm, attr) {
setInterval(function() {
elm.toggle();
}, parseInt(attr.interval, 10) || 1000);
}
};
});

33. Gotchas - ng-model in ng-repeat
// Gotcha!
<ul>
<li ng-repeat="item in list">
<input ng-model="item" />
</li>
</ul>
// Work as expected
<ul>
<li ng-repeat="item in list">
<input ng-model="item.name" />
</li>
</ul>

34. Gotchas - code minification
syngularApp.controller('ProductCtrl', function($scope,
ProductApi) {
// easy but minification unfriendly
});
syngularApp.controller('ProductCtrl', ['$scope',
'ProductApi', function($scope, ProductApi) {
// minification resistant
}]);

35. Gotchas -
$resource

36. Gotchas - filters working only on arrays
filter
orderBy

37. Gotchas -
e2e?

38. Gotchas - updating data from
outside angular
$digest
$apply

39. Gotchas - $ in service names
$

40. Questions
?

41. Learning materials
● http://angularjs.org/
● http://egghead.io/
● http://www.youtube.com/user/angularjs

42. Summary

43. Contact
● marcin.wosinek@gmail.com
● @MarcinWosinek
● links, slides, notes and (hopefully) video:
http://bit.ly/AngularJs-AmsterdamJS

44. Credits
● Audience photo: http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream
● BackboneJs logo: https://github.com/documentcloud/backbone/blob/master/docs/images/backbone.
● Two ways binding: http://docs.angularjs.org/guide/dev_guide.templates.databinding
● http://karma-runner.github.io/0.8/index.html
● http://yeoman.io/