The document provides a comprehensive guide on setting up and working with Angular 2, GraphQL, and related technologies, including code samples and installation instructions. It covers various topics such as the Node stack, Firebase integration, GraphQL queries, and client-server communication patterns like Flux and Redux. Additionally, it includes references to resources for further learning and recent/upcoming books in the field.

1. Angular 2 for Intermediate #3
Oswald Campesato
Consultant/Training:
www.iquarkt.com
ocampesato@yahoo.com

2. Download/Install Code Samples
• 1) download/unzip Github repo (or clone repo)
• 2) npm install
• 3) python –m SimpleHTTPServer (or equivalent)
• 4) go to http://localhost:8000

3. List of Code Samples
• express-mongo-jade
• angularfire2-master
• graphql-intro-master
• angular2-graphql
• graphql-demo-server
• angular2-redux-example-master
• ng2-redux-sample
• angular2-relay-master
• ngnl_demos-master

4. The Node Stack (review)
• 1) NodeJS server
• 2) MongoDB: noSQL database
• 3) express: for Node-based applications
• 4) MEAN stack: Mongo/Express/Angular/Node
NB: MEAN stack does not support Angular 2 (yet)

5. Express/Mongo/Jade Example
• 1) cd express-mongo-jade/
• 2) npm install
• 3) mongod &
• 4) npm start

6. Angular 2 + Firebase
• Requires a lengthy set-up process
• 1) cd angularfire2-master
• 2) follow the 10 steps in README.md

7. What is GraphQL?
• a query language for graphs (Facebook/2012)
• created for fetching (finer-grained) data
• provides interface between client and server
• client requests data from GraphQL server
• data requests are based on GraphQL queries

8. GraphQL Queries (1)
• interface Employee {
• id: String!
• fname: String
• lname: String
• }
•
• type Query {
• emp: Employee
• }

9. GraphQL Queries (2)
• Query:
• {
• emp {
• fname
• }
• }
• Result:
• {
• "data": {
• "emp": {
• "fname": "John"
• }
• }
• }

10. GraphQL Queries (3)
• query EmpNameQuery {
• emp {
• fname
• lname
• }
• }
• The result of the preceding query is here:
• {
• "data": {
• "emp": {
• "fname": "John",
• "lname": "Smith"
• }
• }
• }

11. A Simple GraphQL Server
• 1) cd graphql-intro-master
• 2) npm install
• 3) node index.js
• 4) localhost:3000

12. A Simple GraphQL Client
• 1) create an HTML Web page
• 2) create a data request
• 3) send data as an HTTP POST request
• 4) localhost:3000
• => next example creates an Angular 2 client

13. Angular2 + GraphQL Server (1a)
• Set up the Express-based server:
• 1) cd graphql-demo-server
• 2) npm install
• 3) node index.js
• => listening on port 3000

14. Angular2 + GraphQL Client (1b)
• Set up the Angular 2 client:
• 1) cd angular2-graphql
• 2) npm install
• 3) python –m SimpleHTTPServer
• 4) localhost:8000

15. GraphQL Express App: package.json
• {
• "name": "graphql-demo",
• "version": "1.0.0",
• "description": "",
• "main": "index.js",
• "keywords": [],
• "author": "",
• "license": "ISC",
• "dependencies": {
• "express": "^4.13.4",
• "express-graphql": "^0.4.10",
• "graphql": "^0.4.18"
• }
• }

16. GraphQL Express App: index.js
• var graphql = require('graphql');
• var graphqlHTTP = require('express-graphql');
• var express = require('express');
• var data = require('./data2.json');
• // Define a user type with three string fields
• var UserType = new graphql.GraphQLObjectType({
• name: 'User',
• fields: function() {
• return {
• id: { type: graphql.GraphQLString },
• fname: { type: graphql.GraphQLString },
• lname: { type: graphql.GraphQLString }
• }
• }
• });

17. GraphQL Express App: index.js
• var schema = new graphql.GraphQLSchema({
• query: new graphql.GraphQLObjectType({
• name: 'Query',
• fields: {
• user: {
• type: UserType,
• args: {
• id: { type: graphql.GraphQLString },
• fname: { type: graphql.GraphQLString },
• lname: { type: graphql.GraphQLString }
• },
• resolve: function (_, args) {
• return data[args.id];
• }
• }
• }
• })
• });

18. GraphQL Express App: data.json
• {
• "100": {
• "id": "100",
• "fname": "Dan",
• "lname": "Smith"
• },
• "200": {
• "id": "200",
• "fname": "Lee",
• "lname": "Jones"
• },
• "300": {
• "id": "300",
• "fname": "Nick",
• "lname": "Stone"
• }
• }

