SlideShare a Scribd company logo
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 server
node index.js
• Step #2: // start the Python (file) server
python –m SimpleHTTPServer
• Step #3: // launch the Angular2 client
localhost: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/1dC4oyxrE5Iq
DSJpKI_akszfFgBx24vC7YDYzmbrvnmM/edit#slide=id.gf
17cbeaa9_0_200
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)

More Related Content

What's hot

Apache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawaniApache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawani
Bhawani N Prasad
 
Developing iOS REST Applications
Developing iOS REST ApplicationsDeveloping iOS REST Applications
Developing iOS REST Applications
lmrei
 
Forgive me for i have allocated
Forgive me for i have allocatedForgive me for i have allocated
Forgive me for i have allocated
Tomasz Kowalczewski
 
RxJava Applied
RxJava AppliedRxJava Applied
RxJava Applied
Igor Lozynskyi
 
Reactive Programming in Java 8 with Rx-Java
Reactive Programming in Java 8 with Rx-JavaReactive Programming in Java 8 with Rx-Java
Reactive Programming in Java 8 with Rx-Java
Kasun Indrasiri
 
An Overview of Node.js
An Overview of Node.jsAn Overview of Node.js
An Overview of Node.js
Ayush Mishra
 
AWS Java SDK @ scale
AWS Java SDK @ scaleAWS Java SDK @ scale
AWS Java SDK @ scale
Tomasz Kowalczewski
 
Adam Sitnik "State of the .NET Performance"
Adam Sitnik "State of the .NET Performance"Adam Sitnik "State of the .NET Performance"
Adam Sitnik "State of the .NET Performance"
Yulia Tsisyk
 
Finatra v2
Finatra v2Finatra v2
Finatra v2
Steve Cosenza
 
How NOT to write in Node.js
How NOT to write in Node.jsHow NOT to write in Node.js
How NOT to write in Node.js
Piotr Pelczar
 
OSMC 2012 | Neues in Nagios 4.0 by Andreas Ericsson
OSMC 2012 | Neues in Nagios 4.0 by Andreas EricssonOSMC 2012 | Neues in Nagios 4.0 by Andreas Ericsson
OSMC 2012 | Neues in Nagios 4.0 by Andreas Ericsson
NETWAYS
 
RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]
Igor Lozynskyi
 
Understanding reactive programming with microsoft reactive extensions
Understanding reactive programming  with microsoft reactive extensionsUnderstanding reactive programming  with microsoft reactive extensions
Understanding reactive programming with microsoft reactive extensions
Oleksandr Zhevzhyk
 
Distributed Eventing in OSGi - Carsten Ziegeler
Distributed Eventing in OSGi - Carsten ZiegelerDistributed Eventing in OSGi - Carsten Ziegeler
Distributed Eventing in OSGi - Carsten Ziegeler
mfrancis
 
Javascript Promises/Q Library
Javascript Promises/Q LibraryJavascript Promises/Q Library
Javascript Promises/Q Library
async_io
 
Logstash
LogstashLogstash
Logstash
琛琳 饶
 
Python in the database
Python in the databasePython in the database
Python in the database
pybcn
 
OSGi Community Event 2010 - Dependencies, dependencies, dependencies
OSGi Community Event 2010 - Dependencies, dependencies, dependenciesOSGi Community Event 2010 - Dependencies, dependencies, dependencies
OSGi Community Event 2010 - Dependencies, dependencies, dependencies
mfrancis
 
"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)
"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)
"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)
AvitoTech
 
Monitoring with Graylog - a modern approach to monitoring?
Monitoring with Graylog - a modern approach to monitoring?Monitoring with Graylog - a modern approach to monitoring?
Monitoring with Graylog - a modern approach to monitoring?
inovex GmbH
 

What's hot (20)

Apache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawaniApache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawani
 
Developing iOS REST Applications
Developing iOS REST ApplicationsDeveloping iOS REST Applications
Developing iOS REST Applications
 
Forgive me for i have allocated
Forgive me for i have allocatedForgive me for i have allocated
Forgive me for i have allocated
 
RxJava Applied
RxJava AppliedRxJava Applied
RxJava Applied
 
Reactive Programming in Java 8 with Rx-Java
Reactive Programming in Java 8 with Rx-JavaReactive Programming in Java 8 with Rx-Java
Reactive Programming in Java 8 with Rx-Java
 
An Overview of Node.js
An Overview of Node.jsAn Overview of Node.js
An Overview of Node.js
 
AWS Java SDK @ scale
AWS Java SDK @ scaleAWS Java SDK @ scale
AWS Java SDK @ scale
 
