Angular Crash Course

Presented as part of an event for the Atlanta JavaScript Community

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

Transcript

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!