Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Crash Course

Angular Crash Course

Presented as part of an event for the Atlanta JavaScript Community


Tim Whitacre

April 16, 2016

More Decks by Tim Whitacre

Other Decks in Technology


  1. What is AngularJS? AngularJS is a JavaScript framework that lets

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

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

    HTML"? Isn't this a JavaScript framework?
  5. 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
  6. 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.
  7. 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.
  8. View The view is the HTML that exists after AngularJS

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

    parts of the application. angular.module('app', []);
  10. $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.
  11. 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