Angular Crash Course

Presented as part of an event for the Atlanta JavaScript Community

https://l.timw.co/2IYa7Fq

Transcript

1. View Slide

2. View Slide

3. What is AngularJS?
   AngularJS is a JavaScript framework that lets you build well
   structured, easily testable, and maintainable front-end
   applications.
   

   View Slide

4. History & Future
   • Originally created in 2010 by Misko Hevery and Adam
   Abrons, now run by the Google team.
   • Everything should be a component - see Angular v2.0
   

   View Slide

5. Two Parts to Angular
   1. UI - Declarative - What happens in the HTML.
   2. App - Imperative - What happens in the JavaScript.
   

   View Slide

6. Wait... wat?
   What do you mean, "what happens in the HTML"? Isn't this a
   JavaScript framework?
   

   View Slide

7. Why use AngularJS?
   • Helps with organization of JavaScript
   • Works well with other libraries (but requires none of them)
   • Ability to create extremely fast websites
   • It is easy to write tests for - because of modules
   

   View Slide

8. Also Community
   

   View Slide

9. MVC
   Um... so is AngularJS an MVC?
   

   View Slide

10. Model
    The model is made up of plain JS objects. No need for
    inheriting or extending. We also don't need to use any special
    getter/setter methods to access it. This means that we write
    less boilerplate code.
    

    View Slide

11. ViewModel
    It is an object that provides specific data and methods to a
    specific view. $scope is just a regular JS object with a small API
    created to detect changes to its state.
    

    View Slide

12. Controller
    The controller is used for setting initial state and mutating the
    $scope with methods.
    

    View Slide

13. View
    The view is the HTML that exists after AngularJS has parsed
    and compiled the HTML to included rendered markup and
    bindings.
    

    View Slide

14. Module
    A method that instantiates and wires together the different parts
    of the application.
    angular.module('app', []);
    

    View Slide

15. Module Setter
    angular.module('app', []);
    

    View Slide

16. Module Getter
    angular.module('app');
    

    View Slide

17. $scope
    • This is our "Imperative" part
    • The $scope is a reference to your data. The controller
    defines the behavior and the view handles the layout.
    

    View Slide

18. Directives
    • This is our "Declaritive" part
    • A directive is a marker on a HTML tag that tells AngularJS to
    run or reference some JS code.
    • ng-repeat
    • ng-click
    • ng-show
    • ng-class
    

    View Slide

19. TWO-WAY DATA BINDING
    AKdf AngularJS
    

    View Slide

20. ... yeah, but is two-way data binding good?
    

    View Slide

21. Let's Build!
    

    View Slide