1. ANGULARJS
Luka Zakrajšek
@bancek
First JavaScript meetup in Ljubljana
April 30, 2013

2. HI
I'm Luka
In web development for more than 7 years
I work at Koofr

3. JAVASCRIPT APPS
DON'T HAVE TO BE MESSY

4. ANGULAR'S PHILOSOPHY
Decouple DOM manipulation from app logic
Code reusage
Make common tasks trivial and
difficult tasks possible
Not a library

5. MODULES
Split your application into multiple files
No global namespace manipulation
Doesn't limit you with files structure

6. $SCOPE
One $rootScope
Every controller gets its own scope
and inherits data from parent controller
Every directive gets new $scope
that is isolated from others

7. DATA BINDING
JS:
$scope.comment.user = 'Author'
HTML:
{{ comment.user }}

8. URL ROUTING
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
});
$routeProvider.when('/comments', {
templateUrl: 'partials/comments.html',
controller: 'CommentsController'
});
$routeProvider.otherwise({
redirectTo: '/home'
});
}]);

9. CONTROLLERS
.controller('CommentsController', function($scope, Comment) {
Comment.query(function(res) {
res.reverse();
$scope.comments = res;
});
$scope.post = function(){
$scope.comments.unshift({
name: $scope.user.name,
email: $scope.user.email,
content: $scope.comment
});
$scope.comment = '';
}
})

10. MODELS
.factory('Comment', function($resource) {
return $resource('/app/api/comments.json');
})

11. FILTERS
.filter('gravatar', function() {
return function(email, size) {
var hash = $().crypt({
method: 'md5',
source: email
});
return "http://secure.gravatar.com/avatar/" + hash + ".jpg?s="
+ size + "&d=identicon";
};
})

12. DIRECTIVES
.directive('hasFocus', function($timeout) {
return function(scope, elm, attrs) {
scope.$watch(attrs.hasFocus, function(value) {
if (value) {
$timeout(function(){
elm.focus();
}, 0);
}
});
};
})

13. DIRECTIVES
.directive('debug', function() {
return {
restrict: 'E',
scope: {
data: '=',
title: '@',
},
templateUrl: 'partials/debug.html',
controller: function($scope, $element) {
}
};
})

14. DIRECTIVES
debug.html
Usage:
<h4>{{ title }}:</h4>
<pre>{{ data | cleanData | json }}</pre>
<debug data="user" title="User"></debug>

15. TESTING
Unit testing
End to end testing
it('should reverse greeting', function() {
expect(binding('greeting|reverse')).toEqual('olleh');
input('greeting').enter('ABC');
expect(binding('greeting|reverse')).toEqual('CBA');
});

16. DEMO
Sample application
Some code
Chrome plugin
Code available on Github:
https://github.com/bancek/angularjs-talk