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

Angular Crash Course

Angular Crash Course

Presented as part of an event for the Atlanta JavaScript Community

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

Bc3e5951a9e5ec8f9f4546f2a0bc6192?s=128

Tim Whitacre

April 16, 2016
Tweet

Transcript

  1. None
  2. None
  3. What is AngularJS? AngularJS is a JavaScript framework that lets

    you build well structured, easily testable, and maintainable front-end applications.
  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
  5. Two Parts to Angular 1. UI - Declarative - What

    happens in the HTML. 2. App - Imperative - What happens in the JavaScript.
  6. Wait... wat? What do you mean, "what happens in the

    HTML"? Isn't this a JavaScript framework?
  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
  8. Also Community

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

  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.
  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.
  12. Controller The controller is used for setting initial state and

    mutating the $scope with methods.
  13. View The view is the HTML that exists after AngularJS

    has parsed and compiled the HTML to included rendered markup and bindings.
  14. Module A method that instantiates and wires together the different

    parts of the application. angular.module('app', []);
  15. Module Setter angular.module('app', []);

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

  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.
  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
  19. TWO-WAY DATA BINDING AKdf AngularJS

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

  21. Let's Build!