AngularJS-WebDesign-130415
advertisement
Richard Johnson Goal Designs Inc.
Minnesota Web Design Meetup – April 15, 2013
Slides available: http://goaldesigns.com/presentations-2013
rjohnson@goaldesigns.com
Web designed for documents
Server creates pages / browser displays
Data input sent to and processed by the server
Updated pages created on the server and resent
<!doctype html>
<html>
<head>
</head>
<body>
<form method="post" action="hello.php">
<label>Name:</label>
<input type="text" id="yourName”>
<input type="submit" value="Say Hello" />
<hr>
<?php
echo "<h1>Hello ".$HTTP_POST_VARS["yourName"]."!</h1>";
?>
</form>
</body>
</html>
Interactive client-side web
Collect input from user
Update display
Communicate with server
Client-side processing enabled by
JavaScript
DOM manipulation
HTTP server messaging
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#yourName").keyup(function () {
$("#helloName").text("Hello " + this.value + "!");
});
});
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" id="yourName">
<hr>
<h1 id="helloName"></h1>
</div>
</body>
</html>
Simplifies event binding and DOM
manipulation
Common API across multiple browsers
Supports plug-in modules to extend
functionality
Requires writing JavaScript code to wire
Follow good programming practices
Separate: data / display / processing
Simplify connecting data to display
Let us focus on the technologies of the web
HTML
CSS
JavaScript
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/ ⬋
angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Compare jQuery imperative wiring
<input type="text" id="yourName">
<h1 id="helloName"></h1>
<script type="text/javascript”>
$(function() {
$("#yourName").keyup(function () {
$("#helloName").text("Hello " + this.value + "!");
});
});
</script>
to AngularJS declarative relationships
<input type="text" ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
jQuery abstracts browser functionality
e.g. DOM traversal, event binding
AngularJS abstracts relationships (and more)
Note: AngularJS, and all web apps, are built
on browser functionality
HTML is a declarative document language
Browser translates HTML into a Document
Object Model (DOM)
DOM is the browser’s in-memory document
representation
JavaScript can manipulate the DOM
Browsers send a document (i.e. DOM) ready
event
AngularJS can intercede and rewrite the
DOM
The rewrite is driven by markup in the DOM
Software architectural pattern
Separates display from data
Originated with Smalltalk programmers
From work at Xerox PARC in the late 70’s
Models represent knowledge
Views provide a (visual) representation of attached
model data
Controllers connect to and control views and models
Different variations of the pattern
Model-View-ViewModel (MVVM)
Model-View-Presenter (MVP)
Variations differ on…
… connectivity
… cardinality
… directionality
“MVC vs MVVM vs MVP. What a controversial topic that many developers
can spend hours and hours debating and arguing about.
For several years AngularJS was closer to MVC (or rather one of its clientside variants), but over time and thanks to many refactorings and api
improvements, it's now closer to MVVM – the $scope object could be
considered the ViewModel that is being decorated by a function that we call
a Controller.
…
I hereby declare AngularJS to be MVW framework - Model-ViewWhatever.
…”
Igor Minar – Google AngularJS Development Team
Backbone.js
Ember.js
Knockout
Others
Summary from 2012 Throne of JS conference
Library (Backbone and Knockout)
passive functionality
invoked by the application
Framework (Ember)
provides application architecture
handles common requirements
invokes application code
AngularJS is closer to a framework
*I ported my Backbone application to angular. The Code
size went down from 5k lines of code to guess what? 750
lines. Not just that.. The code is much cleaner.. Earlier,
there was a huge technical debt attached to this
implementation in backbone.. Each time I had to sit with
it. It took me quite a while to understand all the hooks and
how the individual models and classes and views
interacted together.. ..Now its a breeze.. *
http://stackoverflow.com/a/10264263
Working with AJAX in mid-2011
XML for data
XSLT to map XML data to HTML
Considered changing to JSON
Found a link to AngularJS (alpha)
AngularJS website: angularjs.org
Examples are live
Phonecat tutorial is worthwhile
My “goto” sources:
Developer guide
API reference
Load AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.0.6/angular.min.js"></script>
Bootstrap
<html ng-app>
Declare relationships
ng-model="yourName”
{{yourName}}
One created with each controller
Prototypically inherits from parent
AngularJS has a root scope
Can create isolated scopes (e.g. in directive)
Automatic
propagation of
data changes
Model is single
source of truth
Digest cycle
Contains the
code behind
the view
Try to keep
lightweight
Added to a WordPress site
Custom theme
Page templates with shortcodes
Built summer 2012 (just as AngularJS 1.0
shipped)
Created order form and product location pages
Note – it’s a live site (and good wine )
Too much code in the controller - modularize
Provides declarative form validation
Input fields declared as: required, email
Form has flags for: $valid, $dirty
Usable as a standalone validation library
Directives enhance HTML
Custom element name or attribute (also class
and comment)
AngularJS provides over 50
form – element directive
ng-repeat – attribute directive (it’s amazing!)
Declarative way to
format displayed data
filter and sort data arrays
Software architectural components
Services provide data and compute
Exist across views
Depend on other services
AngularJS has 20+
$http – service to communicate with servers
$http service
Input config object
Returns promise
$http({method: ‘GET’, url: fetchUrl})
.success(function(data, status) {
// process the data here
})
.error(function(data, status) {
// error handling
});
Communication is asynchronous
Promises represent result of an action
Particularly used with asynchronous actions
They are either resolved or rejected
DI is a software architectural pattern
Separation of concerns
Service creation independent from usage
Good for
Modular code
Allows AngularJS to wire in correct order
Supports substitution (for patching and testing)
Services identified by parameter name
Minification obfuscates the name
Pass names as strings in array
angular.module('GoaleryServices')
.factory('StatusManager',
[
'CloudLogin', '$q',
function (cloudLogin, $q) {
…
Prototype-based scripting language
Dynamic, weakly typed, first-class functions
Great JavaScript book:
Crockford (2008) JavaScript: The Good Parts –
O’Reilly
JavaScript doesn’t have a compiler
Must execute code to test
Testability was a fundamental objective of
AngularJS
Miško Hevery (AngularJS creator)
Previously created JsTestDriver
Unit testing support
JsTestDriver
Jasmine
DI allows substituting mocks for hard to test code
Server communication
Logging
Angular Scenario Runner – E2E testing
Simulates user interations
Single web page
Loads the base HTML and included sources once
App changes views dynamically
Server is called upon when needed
Prefer using asynchronous server calls
Data changes
Fetch more data
Declarative view specification
HTML augmented with:
Directives, Markup, Filter, Form Controls
Loaded either
with a simple single web page
dynamically into a view as partials
Define the mapping from URL to view
Can also bind controller
Define URL parameters
$routeProvider.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: BookCntl
});
$routeProvider.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: ChapterCntl
});
AngularJS navigation updates the browser
address bar
Uses the HTML5 history API – fallback to
hash-bang (#!) URL
Users can link to pages in you app
Server must recognize the link pattern and
serve the application
Directives package reusable HTML
Naming nuance: “myDir” becomes “my-dir”
Conceptual compile and link phases
Can specify: scope, binding, restrictions, etc
Supports transclusion
Consider creating a custom DSL
Packaging of JavaScript code
Modules declare dependencies
AngularJS instantiates in correct order
Provides separation of namespaces
Open source – MIT License
Built by Google and community
1.0 released June 2012
1.0.6 current (April 2013)
http://angularjs.org/
AngularJS 1.0.X are considered stable production
releases
Contains bug fixes and documentation updates
AngularJS 1.1.X is unstable development
Next stable feature release will be 1.2.X
Available on the Google CDN
https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angul
ar.js
Both full source and minified (angular.min.js)
AngularJS includes a jQuery “lite”
Provides the minimal features directly used
Including jQuery will be used instead
Note – jQuery must be included before
AngularJS
Chrome
Internet Explorer 9+ (others see next slide)
Firefox
Safari
Opera
mobile browsers (Android, Chrome Mobile,
iOS Safari)
IE 8 is officially supported and tested
Declare custom element tags
Routing uses #! mode (IE9 also has no HTML 5 history)
A few other XML namespace declarations
See http://docs.angularjs.org/guide/ie
IE 6 & 7 support is possible “in theory”
Google doesn’t test these versions
< 1% of U.S. browsers (March 2013)
Chrome debugger plugin
Jasmine testing framework plugin
AngularJS UI – https://github.com/angular-ui
Compilation of several projects
▪
▪
▪
▪
AngularJS UI – calendar, date, map, if
UI Bootstrap – Twitter bootstrap components
ng-grid – data grid
UI-Router – enhanced routing with UI states
AngularStrap - http://mgcrea.github.io/angularstrap/
Blog – official announcments
Forums – support
JSFiddle Examples
Cheat Sheet
AngularJS (April 29, 2013)
Green & Seshadri – O’Reilly
AngularJS in Action (Fall 2013)
Ford & Ruebbelke– Manning
Coding in Angular
http://www.egghead.io/
Front-end Masters
AngularJS &Testability – Misko Hevery
Javascript the Good Parts – Douglas Crockford
Animation support
More flexible (and faster) ngRepeat directive
Powerful promise-based http request
interceptors
Dynamically generated directive templates
Initial batch of mobile/touch support
“What a web browser would have been had it
been designed for web applications”
- Miško Hevery
Upcoming AngularJS presentation
Google Developer Group – Twin Cities
May 1, 2013 at CoCo
