Intro to AngularJS

Transcript

1. ANGULARJS

2. ANGULARJS IS WHAT HTML WOULD HAVE BEEN, HAD IT BEEN

   DESIGNED FOR APPLICATIONS MIŠKO HEVERY

3. Client side single page MVC framework in JavaScript

4. WHAT MAKES ANGULARJS SO POWERFUL?

5. TWO WAY DATA BINDING ▸ Possibility to change the model

   bidirectional ▸ HTML template –> model <– JS

6. HTML <input ng-model="name"> <div>{{name}}</div>

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

8. Resulting HTML <div>François</div>

9. DIRECTIVES Components to teach the browser interpretation of new HTML

   tags

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

11. HTML <shopping-list list="['baguette', 'fromage']"> </shopping-list>

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

    });

13. shopping-list.html <ul> <li ng-repeat="item in list"> {{item}} </li> </ul>

14. Resulting HTML <ul> <li>baguette</li> <li>fromage</li> </ul>

15. None

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

17. SCOPE 2/3 AngularJS observes events (eg. input) and applies changes

    to the scope

18. SCOPE 3/3 Scope hierarchy reflects DOM hierarchy

19. AND SO MUCH MORE… ▸ Dependency Injection ▸ Strong Testability

    ▸ Views and Routes ▸ Animations ▸ Services

20. by Sebastian Fröstl | Small Improvements