Tweet
Tweet

Slide 1

Slide 1 text

AngularJS Frontend Development Chapter, 17.01.2014

Slide 2

Slide 2 text

A.K.A. HTML6 * Powerful JavaScript MVC framework supported by Google. * Offers minimum boilerplate for great flexibility. * Highly adopted by market. * Operating through custom HTML markup.

Slide 3

Slide 3 text

Bootstrap // app.html // app.js var findash = angular.module('findash', ['ngResource']); //ngResource is great REST client module findash.config(function($interpolateProvider){ $interpolateProvider.startSymbol('{[').endSymbol(']}'); // to not f*ck with Twig markup });

Slide 4

Slide 4 text

View layer Templating, loops, filters: {[ expenditure.name ]} {[ expenditure.client ]} {[ expenditure.amount | currency:'zł ' ]} {[ expenditure.created_at | date:'yyyy-MM-dd' ]}

Slide 5

Slide 5 text

Controller Controller code with dependency injection: findash.controller('ExpenditureList', ['$scope', '$resource', 'expendituresService', function($scope, $resource, expendituresService) { $scope.expenditures = expendituresService.expenditures; } ]); Controller binding in template:

Slide 6

Slide 6 text

Dependency Injection findash.factory('expendituresService', ['$resource', function($resource) { var $resource = $resource; var inst = { expenditures: [], fetch: function () { return $resource('/expenditures.json').query(); }, }; inst.expenditures = inst.fetch(); return inst; } ]);

Slide 7

Slide 7 text

Model Two way data binding
findash.controller('ExpenditureCreate', ['$scope', '$resource', '$filter', 'expendituresService', function($scope, $resource, $filter, expendituresService) { $scope.expenditure = {} $scope.create = function(expenditure) { alert(expenditure.name); // same as inserted in input above }; } ]);

Slide 8

Slide 8 text

MOAR * Unit tests! * Multiple templates * Routing * Custom directives * Animations * 3rd party modules

Slide 9

Slide 9 text

Wojciech Sznapka Thanks!