An introduction to AngularJS

Quick introduction to AngularJS with some examples

Transcript

1. AngularJS Frontend Development Chapter, 17.01.2014
2. 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.
3. Bootstrap // app.html <html ng-app="findash"> </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 });
4. View layer Templating, loops, filters: <tbody> <tr ng-repeat="expenditure in expenditures"> <td>{[ expenditure.name ]}</td> <td>{[ expenditure.client ]}</td> <td>{[ expenditure.amount | currency:'zł ' ]}</td> <td>{[ expenditure.created_at | date:'yyyy-MM-dd' ]}</td> </tr> </tbody>
5. Controller Controller code with dependency injection: findash.controller('ExpenditureList', ['$scope', '$resource', 'expendituresService', function($scope, $resource, expendituresService) { $scope.expenditures = expendituresService.expenditures; } ]); Controller binding in template: <div ng-controller="ExpenditureList"> <table width="100%"> <tbody> <tr ng-repeat="expenditure in expenditures">
6. 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; } ]);
7. Model Two way data binding <div ng-controller="ExpenditureCreate"> <input type="text" ng-model="expenditure.name" name="name" placeholder="* Nazwa" required /> <button class="small button" ng-click="create(expenditure)" </div> 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 }; } ]);
8. MOAR * Unit tests! * Multiple templates * Routing * Custom directives * Animations * 3rd party modules
9. Wojciech Sznapka Thanks!