AngularJSJAVASCRIPT WEB APPLICATION FRAMEWORK

TerminologyMVC 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

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.

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

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

$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.

Angular Filtershttps://docs.angularjs.org/api/ng/filter/filterSelects a subset of items from array and returns it as a new arrayHTML 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)

ngRoutehttps://docs.angularjs.org/api/ngRouteVia 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.

Animationshttps://docs.angularjs.org/guide/animationsAssist with CSS animations

https://docs.angularjs.org/api/ng/directive/ngShowShows 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)

AngularJS Documentation/Links https://angularjs.org

https://docs.angularjs.org/api

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

https://egghead.io/technologies/angularjs?order=ASC