Adam Sitnik "State of the .NET Performance"
Adam Sitnik "State of the .NET Performance"Adam Sitnik "State of the .NET Performance"
Adam Sitnik "State of the .NET Performance"
 
Finatra v2
Finatra v2Finatra v2
Finatra v2
 
How NOT to write in Node.js
How NOT to write in Node.jsHow NOT to write in Node.js
How NOT to write in Node.js
 
OSMC 2012 | Neues in Nagios 4.0 by Andreas Ericsson
OSMC 2012 | Neues in Nagios 4.0 by Andreas EricssonOSMC 2012 | Neues in Nagios 4.0 by Andreas Ericsson
OSMC 2012 | Neues in Nagios 4.0 by Andreas Ericsson
 
RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]RxJava applied [JavaDay Kyiv 2016]
RxJava applied [JavaDay Kyiv 2016]
 
Understanding reactive programming with microsoft reactive extensions
Understanding reactive programming  with microsoft reactive extensionsUnderstanding reactive programming  with microsoft reactive extensions
Understanding reactive programming with microsoft reactive extensions
 
Distributed Eventing in OSGi - Carsten Ziegeler
Distributed Eventing in OSGi - Carsten ZiegelerDistributed Eventing in OSGi - Carsten Ziegeler
Distributed Eventing in OSGi - Carsten Ziegeler
 
Javascript Promises/Q Library
Javascript Promises/Q LibraryJavascript Promises/Q Library
Javascript Promises/Q Library
 
Logstash
LogstashLogstash
Logstash
 
Python in the database
Python in the databasePython in the database
Python in the database
 
OSGi Community Event 2010 - Dependencies, dependencies, dependencies
OSGi Community Event 2010 - Dependencies, dependencies, dependenciesOSGi Community Event 2010 - Dependencies, dependencies, dependencies
OSGi Community Event 2010 - Dependencies, dependencies, dependencies
 
"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)
"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)
"Ускорение сборки большого проекта на Objective-C + Swift" Иван Бондарь (Avito)
 
Monitoring with Graylog - a modern approach to monitoring?
Monitoring with Graylog - a modern approach to monitoring?Monitoring with Graylog - a modern approach to monitoring?
Monitoring with Graylog - a modern approach to monitoring?
 

Viewers also liked

Modules in angular 2.0 beta.1
Modules in angular 2.0 beta.1Modules in angular 2.0 beta.1
Modules in angular 2.0 beta.1
David Rodenas
 
Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&http
Dong Jun Kwon
 
Adventures with Angular 2
Adventures with Angular 2Adventures with Angular 2
Adventures with Angular 2
Dragos Ionita
 
Angular2
Angular2Angular2
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
Nir Kaufman
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
Nir Kaufman
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
Nir Kaufman
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
Fabio Biondi
 
RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015
Ben Lesh
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
Knoldus Inc.
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
FITC
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
Minko Gechev
 

Viewers also liked (12)

Modules in angular 2.0 beta.1
Modules in angular 2.0 beta.1Modules in angular 2.0 beta.1
Modules in angular 2.0 beta.1
 
Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&http
 
Adventures with Angular 2
Adventures with Angular 2Adventures with Angular 2
Adventures with Angular 2
 
Angular2
Angular2Angular2
Angular2
 
How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!How Angular2 Can Improve Your AngularJS Apps Today!
How Angular2 Can Improve Your AngularJS Apps Today!
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
 
Angular2 workshop
Angular2 workshopAngular2 workshop
Angular2 workshop
 
Angular 2 - Core Concepts
Angular 2 - Core ConceptsAngular 2 - Core Concepts
Angular 2 - Core Concepts
 
RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015RxJS and Reactive Programming - Modern Web UI - May 2015
RxJS and Reactive Programming - Modern Web UI - May 2015
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Getting Started with Angular 2
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
 
Building Universal Applications with Angular 2
Building Universal Applications with Angular 2Building Universal Applications with Angular 2
Building Universal Applications with Angular 2
 

Similar to Angular2 inter3

React inter3
React inter3React inter3
React inter3
Oswald Campesato
 
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & MobileIVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
Amazon Web Services Japan
 
ETL with SPARK - First Spark London meetup
ETL with SPARK - First Spark London meetupETL with SPARK - First Spark London meetup
ETL with SPARK - First Spark London meetup
Rafal Kwasny
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
Oswald Campesato
 
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
Loiane Groner
 
O365Con18 - Automate your Tasks through Azure Functions - Elio Struyf
O365Con18 - Automate your Tasks through Azure Functions - Elio StruyfO365Con18 - Automate your Tasks through Azure Functions - Elio Struyf
O365Con18 - Automate your Tasks through Azure Functions - Elio Struyf
NCCOMMS
 
