Intro to AngularJS

Introduction talk to teach the basic fundamentals of 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>
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