Angular Notes

Image Optimization

https://github.com/JamieMason/ImageOptim-CLI

http://addyosmani.com/blog/image-optimization-tools/

https://halpjira01.flagship.hal.com:8444/confluence/display/SBF/2015/05/19/Responsive+Images

ADA Compliance

https://docs.angularjs.org/api/ngAria

Dust versus AngularJS

JavaScript Framework Dust:
http://akdubya.github.io/dustjs/#guide

AngularJS versus Dust
Refer: http://stackoverflow.com/questions/15336187/what-is-the-difference-between-angularjs-and-dust-js

Dust.js is purely a templating module. So, it allows the combination of json with a template to deliver html output.

Angular.js is client side framework that allows binding of logic to variables defined in a template (your page).

So, with dust.js you are responsible for deciding when to run the json through the template. Typically you feed in the json on the server (or client) and ask it to render the results.

With angular.js when the model (the json) changes the framework re-renders as appropriate. Triggers for that change could be user actions (such as filling a form in) or it could be due to loading some fresh json from a service.

Typically you would use angular.js if you want a single page JS app (think gmail). dust.js is perhaps more akin to a traditional approach with multi pages with content driven by passing in json.

You could even use the both of them in tandem - server side rendering using dust.js with dynamic client side logic in angular.js.

AngularJS Sample Build Project

Refer: https://github.com/jhades/angularjs-gulp-example/blob/master/gulpfile.js
Note: list folder has wrong relative file paths

Refer: http://blog.angular-university.io/what-every-angular-project-likely-needs-and-a-gulp-build-to-provide-it/

AngularJS Mock Services rest-tool

Here is the information about the rest-tool project, originally introduced by Gyorgy.

NPM source
https://www.npmjs.org/package/rest-tool

Project documentation
http://tombenke.github.io/rest-tool/

Quick Start Guide
http://tombenke.github.io/rest-tool/docs/getStarted.html

Install NPM modules
http://tombenke.github.io/rest-tool/docs/getStarted.html#installation

Create a simple project
http://tombenke.github.io/rest-tool/docs/getStarted.html#create-your-first-rest-api-project

Using canned mockup with booking flow

Refer: https://www.npmjs.org/package/canned

  • $ npm install canned
  • Unzip canned responses in bookingflow folder canned.zip
  • Update configuration.js file
    cmsUrl: 'http://localhost:3000/hal-cms',
    dsUrl: 'http://localhost:3000/hal-ds',
  • Launch canned server from root of bookingflow, default port is 3000, left here for documentation
    ./node_modules/canned/bin/canned -p 3000 ./canned

Limitation, rest calls that return images do not work properly.

Example on how to define a call

  • You will need to determine if it is a get or a post to generate the proper index file of either index.post.json or index.get.json, see the last statement of example
  • Use chrome to get the URL of the rest call, and then also to get the curl version of the rest call
  • You can string all of these together and create a bash script to do everything at once

mkdir -p /home/mruckman/Documents/bookingflow/canned/hal-ds/rest/pricing/v1.0.0/companyCode/HAL/cpp/countryCode/US

cd /home/mruckman/Documents/bookingflow/canned/hal-ds/rest/pricing/v1.0.0/companyCode/HAL/cpp/countryCode/US

curl 'https://qabook.hollandamerica.com/hal-ds/rest/pricing/v1.0.0/...