Angular2
Angular2Angular2
Alfresco Development Framework Basic
Alfresco Development Framework BasicAlfresco Development Framework Basic
Alfresco Development Framework Basic
Mario Romano
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
Troy Miles
 
Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015
Pavel Chunyayev
 
The MEAN stack
The MEAN stack The MEAN stack
The MEAN stack
Nattaya Mairittha
 
Introducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.jsIntroducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.js
Richard Rodger
 
20120816 nodejsdublin
20120816 nodejsdublin20120816 nodejsdublin
20120816 nodejsdublin
Richard Rodger
 
Node azure
Node azureNode azure
Node azure
Emanuele DelBono
 
Running Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on HadoopRunning Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on Hadoop
clairvoyantllc
 
Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...
Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...
Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...
Amazon Web Services
 
[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions
European Collaboration Summit
 
Hadoop cluster performance profiler
Hadoop cluster performance profilerHadoop cluster performance profiler
Hadoop cluster performance profiler
Ihor Bobak
 
Relational Database Access with Python ‘sans’ ORM
Relational Database Access with Python ‘sans’ ORM  Relational Database Access with Python ‘sans’ ORM
Relational Database Access with Python ‘sans’ ORM
Mark Rees
 
Cloud Foundry Monitoring How-To: Collecting Metrics and Logs
Cloud Foundry Monitoring How-To: Collecting Metrics and LogsCloud Foundry Monitoring How-To: Collecting Metrics and Logs
Cloud Foundry Monitoring How-To: Collecting Metrics and Logs
Altoros
 

Similar to Angular2 inter3 (20)

React inter3
React inter3React inter3
React inter3
 
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & MobileIVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
IVS CTO Night And Day 2018 Winter - [re:Cap] Serverless & Mobile
 
ETL with SPARK - First Spark London meetup
ETL with SPARK - First Spark London meetupETL with SPARK - First Spark London meetup
ETL with SPARK - First Spark London meetup
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
 
O365Con18 - Automate your Tasks through Azure Functions - Elio Struyf
O365Con18 - Automate your Tasks through Azure Functions - Elio StruyfO365Con18 - Automate your Tasks through Azure Functions - Elio Struyf
O365Con18 - Automate your Tasks through Azure Functions - Elio Struyf
 
Angular2
Angular2Angular2
Angular2
 
Alfresco Development Framework Basic
Alfresco Development Framework BasicAlfresco Development Framework Basic
Alfresco Development Framework Basic
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015Ansible benelux meetup - Amsterdam 27-5-2015
Ansible benelux meetup - Amsterdam 27-5-2015
 
The MEAN stack
The MEAN stack The MEAN stack
The MEAN stack
 
Introducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.jsIntroducing the Seneca MVP framework for Node.js
Introducing the Seneca MVP framework for Node.js
 
20120816 nodejsdublin
20120816 nodejsdublin20120816 nodejsdublin
20120816 nodejsdublin
 
Node azure
Node azureNode azure
Node azure
 
Running Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on HadoopRunning Airflow Workflows as ETL Processes on Hadoop
Running Airflow Workflows as ETL Processes on Hadoop
 
Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...
Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...
Monitoring as Code: Getting to Monitoring-Driven Development - DEV314 - re:In...
 
[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions[Struyf] Automate Your Tasks With Azure Functions
[Struyf] Automate Your Tasks With Azure Functions
 
Hadoop cluster performance profiler
Hadoop cluster performance profilerHadoop cluster performance profiler
Hadoop cluster performance profiler
 
Relational Database Access with Python ‘sans’ ORM
Relational Database Access with Python ‘sans’ ORM  Relational Database Access with Python ‘sans’ ORM
Relational Database Access with Python ‘sans’ ORM
 
Cloud Foundry Monitoring How-To: Collecting Metrics and Logs
Cloud Foundry Monitoring How-To: Collecting Metrics and LogsCloud Foundry Monitoring How-To: Collecting Metrics and Logs
Cloud Foundry Monitoring How-To: Collecting Metrics and Logs
 

More from Oswald Campesato

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
Oswald Campesato
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
Oswald Campesato
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
Oswald Campesato
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
Oswald Campesato
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
Oswald Campesato
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
Oswald Campesato
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
Oswald Campesato
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
Oswald Campesato
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
Oswald Campesato
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
Oswald Campesato
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
Oswald Campesato
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
Oswald Campesato
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
Oswald Campesato
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
Oswald Campesato
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
Oswald Campesato
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
Oswald Campesato
 

More from Oswald Campesato (20)

Working with tf.data (TF 2)
Working with tf.data (TF 2)Working with tf.data (TF 2)
Working with tf.data (TF 2)
 
Introduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and KerasIntroduction to TensorFlow 2 and Keras
Introduction to TensorFlow 2 and Keras
 
Introduction to Deep Learning
Introduction to Deep LearningIntroduction to Deep Learning
Introduction to Deep Learning
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
Introduction to TensorFlow 2
Introduction to TensorFlow 2Introduction to TensorFlow 2
Introduction to TensorFlow 2
 
"An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning""An Introduction to AI and Deep Learning"
"An Introduction to AI and Deep Learning"
 
H2 o berkeleydltf
H2 o berkeleydltfH2 o berkeleydltf
H2 o berkeleydltf
 
Introduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and TensorflowIntroduction to Deep Learning, Keras, and Tensorflow
Introduction to Deep Learning, Keras, and Tensorflow
 
Introduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-ProgrammersIntroduction to Deep Learning for Non-Programmers
Introduction to Deep Learning for Non-Programmers
 
TensorFlow in Your Browser
TensorFlow in Your BrowserTensorFlow in Your Browser
TensorFlow in Your Browser
 
Deep Learning in Your Browser
Deep Learning in Your BrowserDeep Learning in Your Browser
Deep Learning in Your Browser
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlowIntroduction to Deep Learning and TensorFlow
Introduction to Deep Learning and TensorFlow
 
Intro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.jsIntro to Deep Learning, TensorFlow, and tensorflow.js
Intro to Deep Learning, TensorFlow, and tensorflow.js
 
Deep Learning and TensorFlow
Deep Learning and TensorFlowDeep Learning and TensorFlow
Deep Learning and TensorFlow
 
Introduction to Deep Learning and Tensorflow
Introduction to Deep Learning and TensorflowIntroduction to Deep Learning and Tensorflow
Introduction to Deep Learning and Tensorflow
 
Deep Learning, Scala, and Spark
Deep Learning, Scala, and SparkDeep Learning, Scala, and Spark
Deep Learning, Scala, and Spark
 
Deep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGLDeep Learning in your Browser: powered by WebGL
Deep Learning in your Browser: powered by WebGL
 
Deep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlowDeep Learning, Keras, and TensorFlow
Deep Learning, Keras, and TensorFlow
 
C++ and Deep Learning
C++ and Deep LearningC++ and Deep Learning
C++ and Deep Learning
 

Recently uploaded

The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Dr. Vinod Kumar Kanvaria
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
heathfieldcps1
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
Levi Shapiro
 
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat  Leveraging AI for Diversity, Equity, and InclusionExecutive Directors Chat  Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
TechSoup
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
Celine George
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
ArianaBusciglio
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Akanksha trivedi rama nursing college kanpur.
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
AyyanKhan40
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
amberjdewit93
 
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
IreneSebastianRueco1
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
Academy of Science of South Africa
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Excellence Foundation for South Sudan
 
How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
Celine George
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
Priyankaranawat4
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
Jean Carlos Nunes Paixão
 
writing about opinions about Australia the movie
writing about opinions about Australia the moviewriting about opinions about Australia the movie
writing about opinions about Australia the movie
Nicholas Montgomery
 

Recently uploaded (20)

The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
Exploiting Artificial Intelligence for Empowering Researchers and Faculty, In...
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
 
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...
 
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat  Leveraging AI for Diversity, Equity, and InclusionExecutive Directors Chat  Leveraging AI for Diversity, Equity, and Inclusion
Executive Directors Chat Leveraging AI for Diversity, Equity, and Inclusion
 
How to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRMHow to Manage Your Lost Opportunities in Odoo 17 CRM
How to Manage Your Lost Opportunities in Odoo 17 CRM
 
Group Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana BuscigliopptxGroup Presentation 2 Economics.Ariana Buscigliopptx
Group Presentation 2 Economics.Ariana Buscigliopptx
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
 
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
RPMS TEMPLATE FOR SCHOOL YEAR 2023-2024 FOR TEACHER 1 TO TEACHER 3
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
Your Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective UpskillingYour Skill Boost Masterclass: Strategies for Effective Upskilling
Your Skill Boost Masterclass: Strategies for Effective Upskilling
 
How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17How to Fix the Import Error in the Odoo 17
How to Fix the Import Error in the Odoo 17
 
clinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdfclinical examination of hip joint (1).pdf
clinical examination of hip joint (1).pdf
 
Lapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdfLapbook sobre os Regimes Totalitários.pdf
Lapbook sobre os Regimes Totalitários.pdf
 
writing about opinions about Australia the movie
writing about opinions about Australia the moviewriting about opinions about Australia the movie
writing about opinions about Australia the movie
 

Angular2 inter3

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