Intro to AngularJS

Introduction talk to teach the basic fundamentals of AngularJS.

Transcript

1. ANGULARJS
   

   View Slide

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

   View Slide

3. Client side single page MVC framework in JavaScript
   

   View Slide

4. WHAT MAKES ANGULARJS SO POWERFUL?
   

   View Slide

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

   View Slide

6. HTML
   
   {{name}}
   

   View Slide

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

   View Slide

8. Resulting HTML
   François
   

   View Slide

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

   View Slide

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

    View Slide

11. HTML
    list="['baguette', 'fromage']">
    
    

    View Slide

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

    View Slide

13. shopping-list.html
    
    
    {{item}}
    
    
    

    View Slide

14. Resulting HTML
    
    baguette
    fromage
    
    

    View Slide

15. View Slide

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

    View Slide

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

    View Slide

18. SCOPE 3/3
    Scope hierarchy reflects DOM hierarchy
    

    View Slide

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

    View Slide

20. by Sebastian Fröstl | Small Improvements
    

    View Slide