Save 37% off PRO during our Black Friday Sale! »

Intro to AngularJS

Intro to AngularJS

Introduction talk to teach the basic fundamentals of AngularJS.

22bc5738bdbd25c6b779f523b43e951b?s=128

Sebastian Fröstl

July 03, 2014
Tweet

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