Post on 22-Apr-2015
description
AngularJS Weekend Immersive TrainingTroy Miles 18 & 19 October 2014
codepen.io/collection/sIaCb/
Me
Troy Miles
30+ years of programming experience
rockncoder@gmail.com
@therockncoder
–The Rockncoder
“Once users have had a cool feature, they will always want it or something better.”
Day One Agenda
Introduction
CodePen
Core Concepts
Filters
Controllers
Directives
Form input + validation
Firebase
$apply + $watch
Day Two Agenda
$http
Providers
Services
Factories
Routing
Custom Directives
Animation
Unit Testing
Day One Agenda (continue)
Directives
Lab - jQuery UI Widget
Day One Wrap-up
Introduction to AngularJS
Modern JavaScript Heavy Web Applications
1996 - Microsoft introduces the iframe in IE
1999 -Microsoft introduces the XMLHTTP ActiveX control
2004 - GMail & Kayak, two heavily ajax’ed apps
2005 - Jesse James Garrett’s article coins the phrase AJAX
2006 - Prototype and jQuery released
Text
Single Page Applications Explained
Early Single Page Apps
Difficult to write
Even worse to maintain and enhance
Broke the back button
Broke web crawlers
Frameworks to the rescue
Imposed structure
Included plumbing code
Tested by other developers
Documented
Disadvantages of Frameworks
Code bloat
Learning the framework
Backbone.jsCreated by Jeremy Ashkenas in 2010
19 kb production version (minimized, not gzipped)
One dependency - Underscore.js, optional jQuery
Three core concepts: models, collections, & views
Uses lots of custom events
KnockoutCreated by Steve Sanderson in 2010
47 kb production version (minimized, not gzipped)
Uses MVVM pattern
Two way data-binding
No dependencies
Supports all mainstream browsers
EmberCreated by Yehuda Katz and Tom Dale in 2011
Convention over configuration
Ember Data, a separate package, handles RESTful data
Handlebars.js, a separate package, handles templates
337 kb production version (minimized, not gzipped)
Other frameworksDojo
YUI
Agility.js
Knockback.js
CanJS
Maria
Polymer
React
cujoJS
Montage
Sammy.js
Stapes
Batman.js
http://todomvc.com/
AngularJSCreated by Miško Hevery and Adam Abrons in 2009
JavaScript MVC
106 kb production version (minimized, not gzipped)
Declarative programming for UI
Imperative programming for business logic
How popular is AngularJS?
CodePenCodePen is a playground for front end web programming
It allows us to concentrate on learning Angular and not on setting up web dev tools
Individual samples are called “pens”
http://codepen.io/collection/sIaCb/
https://bitly.com/bundles/rockncoder/8
Lab: CodePen
Simple test to make sure we are all able to access
Go to http://codepen.io/collection/sIaCb/
The URL is case sensitive
Find the “Hello-AngularJS” pen
Run it
Lab: jQuery Data Binding
Open the pen, “Start-jQuery-Binding”
Add code to the JavaScript to enable binding between the input and span tags
Each time the user types a letter it should appear in the span tag
jQuery Example<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Binding jQuery Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/jquery-1.11.1.min.js"></script></head><body> <div class="container" > <h1>Greet-o-matic</h1> <input type="text" id="firstName"/> <hr/> <p>Hello <span id="showName"></span>,<br/>Have a nice day!</p> </div> <script type="text/javascript"> $( document ).ready( function(){ $('#firstName').on("keyup", function(evt){ $('#showName').text(this.value); }); }); </script></body></html>
AngularJS Example<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <title>Binding AngularJS Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/angular.js"></script></head><body> <div class="container" > <h1>Greet-o-matic</h1> <input type="text" ng-model="userName"/> <hr/> <p>Hello {{userName}},<br/>Have a nice day!</p> </div></body></html>
Lab: Two Way Data Binding
Use what you’ve just learned
Add a second input type text
Wire the two boxes and the span tag together
Two-way Data Binding<!DOCTYPE html><html ng-app><head lang="en"> <meta charset="UTF-8"> <title>Binding AngularJS Example</title> <link rel="stylesheet" href="../css/bootstrap.css"/> <script type="text/javascript" src="../libs/angular.js"></script></head><body><div class="container" > <h1>Greet-o-matic</h1> <div class="col-lg-6"> <input type="text" ng-model="userName" placeholder="Enter name here"/> </div> <div class="col-lg-6"> <input type="text" ng-model="userName" placeholder="or over here"/> </div> <hr/> <p>Hello <span>{{userName}}</span>,<br/>Have a nice day!</p></div></body></html>
AngularJS Key Features
MVC
HTML Templates
Dependency Injection
Deep Linking
Directives
Model View Controller
The model contains data representing the current
The view displays the data to the user
The controller manages the relationship between the two
HTML Templates
Just HTML documents
No new syntax to learn
No pre-processors
Can be written to pass HTML validators
Dependency Injection
You already know it, it is really just passing parameters to a function
Encourages writing code which describes its dependencies
Can pass a mock object for the real thing
Deep Linking
Doesn't break the back button
User can bookmark and share application state
Directives
The best feature of AngularJS
Allows HTML to be extended
Create custom DOM elements
DOM transformation engine
Module
A container for different parts of your app
Most apps will have one module
Most 3rd party libraries will come with their own
Can create extra modules for more complex apps via JavaScript
Modules from ng team
ng - core
ngRoute
ngAnimate
ngResource
ngCookies
ngTouch
ngSanitize
ngMock
Dependency InjectionA software design pattern that implements inversion of control and allows a program design to follow the dependency inversion principle
Allows a dependency to be passed to an object
Allows code to clearly state dependencies
Leads to code which is easier to debug and test
Makes it possible to minimize apps without breaking them
Dependency InjectionThe DI pattern in AngularJS looks funky due to JavaScript’s shortcomings
The pattern is name of module, dot, name of provider, name of object, an array with the list of dependencies in strings and a function as the last item in the array
tempApp.controller('CurrentCtrl', ['$scope', function ($scope) { $scope.temp = 17; }]);
Data Binding
In Angular, binding is built into the framework
Replaces text content of HTML element with the value of the expression
{{ expression }}
<ANY ng-bind=“expression”>…</ANY>
<ANY class=“ng-bind: expression;”>…</ANY>
ng-app
Declares the boundary of an Angular app
The first ng-app found will be auto-bootstrapped
ng-app can optionally name a module
Can encompass the entire page <html ng-app>
Or only part of it, <div ng-app>
ng-bind vs ng-modelng-bind is one way data binding, aka output
ng-bind renders a property on scope
ng-bind has a shortcut, {{expression}}
ng-bind is preferred over shortcut
ng-model is for two-way data binding
ng-model is intended for form elements
$scopeAn object which refers to the application model
The glue between the controller and the view
The execution context for expressions
Provides APIs
$watch - observes model
$apply - propagates model changes to Angular
Filters
Used to format data displayed to user
Strictly front-end, doesn’t change model data
Accessible using declarative or imperative syntax
{{ expression [| filter_name[:parameter_value] ... ] }}
$scope.originalText = 'hello';$scope.filteredText = $filter('uppercase')($scope.originalText);
A tour of built-in filterscurrency
date
json
lowercase
uppercase
number
filter
limitTo
orderBy
Directives
Markers on a DOM element that attach a behavior to it
Can be an attribute, element name, comment, or CSS
The HTML compiler traverses the DOM at bootstrap and matches directives to DOM elements
Directives Names<div timePicker></div>
<div time-picker></div>
<div time:picker></div>
<div time_picker></div>
<div x-time-picker></div>
<div data-time-picker></div>
Directive Location
Tag name: <timePicker></timePicker>
Attribute: <div data-rnc-time-picker></div>
Class: <div class=“time-picker;”></div>
Comment: <!— directive:time-picker —>
Built-in Directives
ng-app
ng-bind
ng-controller
ng-href
ng-readonly
ng-repeat
ng-src
ng-submit
ng-transclude
ng-view
Lab: ToDo App
Lab: Using Filters
Building custom filterstempApp.filter('minimum', [function () { return function (arrTemp, minimum) { var filteredArray = []; var min = minimum ? minimum : 15; angular.forEach(arrTemp, function (value, key) { if (value.temp >= min) filteredArray.push(value); }); return filteredArray; }; }]);
Lab: Contacts App
Day One: Summary