Intro to AngularJS - Speaker Deck

Slide 1

Slide 1 text

ANGULARJS

Slide 2

Slide 2 text

ANGULARJS IS WHAT HTML WOULD HAVE BEEN, HAD IT BEEN DESIGNED FOR APPLICATIONS MIŠKO HEVERY

Slide 3

Slide 3 text

Client side single page MVC framework in JavaScript

Slide 4

Slide 4 text

WHAT MAKES ANGULARJS SO POWERFUL?

Slide 5

Slide 5 text

TWO WAY DATA BINDING ▸ Possibility to change the model bidirectional ▸ HTML template –> model <– JS

Slide 6

Slide 6 text

HTML

Slide 7

Slide 7 text

app.js $scope.name = 'François';

Slide 8

Slide 8 text

Resulting HTML

François

Slide 9

Slide 9 text

DIRECTIVES Components to teach the browser interpretation of new HTML tags

Slide 10

Slide 10 text

BUILD IN DIRECTIVES LIKE ng-repeat, ng-if, ng-bind, ng-hide

Slide 11

Slide 11 text

HTML

Slide 12

Slide 12 text

shopping-list-directive.js module.directive('shoppingList', function () { return { templateUrl: 'shopping-list.html' }; });

Slide 13

Slide 13 text

shopping-list.html

{{item}}

Slide 14

Slide 14 text

Resulting HTML

baguette
fromage

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

SCOPE 1/3 Exposes domain model to view (template)

Slide 17

Slide 17 text

SCOPE 2/3 AngularJS observes events (eg. input) and applies changes to the scope

Slide 18

Slide 18 text

SCOPE 3/3 Scope hierarchy reflects DOM hierarchy

Slide 19

Slide 19 text

AND SO MUCH MORE… ▸ Dependency Injection ▸ Strong Testability ▸ Views and Routes ▸ Animations ▸ Services

Slide 20

Slide 20 text

by Sebastian Fröstl | Small Improvements