$30 off During Our Annual Pro Sale. View Details »

Angular Crash Course

Angular Crash Course

Presented as part of an event for the Atlanta JavaScript Community

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

Tim Whitacre

April 16, 2016
Tweet

More Decks by Tim Whitacre

Other Decks in Technology

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