An introduction to AngularJS

AngularJS Frontend Development Chapter, 17.01.2014

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.

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

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>

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">

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

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

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

Wojciech Sznapka Thanks!

An introduction to AngularJS

An introduction to AngularJS

Wojciech Sznapka

More Decks by Wojciech Sznapka

Other Decks in Programming

Featured

Transcript

AngularJS Frontend Development Chapter, 17.01.2014

A.K.A. HTML6 * Powerful JavaScript MVC framework supported by Google.

Bootstrap // app.html <html ng-app="findash"> </html> // app.js var findash

View layer Templating, loops, filters: <tbody> <tr ng-repeat="expenditure in expenditures">

Controller Controller code with dependency injection: findash.controller('ExpenditureList', ['$scope', '$resource', 'expendituresService',

Dependency Injection findash.factory('expendituresService', ['$resource', function($resource) { var $resource = $resource;

Model Two way data binding <div ng-controller="ExpenditureCreate"> <input type="text" ng-model="expenditure.name"

MOAR * Unit tests! * Multiple templates * Routing *

Wojciech Sznapka Thanks!