ANGULARJS Luka Zakrajšek

@bancek

First JavaScript meetup in Ljubljana

April 30, 2013

HII'm Luka

In web development for more than 7 years

I work at Koofr

JAVASCRIPT APPSDON'T HAVE TO BE MESSY

ANGULAR'S PHILOSOPHYDecouple DOM manipulation from app logic

Code reusage

Make common tasks trivial anddifficult tasks possible

Not a library

MODULESSplit your application into multiple files

No global namespace manipulation

Doesn't limit you with files structure

$SCOPEOne $rootScope

Every controller gets its own scopeand inherits data from parent controller

Every directive gets new $scopethat is isolated from others

DATA BINDINGJS:

$scope.comment.user = 'Author'

HTML:{{ comment.user }}

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' });}]);

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 = ''; }})

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

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"; };})

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

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

} };})

DIRECTIVESdebug.html

Usage:

<h4>{{ title }}:</h4>

<pre>{{ data | cleanData | json }}</pre>

<debug data="user" title="User"></debug>

TESTINGUnit testingEnd to end testing

it('should reverse greeting', function() { expect(binding('greeting|reverse')).toEqual('olleh'); input('greeting').enter('ABC'); expect(binding('greeting|reverse')).toEqual('CBA');});

DEMOSample application

Some code

Chrome plugin

Code available on Github:https://github.com/bancek/angularjs-talk