2. Terminology
MVC architecture
• Model – data
• View – template
• Controller – code (JavaScript) that links views to models
Scopes
• Scope is an object that refers to the application model. It is an execution context for expressions. Scopes
are arranged in a hierarchical structure which mimics the DOM structure of the application. Scopes can
watch expressions and propagate events.
https://docs.angularjs.org/guide/scope
3. jQuery vs. AngularJS
•In jQuery you design a page and then make it dynamic, changing it with DOM manipulations.
•In AngularJS you design the architecture first, then your application, then your view (html
template). You don’t alter the DOM (usually).
•Think in terms of architecture – single page applications are applications, not webpages. You
must think like a server-side developer as well as a front-end developer.
•The view is the official record. By looking at it you can tell what directives are being applied.
Much cleaner and concise than jQuery.
•Data binding – most awesome feature of AngularJS. AngularJS updates the view so you don’t
have to code DOM manipulations.
•MVC architecture allows for a model completely separate from the view. In jQuery the DOM is
the model.
4. jQuery vs. AngularJS
•Separation of concerns – your view shows what is supposed to happen, your model represents
your data, there is a service layer to perform reusable tasks and you do DOM manipulations and
augment the view with directives. All of this is glued together with controllers.
•Dependency Injection – you can declare components and then from other component ask for an
instance of it without worrying about loading order, file locations, etc.
•Test Driven Development is possible with AngularJS; iterative only with jQuery.
Source: stackoverflow.com (link provided on last slide).
https://docs.angularjs.org/guide/directive
5. Angular Directives
ng-repeat
◦ Allows us to loop through an array
◦ https://docs.angularjs.org/api/ng/directive/ngRepeat
ng-src
◦ Prevents images from loading until the Angular library loads
◦ https://docs.angularjs.org/api/ng/directive/ngSrc
6. $scope vs. this
http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers
this
•When the controller constructor function is called, this is the controller
•When a function defined on a $scope object is called, this is the “scope in effect” when the
function was called. This may or may not be the $scope the function was defined on. Inside
the function, this and $scope may not be the same.
$scope
•Every controller has an associated $scope object
•A controller function (aka constructor) is responsible for setting model properties and
functions/behavior on its associated $scope.
•Only methods defined on this $scope are accessible from the HTML/view – ng-click,
filters, etc.
7. Angular Filters
https://docs.angularjs.org/api/ng/filter/filter
Selects a subset of items from array and returns it as a new array
HTML template binding
{{ filter_expression | filter : expression : comparator}}
JavaScript
$filter(‘filter’)(array, expression, comparator)
Expression = string, object, or function (custom filters)
Comparator = function (actual, expected), true – shorthand for function(actual,
expected){return angular.equals(expected, actual)} , false/undefined (case
insensitive match shorthand)
8. ngRoute
https://docs.angularjs.org/api/ngRoute
Via routing we can access another Angular feature – deep linking
Use the service $routeProvider()
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
Remember, AngularJS is used to create one page apps. With ngRoute we can simulate multiple pages.
9. Animations
https://docs.angularjs.org/guide/animations
Assist with CSS animations
https://docs.angularjs.org/api/ng/directive/ngShow
Shows or hides the HTML element based on the expression provided to the ngShow attribute. (uses a
built in CSS class called ng-hide which sets the display to none with the !important flag)
