Post on 09-May-2015
description
Ben Bussebenbusse@dreamfactory.com
Angular + REST Made Simple
Agenda
Why REST Services?
Angular + REST
angular-dreamfactory demo
Your Correspondent
Technology evangelist at dreamfactory
We use Angular a lot (web and mobile)
Engineering manager mobile gaming
Product manager enterprise SaaS
Decade working with REST services
K. Chiu
The Evolution of Apps
Web Apps – Click, Get a Page
SQL
App Server
Web App
Browser
HTML
Clien
t
S
erv
er
HTML Contains Everything
GraphicsLayout
ScriptingTextData
iPhone Ships in 2007
Mobile Era Begins
Thick Client Apps
SQL, NoSQL,PaaS
REST Services
HTML5 / Native
Devices
JSON
Clien
t
S
erv
er
From HTML to JSON
95% SizeReduction
{"employees": [
{"name":"John"},
{"name":"Anna"},
{"name":"Peter"}]
}
CSS / Sass
AngularUIBootstrap
FoundationIonic
Javascript
AngularBackbone
EmberjQuery
KnockoutSencha
Rapid Innovation on the Client
But What About the Server?
SQL, NoSQL,PaaS
REST Services
HTML5 / Native App
Devices
JSON
?
We Make Enterprise Apps
Less Code
Flexible Deployment
Mobile Architecture
Existing Data
User Management
Our Wish List…
We Wanted
Less Code REST APIs Provided
Flexible Deployment
Open Source, Install Anywhere
Mobile Architecture
REST & JSON
Existing DataSQL, NoSQL, BLOB, Remote
User Management
Roles, Auth, Access Control
It Didn’t Exist
State of the Art…
1) Build REST APIs By Hand 2) Build Security By Hand3) Build User Management By Hand
Repeat for every new project
We Open Sourced
DreamFactory Services Platform (DSP)
Native Mobile
SQL
MySQL, Postgres, SQL Server, Oracle, DB2
Automatically Provides REST
API
Hook Up Any Backend System
NoSQL
MongoDB, CouchDB,DynamoDB, Azure
Tables
Files
S3, Rackspace, OpenStack,Azure, Local
DSP
HTML5 & JS
Free & Open Source
• Apache License• Hosted • Cloud• On Premises
Unified REST API
Developer
Single interface Security modelUser permissions
DSP Files
NoSQL
SQL
REST + JSON
External Integration
Simple Development Paradigm
Service Platform
Client SideRES
TJSON
Less Code, More Consistency
Before
Back
end
Team
Fron
en
d T
eam
InstallDSP
DesignUI
Build & TestApp
Deliver
ConfigureServer &Software
DesignREST APIs
BuildREST APIs
DesignUI
Build & Test App
Test RESTAPIs
Deliver
Now
Bitnami Installers
http://bitnami.com/stack/dreamfactory
Anatomy of an Angular AppModule
Config
Routes
View
Directives
Controller
Factory
Service
Provider
Value
$scope
• Keep Data for Lifetime of App (Singleton)
• Created as Needed (Lazy Loaded)• Share Data Across Controllers• Built-In Services / Write Your Own
Server Calls with Angular
$http – wraps XMLHttpRequest object$resource – supports RESTful data model
Restangular – service to handle RESTful resources easily
angular-dreamfactory
Open source Angular module Dynamically generated when app loadsIntegrates your app with DSP REST services
Built on $http service (no $scope.apply required) Add a REST service to DSP and instantly available
DreamFactory.api.service.method
Nice Angular Examples
egghead.io
ng-newsletter.com
The AngularJS Magazine
AngularJS-Learning
Good Book
$scopeTwo-way data binding-----------------------------ServicesCORSAuthenticationRoutingPromises
Demo Time!
Demo Recap
angular-dreamfactory tutorialhttp://blog.dreamfactory.com/tutorial-angular-and-rest-made-simple $resource tutorialhttp://www.dreamfactory.com/angularjs-example
New DSP Features
Server-side events and JS scriptingRAML support Record CRUD security (by user and role)
LDAP / Active Directory / SAMLMulti-tenant VM
Resources
Tutorialhttp://blog.dreamfactory.com/tutorial-angular-and-rest-made-simple
Trivia App codehttps://github.com/dreamfactorysoftware/trivia_app
angular-dreamfactory library https://github.com/dreamfactorysoftware/angular-dreamfactory
Cordova mobile apphttps://github.com/dreamfactorysoftware/mobile-dreamfactory-app
Developer resourceshttp://www.dreamfactory.com/developers
Cloud Academy quizzeshttps://cloudacademy.com/dreamfactory
Thank You!
QUESTIONS
benbusse@dreamfactory.com @benbusse