An introduction to AngularJS

Quick introduction to AngularJS with some examples

Transcript

1. AngularJS
   Frontend Development Chapter, 17.01.2014
   

   View Slide

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.
   

   View Slide

3. 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
   });
   

   View Slide

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

   View Slide

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:
   
   
   
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Wojciech Sznapka
   Thanks!
   

   View Slide