Angular 2 for Intermediate #3

Oswald Campesato

Consultant/Training:www.iquarkt.com

ocampesato@yahoo.com

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

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

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)

Express/Mongo/Jade Example• 1) cd express-mongo-jade/

• 2) npm install

• 3) mongod &

• 4) npm start

Angular 2 + Firebase• Requires a lengthy set-up process

• 1) cd angularfire2-master

• 2) follow the 10 steps in README.md

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

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

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

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

A Simple GraphQL Server• 1) cd graphql-intro-master

• 2) npm install

• 3) node index.js

• 4) localhost:3000

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

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

Angular2 + GraphQL Client (1b)• Set up the Angular 2 client:

• 1) cd angular2-graphql

• 2) npm install

• 3) python –m SimpleHTTPServer

• 4) localhost:8000

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"• }• }

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 }• }• }• });

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];• }• }• }• })• });

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"• }• }

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>• `• })

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()• );• }

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]);

Starting the Servers and Client• Step #1: // start the GraphQL servernode index.js

• Step #2: // start the Python (file) serverpython –m SimpleHTTPServer

• Step #3: // launch the Angular2 clientlocalhost:8000

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

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

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

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

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

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

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

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

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

What is Redux?• An implementation of Flux

• Created by Dan Abramov

• Most popular implementation of Flux

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

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

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

Reactive Angular 2• Presentation by Rob Wormald

• https://docs.google.com/presentation/d/1dC4oyxrE5IqDSJpKI_akszfFgBx24vC7YDYzmbrvnmM/edit#slide=id.gf17cbeaa9_0_200

Recent/Upcoming Books and Training1) 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)