WIdeo i notatki do prezentacji: http://marcin-wosinek.github.io/blog/prezentacja/2013/04/12/AngularJs-4developers-Warszawa.html

1. AngularJs
4Developers 12 kwietnia 2013

2. AngularJs
4Developers 12 kwietnia 2013

3. Kim jestem?
● Marcin Wosinek
● 5 lat doświadczenia w IT
- WebDev: Javascript
- C# dev: UnitTests
● Aktualnie js kontraktor w Poznaniu

4. Wy?

5. Temat

6. Nowa rzeczywistość

7. Tradycyjna architektura stron
Serwer
html z
request
danymi
KLIENT

8. Podejście aplikacyjne
Serwer
js
dane rest
template
KLIENT

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

10. Zmiany

11. Wyzwania - testowalność
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. Wyzwania - 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. $scope
Architektura MV* Kontroler
ViewModel Generowane przez
Angularowy html serwisy
View Model
AngularJs core

15. Widok
<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. Filtry
<ul>
<li ng-repeat="project in projects |
filter:search | orderBy:'name'">
<a href=""></a>:
</li>
</ul>

17. Kontrolery

18. $scope
prezentacja

19. Proste obiekty js
// 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. Wsparcie dla formularza
prezentacja
<!-- 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. Wstrzykiwanie zależności
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. Serwisy
// 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. Ścieżki - $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. Komunikacja z backendem - $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. Nawyki
Pisanie callbacków

30. Nawyki
bindowanie

31. Nawyki
Zmienianie DOM w
kontrolerze

32. Gotchas - pisanie 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 w 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 - minimalizowanie kodu
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 - filtry działające tylko na tablicach
filter
orderBy

37. Gotchas -
e2e?

38. Gotchas - aktualizowanie scope
spoza frameworka
$digest
$apply

39. Gotchas - $ w nazwach serwisów
$

40. Pytania
?

41. Materiały
● http://angularjs.org/
● http://egghead.io/
● http://www.youtube.com/user/angularjs

42. Podsumowanie

43. Kontakt
● marcin.wosinek@gmail.com
● @MarcinWosinek
● linki + notatki:
http://bit.ly/4Devs-AngularJs

44. Podziękowania
● zdjęcie z publicznością: http://www.flickr.com/photos/dougbelshaw/5604047370/in/photostream
● logo BackboneJs: 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/