Elizabeth LongStudent InternSpring, 2014

Red Rocks Community CollegeLakewood, CO

Web DevelopmentGraduating May 2014

IP Commerce Query Demo

Internship Program 3

Project builds on existing application using the following:

AngularJSExpressNode.js

MODEL:the data that is shown to the user and with which the user interacts

VIEW:what the user sees (the DOM)

CONTROLLER:the business logic behind views

Angular’s MVChttps://docs.angularjs.org/guide/concepts

Request Life Cycle

CLIENTAngular

SERVERNode

Express

COMMERCEBOARDING

SERVICE

HTML & Angular: Client-side

Internship Program 7

AngularJS is a JavaScript framework used to create dynamic web apps.

Created new views using HTML & Angular’s ng-model and ng-click directives

customerLanding.html qualifierLog.html queryResults.html qualiferResponses.htmlappDetails.html persCredReport.html

Created a new controller using Angular and JavaScriptcustomerLanding.js - external controller used to handle SUBMIT

($scope) and to pass query parameters ($http) to Express using Angulars HTML Method: $http.get

Express & Node: Server-side

Internship Program 8

Express (web application framework for Node)Receives requests from Angular and passes them to

Node, then returns responses from Node back to Angularadded code to api.js - /api/custLandingQuery

Node passes request to Commerce Boarding Serviceadded code to ipc.js - this.custLandingQ

Application Dropdown OptionEliminates need to type /accept, /pend, or /reject in URL

Internship Program 9

custLanding.htmlBalsamiq

Internship Program 10

custLanding.html

Internship Program 11

queryResults.htmlBalsamiq

Internship Program 12

queryResults.html

Internship Program 13

qualifierLog.htmlBalsamiq

Internship Program 14

qualifierLog.html

Internship Program 15

qualifierResponses.htmlBalsamiq

Internship Program 16

qualifierResponses.html

Internship Program 17

persCredRpt.htmlBalsamiq

Internship Program 18

persCredRpt.html

Internship Program 19

New Skills• Experience with the event-driven, non-blocking I/O model

used with web applications• How to recognize asynchronous code• The nuts & bolts of Angular, Express, and Node APIs and

HTTP METHODS• Express & Node - all I/O operations must include a callback • How to create and use angular.module() & Node

module.exports• How to pass query params: Angular Express Node• Structuring queries into acceptable formats for a service• Balsamiq, GIT and repositories• The difference between JS object and .json file

Technologies & Tools

HTML Yeoman *CSS Bower *JavaScript client-side Sass/Compass *JavaScript server-side * Grunt *MVC * Chrome Console AngularJS * Server ConsoleExpress * Nodemon npm *Node.js/npm * Balsamiq *Rest APIs & Callbacks * Sublime Text *GIT/repositories *

* no prior exp