Scribd
Upload
151 views

Angular Js

AngularJS is a JavaScript framework that uses Model-View-Controller architecture. It handles DOM manipulation, validation, and communication between the view and model. Templates define the view and use directives to extend HTML. Scopes store and sync model data with templates using two-way binding. Modules contain application components and services provide reusable code. Dependency injection supports programming in large by resolving component dependencies.

Uploaded by

chyon
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
151 views

Angular Js

AngularJS is a JavaScript framework that uses Model-View-Controller architecture. It handles DOM manipulation, validation, and communication between the view and model. Templates define the view and use directives to extend HTML. Scopes store and sync model data with templates using two-way binding. Modules contain application components and services provide reusable code. Dependency injection supports programming in large by resolving component dependencies.

Uploaded by

chyon
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

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 Fetching and setting up all the functionality needed by a component


Injection

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 when browser


signals context is loaded and ready

CS142 Lecture Notes - AngularJS


Angular Bootstrap
<
Once ready, scans the html looking for a
attribute - Creates a scope.

CS142 Lecture Notes - AngularJS


Angular Bootstrap
Compiler - Scans DOM covered by the
< looking for templating markup -
Fills in with information from scope.

CS142 Lecture Notes - AngularJS


Angular Compiler Output Changes to template HTML in red. Classes:
- Angular attached a scope here.
- Angular bound something here.
< - User interactions?
- Blur event?
- Valid value?

Note: replaced
with value of

CS142 Lecture Notes - AngularJS


Two-way binding: Type 'D' character into box
<

The scope variable is


updated to be "D" and the template
is rerendered with = "D".
Note angular validation support

CS142 Lecture Notes - AngularJS


Two-way binding: Type 'a', 'n' into box
<

Template updated with each change


(i.e. keystroke)!

CS142 Lecture Notes - AngularJS


In a JavaScript file:

<
or to fetch existing module:

Module - Container of everything needed under


CS142 Lecture Notes - AngularJS
In a JavaScript file:
Controllers
<

Will define a new scope and call


controller

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:

are evaluated in the context of the scope. Controller sets up scope:

● 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 set to its enclosing parent scope
Creates new scope (ScopeA)

Creates new scope (ScopeB)

● 's prototype points at


● Mostly does what you want (all properties of A appear in B)
● Useful since scopes are frequently created (e.g. , etc.)
● is parent of all
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 will locate it in whatever inherited scope it is in.


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: ( ) (e.g. caching in controller)
Trigger a digest cycle: ( (e.g. model updates in event)
CS142 Lecture Notes - AngularJS
Example of needing scope $watch

CS142 Lecture Notes - AngularJS


A digression: vs
Word separator in multiword variable name

● Use dash:
● Capitalize first letter of each word:

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: and
CS142 Lecture Notes - AngularJS
ngRepeat - Directive for looping in templates
● - Looping for DOM element creation ( etc.)

● Powerful but opaque syntax. From documentation:

CS142 Lecture Notes - AngularJS


ngIf/ngShow - Conditional inclusion in DOM
● - Include in DOM if expression true (dialogs, modals, etc.)

Note: will create scope/controllers when going to true, exit going to false

● - Like ngIf except uses visibility to hide/show DOM elements


○ Occupies space in DOM structure (but not on screen) when hidden
○ Scope & controllers created at startup

CS142 Lecture Notes - AngularJS


ngClick/ngModel - Binding user input to scope
● - Run code in scope when element is clicked

● Bind with tags

CS142 Lecture Notes - AngularJS


ngHref & ngSrc
Sometimes need to use ng version of attributes:
● tag

● tag

CS142 Lecture Notes - AngularJS


ngInclude - Fetches/compile external HTML fragment
● Include partial HTML template (Take angular expression of URL)

● CS142 uses for components

CS142 Lecture Notes - AngularJS


Directives
● Angular preferred method for building reusable components
○ Package together HTML template and Controller and extend templating language
○ Ng prefixed items in templates are directives
● Directive can:
○ Be inserted by HTML compiler as:
■ attribute ( )
■ element ( )
○ Specify the template and controller to use
○ Accept arguments from the template
○ Run as a child scope or isolated scope

● Powerful but with a complex interface


Example:
CS142 Lecture Notes - AngularJS
Directives are heavily used in Angular

CS142 Lecture Notes - AngularJS


Services
● Used to provide code modules across view components
○ Example: shared JavaScript libraries
● Angular has many built-in services
○ Server communication (model fetching)

○ Wrapping DOM access (used for testing mocks)

○ Useful JavaScript functionality

○ Angular internal accesses

CS142 Lecture Notes - AngularJS


Dependency injection
● Support for programming in large
a. Entities list what they define and what they need
b. At runtime Angular brings entities and their dependencies together

● Example:

CS142 Lecture Notes - AngularJS


Angular APIs
● ngRoute - Client-side URL routing and URL management
○ CS142 - Passing parameters to the views

● ngResource - REST API access


○ CS142 - Fetch models

● ngCookies - Cookie management and access


● ngAria - Support for people with disabilities (Accessible Rich Internet Applications)
● ngTouch - Support for mobile devices ( , , etc.)
● ngAnimate - Support for animations (CSS & JavaScript based)
● ngSanitize - Parse and manipulate HTML safely
CS142 Lecture Notes - AngularJS
Some thoughts on JavaScript Frameworks
● Web app can not start until framework downloaded and initialized
○ Particular relevant for wimpy devices and networks (e.g. Mobile)

● Can lazy load Angular modules (Makes dependency tracking important)


● Core Angular is not small

1,070,726 bytes

148,199 bytes

53,281 bytes

CS142 Lecture Notes - AngularJS

You might also like