CS142 Lecture Notes - AngularJS
AngularJS Introduction
Mendel Rosenblum
CS142 Lecture Notes - AngularJS
AngularJS
JavaScript framework for writing web applications

Handles: DOM manipulation, input validation, server communication, URL mangement, etc.
Uses Model-View-Controller pattern
HTML Templating approach with two-way binding
Minimal server-side support dictated
Focus on supporting for programming in the large and single page applications
Modules, reusable components, testing, etc.
Widely used framework (Angular 1 - 2009) with a major rewrite coming out
(Angular 2)
CS142 will use Angular 1
CS142 Lecture Notes - AngularJS
Angular Concepts and Terminology
Template
HTML with additional markup used to describe what should be displayed
Directive
Allows developer to extend HTML with own elements and attributes (reusable pieces)
Scope
Context where the model data is stored so that templates and controllers can access
Compiler
Processes the template to generate HTML for the browser
Data Binding
Syncing of the data between the Scope and the HTML (two ways)
Dependency
Injection
Fetching and setting up all the functionality needed by a component
Module
A container for all the parts of an application
Service
A way of packaging functionality to make it available to any view
CS142 Lecture Notes - AngularJS
Angular Example









CS142 Lecture Notes - AngularJS
Angular Bootstrap









Script loads and runs on when browser
signals context is loaded and ready
CS142 Lecture Notes - AngularJS
Angular Bootstrap









Once ready, scans the html looking for a
ng-app attribute - Creates a scope.
CS142 Lecture Notes - AngularJS
Angular Bootstrap









Compiler - Scans DOM covered by the
ng-app looking for templating markup -
Fills in with information from scope.
CS142 Lecture Notes - AngularJS
Angular Compiler Output









Changes to template HTML in red. Classes:
ng-scope - Angular attached a scope here.
ng-binding - Angular bound something here.
ng-pristine/ng-dirty - User interactions?
ng-untouched/ng-touched - Blur event?
ng-valid/ng-invalid - Valid value?
Note: {{yourName}} replaced
with value of yourName
CS142 Lecture Notes - AngularJS
Two-way binding: Type 'D' character into input box









The scope variable yourName is
updated to be "D" and the template
is rerendered with yourName = "D".
Note angular validation support
CS142 Lecture Notes - AngularJS
Two-way binding: Type 'a', 'n' into input box









Template updated with each change
(i.e. key stroke)!
CS142 Lecture Notes - AngularJS
angular.module









angular.module("cs142App", []);
or to fetch existing module:
angular.module("cs142App");
In a JavaScript file:
Module - Container of everything needed under ng-app
CS142 Lecture Notes - AngularJS
Controllers









angular.module("cs142App", [])
.controller('MyCntrl', function($scope) {
$scope.yourName = "";
$scope.greeting = "Hola";
});
In a JavaScript file:
Will define a new scope and call
controller MyCntrl.
CS142 Lecture Notes - AngularJS
Templates, Scopes & Controllers
Best practice: Each template component gets a new scope and is paired
with a controller.
Expressions in templates:

{{foo + 2 * func()}}
are evaluated in the context of the scope. Controller sets up scope:
$scope.foo = ... ;
$scope.func = function() { ... };
Best practice: Keep expressions simple put complexity in controller
Controllers make model data available to view template
CS142 Lecture Notes - AngularJS
Scope inheritance
A scope object gets its prototype set to its enclosing parent scope

ScopeB's prototype points at ScopeA
Mostly does what you want (all properties of A appear in B)
Useful since scopes are frequently created (e.g. ng-repeat, etc.)
$rootScope is parent of all
Creates new scope (ScopeA)
Creates new scope (ScopeB)
CS142 Lecture Notes - AngularJS
"There should always be a dot in your model"
Common advice to beginning AngularJS programmers. Why?
Consider:
Model reads will go up to fetch properties from inherited scopes.
Writes will create the property in the current scope!

Read of object model will locate it in whatever inherited scope it is in. yourName
will be create in that object in the right scope.
CS142 Lecture Notes - AngularJS
Scope digest and watches
Two-way binding works by watching when expressions in view template
change and updating the corresponding part of the DOM.
Angular add a watch for every variable or function in template expressions
During the digest processing all watched expressions are compared to their
previously known value and if different the template is reprocessed and the
DOM update
Angular automatically runs digest after controller run, etc.
It is possible to:
Add your own watches: ($scope.$watch(..)) (e.g. caching in controller)
Trigger a digest cycle: ($scope.$digest()) (e.g. model updates in event)
CS142 Lecture Notes - AngularJS
Example of needing scope $watch
Name: {{firstName}} {{lastName}}
vs
Name: {{fullName}}
$scope.fullName =
$scope.firstName +
" " + $scope.lastName;
$scope.$watch('firstName',
function() {
$scope.fullName =
$scope.firstName +
" " + $scope.lastName;
});
CS142 Lecture Notes - AngularJS
A digression: camelCase vs dash-case
Word separator in multiword variable name
Use dash: active-buffer-entry
Capitalize first letter of each word: activeBufferEntry
Issue: HTML is case-insensitive so camelCase is a problem
AngularJS solution: You can use either, Angular will map them to the same thing.
Use dash in HTML and camelCase in JavaScript
Example: ng-model and ngModel
CS142 Lecture Notes - AngularJS
ngRepeat - Directive for looping in templates
ngRepeat - Looping for DOM element creation (tr, li, p, etc.)

• 
  {{person.name}} nickname {{person.nickname}}
  

Powerful but opaque syntax. From documentation: