angularjs half day recap
TRANSCRIPT
![Page 1: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/1.jpg)
AngularJS Half Day RecapLos Angeles, CA - 8 November 2014 Troy Miles
![Page 2: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/2.jpg)
Agenda
Starting an App
Providers / Config / Run
Routing
Controllers & Filters
Services
$http
$q
Caching
Animation
Unit Test
![Page 3: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/3.jpg)
chapter 1: starting an app
![Page 4: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/4.jpg)
Bootstrap 3
Bootstrap 3
Start Bootstrap website
Specifically using Simple Sidebar
![Page 5: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/5.jpg)
steps
add scripts to index.html
create app.js
use IIFE
![Page 6: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/6.jpg)
Config / Run
angular.module
config used to setup modules
run is like a “main” method
configs always executed before run
![Page 7: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/7.jpg)
Providers
Think of them like recipes
Constants
Values
Providers
Decorators
![Page 8: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/8.jpg)
What are providers?
Objects that are instantiated and wired together automatically by the injector service
The injector creates two kinds of objects:
services - defined by the developer
specialized objects - Angular framework pieces, controllers, directives, filters, or animations
![Page 9: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/9.jpg)
chapter 2: routing
![Page 10: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/10.jpg)
ngRoute
Provides routing and deep linking services and directives
Must include angular-route.js in HTML, after angular.js
Must mark ngRoute as a dependent module
![Page 11: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/11.jpg)
routing steps
add script to index.html
add hrefs to index.html
add ngRoute to app.js
create routes.js
create templates
![Page 12: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/12.jpg)
chapter 3: controllers
![Page 13: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/13.jpg)
Controller StylesAs syntax
Binds methods and properties onto the controller using this
ng-controller="SettingsController1 as settings"
Scope syntax
Injects a $scope into the controller
ng-controller="SettingsController2"
![Page 14: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/14.jpg)
Controller Don’ts
DOM manipulation
Format input
Filter output
Share code or state
Do too much
![Page 15: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/15.jpg)
controller steps
create the four controller files: session.js, sessions.js, presenter.js, presenters.js
inject $routeParams
![Page 16: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/16.jpg)
FiltersUsed 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);
![Page 17: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/17.jpg)
Strict Contextual Escaping
aka sce
Allows you put HTML markup onto your page
Helps you to secure the markup from security vulnerabilities like XSS, clickjacking, etc.
![Page 18: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/18.jpg)
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; }; }]);
![Page 19: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/19.jpg)
filters steps
add the unsafe filter to app.js
don’t forget to inject $sce
add the jsonDate filter to app.js
don’t forget to inject $filter
add filters to markup and code
![Page 20: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/20.jpg)
chapter 4: services
![Page 21: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/21.jpg)
Services
Substitutable objects that are wired together using DI
Used to organize and share code across app
Only instantiated when an app component depends on it
Singletons
Built-in services always start with “$”
![Page 22: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/22.jpg)
services steps
create a new file, dataServices.js
move the JSON data to dataService
modify the controllers to use dataService
![Page 23: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/23.jpg)
chapter 5: $http
![Page 24: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/24.jpg)
$http steps
modify dataServices
inject $http
inject our two constants: SESSIONS_URL & PRESENTERS_URL
modify the controllers
![Page 25: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/25.jpg)
chapter 6: $q
![Page 26: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/26.jpg)
Promises in Angular with $q
A promise has two components:
Deferreds - represents a unit of work
Promises - represents data for the Deferreds
![Page 27: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/27.jpg)
$q steps
in dataService.js, replace callback with $q
modify controllers
![Page 28: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/28.jpg)
chapter 7 - caching
![Page 29: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/29.jpg)
caching steps
add angular-cache.min.js to index.html
modify app.js and its run method
modify dataServices.js
![Page 30: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/30.jpg)
chapter 8: animation
![Page 31: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/31.jpg)
ngAnimate
angularjs version 1.1.5 and greater
Provides support JavaScript, CSS3 transition/keyframe animation
ngAnimate attaches two classes to the DOM element
Enter: animate-enter & animate-enter-active
Leave: animate-leave & animate-leave-active
![Page 32: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/32.jpg)
supported directives
ngRepeat
ngView
ngInclude
ngSwitch
ngIf
ngClass
ngShow & ngHide
form & ngModel
ngMessages
ngMessage
![Page 33: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/33.jpg)
animate steps
include the animation.css in index.html
include angular-animate.min.js in index.html
include ngAnimate in app.js
add class tags to ng-view
![Page 34: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/34.jpg)
jasmine unit testing
![Page 35: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/35.jpg)
Jasmine
The default unit tester for AngularJS
Behavior Driven Development BDD
aka red-green tester
Others will work also
![Page 36: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/36.jpg)
describe - test suite
describe is a global jasmine function
two params
string - name of the test suite
function - implementation of the suite
Can be nested
![Page 37: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/37.jpg)
it - specs
it is a global jasmine function
looks like describe
a spec contains one or more expections
if all expectations true, it is a passing spec
it any expectation fails, it is a failing spec
![Page 38: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/38.jpg)
expectations
expect function
one param
the actual
chained to a Matcher function
![Page 39: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/39.jpg)
Matchers
take the output of the expect function and compare it to something
implement a boolean compare between actual value and expected
reports to Jasmine if the expectation is true or false
any matcher can be negated with a not before it
![Page 40: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/40.jpg)
some matchers
toBe - compares using ===
toEqual - works for literal variables and objects
toMatch - for regular expressions
toBeDefined - compares against 'undefined'
toBeUndefined - also compares against 'undefined'
![Page 41: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/41.jpg)
yet more matchers
toBeNull
toBeTruthy
toBeFalsy
toContain - finds an item in array
toBeLessThan
![Page 42: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/42.jpg)
beforeEach / afterEachAre setup and teardown functions
called before and after each spec it
this
beforeEach, it, and afterEach share the same this
it is cleared before call spec call
any beforeEach not included in a describe block is executed before any Jasmine test
![Page 43: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/43.jpg)
disabling suites and specs
prepend an 'x' before describe or it
specs inside a disabled suite are not ran
![Page 44: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/44.jpg)
Summary
We built a simple but more full featured site using standard open source tools
![Page 45: AngularJS Half Day Recap](https://reader033.vdocuments.site/reader033/viewer/2022052904/557d5f37d8b42aba3d8b4f13/html5/thumbnails/45.jpg)
Resourceshttps://github.com/johnpapa/angularjs-styleguide#resolving-promises-for-a-controller
http://www.yearofmoo.com/2013/09/advanced-testing-and-debugging-in-angularjs.html
http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html
http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/
http://www.nganimate.org/