Angular JS

David Spence

What is AngularJS? •  “AngularJS is what HTML would
have been, had it been designed for building web-‐apps.” •  A javascript MVC framework (more than a uJlity library) for AJAX heavy applicaJons Framework Stack Overﬂow ques3ons GitHub stars AngularJS 41k 25k Backbone 15k 18k Knockout 11k 5k Ember 10k 10.5k

Real life applicaJons •  hXps://builtwith.angularjs.org/

Some key features •  DeclaraJve HTML •  Easy
two way data-‐binding •  Re-‐usable components •  Dependency injecJon •  Unit tesJng (850+ for us currently)

Why are we using AngularJS? •  Defra prototype /
maps •  Lots of APIs and JSON –  GET /api/organisaJon/5 { "id":5, "name":"Beech Nut Hill Lane", "sbi":222222841 }

Basic data binding <html> <body> <div>Name: {{
name }}</div> <div>Age: {{ age }}</div> </body> </html> Name: David Age: 25 { name: ‘David’, age: 25 } = +

What would I have done before? var name =
‘David’; •  JavaScript <div id=“name”></div> document.getElementById(‘name’).textContent = name; •  jQuery <div id=“name”></div> $(‘#name’).text(name); •  AngularJS <div>{{ name }}</div>

What goes in a controller? •  Simple values, objects,
funcJons function ZooController($scope) { $scope.maxAnimals = 10; $scope.animals = [{ name: 'tiger’, cost: 5 }, { name: 'elephant’, cost: 10 }]; $scope.isOpen = function() { var now = new Date(); return now.getHours() > 9 && now.getHours < 17; }; }

<html> <head> <script src="angular.js"></script>
<script> funcJon CarsController($scope) { $scope.car = ‘nissan micra’; } </script> </head> <body ng-‐app> <div ng-‐controller=“CarsController”> <label>What's your favorite car?</label> <h1>Hello {{car}}!</h1> </div> </body> </html> 1. 2. 3. 4. 5.

Adding behavior without selectors •  For jQuery, behavior depends
on a class, ID or structure you’ve given to your markup. This means that making a class change for CSS purposes could break your JS in non-‐obvious ways. <input type=“text” id=“member-‐search” /> <table id="member-‐list”> <tbody> <tr> <td> <a>David</a> </td> </tr> </tbody> </table>

In jQuery var $members = $('#member-‐list').find('tbody tr td a');
var searchText = ''; $('#member-‐search').keyup(function () { searchText = $(this).val(); $members.each(function () { var $tr = $(this).closest('tr'); if ($ (this).text().toLowerCase().indexOf(searchText.toLowerCase()) != -‐1) { $tr.show(); } else { $tr.hide(); } }); }); And if structure changes..?

In AngularJS, direcJves should manipulate the DOM
$personNameContainsSearchPhrase = function(person) { return person.name.toLowerCase().indexOf( searchText.toLowerCase()) != -‐1 }; <input type=“text” ng-‐model=“…” /> <table> <tbody> <tr ng-‐repeat=“…” ng-‐show=“personNameContainsSearchPhrase(person)”> <td> <a>{{ person.name }}</a> </td> </tr> </tbody> </table>

DeclaraJve style <button ng-‐click=“submitReview()”>Submit review</button> <div ng-‐show=“car.isCool”>
Your car is really cool! </div> <ul> <li ng-‐repeat="car in cars"> {{ car.brand }} {{ car.model }} </li> </ul> <select ng-‐options=“car.model for car in cars”></select> When basic behavior is deﬁned in the markup, you can easily tell what is happening.

Simple custom direcJve define(function() {
var capdHistoryGoBack = function($window) { return { link: function(scope, element, attrs) { $(element).on('click', function() { $window.history.back(); }); } } } capdHistoryGoBack.$inject = ['$window']; return capdHistoryGoBack; }); <button capd-‐history-‐go-‐back>Back</button>

Angular JS

Angular JS

David Spence

More Decks by David Spence

Other Decks in Technology

Featured

Transcript

David Spence

What is AngularJS? •  “AngularJS is what HTML would

Real life applicaJons •  hXps://builtwith.angularjs.org/

Some key features •  DeclaraJve HTML •  Easy

Why are we using AngularJS? •  Defra prototype /

Basic data binding <html> <body> <div>Name: {{

What would I have done before? var name =

What goes in a controller? •  Simple values, objects,

<html> <head> <script src="angular.js"></script>

DEMO

Adding behavior without selectors •  For jQuery, behavior depends

In jQuery var $members = $('#member-‐list').find('tbody tr td a');

In AngularJS, direcJves should manipulate the DOM

DeclaraJve style <button ng-‐click=“submitReview()”>Submit review</button> <div ng-‐show=“car.isCool”>

Simple custom direcJve define(function() {

DEMO