19. Angular 2 Client Code: main.ts
• @Component({
• selector: 'my-app',
• template: `
• <button (click)="httpRequest()">User Info</button>
• <div>
• <li *ngFor="#user of graphqlUsers">
• {{user.id}}
• {{user.fname}}
• {{user.lname}}
• </li>
• </div>
• `
• })

20. Angular 2 Client Code: main.ts
• class MyApp {
• graphqlUsers = [];
•
• constructor(@Inject(Http) public http:Http) {
• }
•
• httpRequest() {
• var userDetails = "{user(id:%22200%22){fname,lname,id}}";
• var userQuery = "http://localhost:3000/graphql?query="+userDetails;
•
• this.http.get(userQuery)
• .map(res => res.json())
• .subscribe(
• data => this.graphqlUsers = JSON.stringify(data),
• err => console.log('error'),
• () => this.graphqlInfo()
• );
• }

21. Angular 2 Client Code: main.ts
• graphqlInfo() { // optional code
• //----------------------------------------------------------
• // the 'eval' statement is required in order to
• // convert the data retrieved from json-server
• // to an array of JSON objects (else an error)
• //----------------------------------------------------------
• var myObject = eval('(' + this.graphqlUsers + ')');
• this.graphqlUsers = [myObject.data.user];
• }
• }
•
• bootstrap(MyApp, [HTTP_BINDINGS]);

22. Starting the Servers and Client
• Step #1: // start the GraphQL server
node index.js
• Step #2: // start the Python (file) server
python –m SimpleHTTPServer
• Step #3: // launch the Angular2 client
localhost:8000

23. What is Relay?
• a JavaScript Framework (Facebook)
• for creating data-driven React apps
• declarative syntax
• works with GraphQL
• creates efficient network requests
• fetches only what is requested
• aggregates queries
• caches data on client

24. Sample Relay Query
• query UserQuery {
• user(id: "123") {
• name,
• },
• }

25. Sample Relay Fragment
• fragment UserProfilePhoto on User {
• profilePhoto(size: $size) {
• uri,
• },
• }

26. Sample Relay Query+Fragment
• query UserQuery {
• user(id: "123") {
• ...UserProfilePhoto,
• },
• }

27. Sample Relay Query+Edges
• query UserQuery {
• user(id: "123") {
• friends(first: 10) {
• edges {
• node {
• ...UserProfilePhoto,
• },
• },
• },
• },
• }

28. An Angular 2 + Relay Example
• cd angular2-relay-master
• npm install
• cd examples/conference-planner
• npm install
• npm start (= babel-node ./server.js)
• navigate to localhost:3000

29. GraphQL without Relay?
• https://github.com/rs/rest-layer

30. What is the Flux Pattern?
• developed by Facebook
• a unidirectional data flow (not MVC)
• complements React's view components
• technology agnostic
• so it also "works" with Angular 2
• implementations: Redux et al

31. Flux Applications
• three major parts
• the dispatcher
• the stores
• the views (React components)
• Components and their flow:
• Action->Dispatcher->Store(s)->View->Action
• Action = Event Type + Payload

32. What is Redux?
• An implementation of Flux
• Created by Dan Abramov
• Most popular implementation of Flux

33. An Angular 2 + Redux Example
• cd angular2-redux-example-master
• jspm install
• npm install (if the preceding command fails)
• python –m SimpleHTTPServer
• navigate to localhost:8080

34. Other Flux Implementations
• Alt, flummox, fluxury, mcfly, reflux, etc
• At least 16 implementations
• Note: Relay is also a Flux implementation
• Comparison of Flux implementations:
https://github.com/voronianski/flux-comparison
=> Github links are available as well

35. Angular 2 and React Native
• Download the Github repository:
http://angular.github.io/react-native-renderer
• Unzip the file and ‘cd’ into the directory
• npm install
• gulp init
• gulp start.ios
• gulp start.android

36. Reactive Angular 2
• Presentation by Rob Wormald
• https://docs.google.com/presentation/d/1dC4oyxrE5Iq
DSJpKI_akszfFgBx24vC7YDYzmbrvnmM/edit#slide=id.gf
17cbeaa9_0_200

37. Recent/Upcoming Books and Training
1) HTML5 Canvas and CSS3 Graphics (2013)
2) jQuery, CSS3, and HTML5 for Mobile (2013)
3) HTML5 Pocket Primer (2013)
4) jQuery Pocket Primer (2013)
5) HTML5 Mobile Pocket Primer (2014)
6) D3 Pocket Primer (2015)
7) Python Pocket Primer (2015)
8) SVG Pocket Primer (2016)
9) CSS3 Pocket Primer (2016)
10) Angular 2 Pocket Primer (2016)