What is AngularJS?
AngularJS is a JavaScript framework that lets you build well
structured, easily testable, and maintainable front-end
applications.
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
Two Parts to Angular
1. UI - Declarative - What happens in the HTML.
2. App - Imperative - What happens in the JavaScript.
Slide 6
Slide 6 text
Wait... wat?
What do you mean, "what happens in the HTML"? Isn't this a
JavaScript framework?
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
Also Community
Slide 9
Slide 9 text
MVC
Um... so is AngularJS an MVC?
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
Controller
The controller is used for setting initial state and mutating the
$scope with methods.
Slide 13
Slide 13 text
View
The view is the HTML that exists after AngularJS has parsed
and compiled the HTML to included rendered markup and
bindings.
Slide 14
Slide 14 text
Module
A method that instantiates and wires together the different parts
of the application.
angular.module('app', []);
Slide 15
Slide 15 text
Module Setter
angular.module('app', []);
Slide 16
Slide 16 text
Module Getter
angular.module('app');
Slide 17
Slide 17 text
$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.
Slide 18
Slide 18 text
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