Ben Busse
benbusse@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 ...
The Evolution of Apps
Web Apps – Click, Get a Page
SQL
App Server
Web App
Browser
HTML
ClientServer
HTML Contains Everything
Graphics
Layout
Scripting
Text
Data
iPhone Ships in 2007
Mobile Era Begins
Thick Client Apps
SQL, NoSQL,
PaaS
REST Services
HTML5 / Native
Devices
JSON
ClientServer
From HTML to JSON
95% Size
Reduction
{
"employees": [
{"name":"John"},
{"name":"Anna"},
{"name":"Peter"}
]
}
CSS / Sass
AngularUI
Bootstrap
Foundation
Ionic
Javascript
Angular
Backbone
Ember
jQuery
Knockout
Sencha
Rapid Innovation ...
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
E...
It Didn’t Exist
State of the Art…
1) Build REST APIs By Hand
2) Build Security By Hand
3) Build User Management By Hand
Re...
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
NoSQ...
Free & Open Source
• Apache License
• Hosted
• Cloud
• On Premises
Unified REST API
Developer
Single interface
Security model
User permissions
DSP Files
NoSQL
SQL
REST + JSON
External
Integ...
Simple Development Paradigm
Service
Platform
Client Side
REST JSON
Less Code, More Consistency
Before
BackendTeamFronendTeam
Install
DSP
Design
UI
Build &
Test
App
Deliver
Configure
Server ...
Bitnami Installers
http://bitnami.com/stack/dreamfact
ory
Free Hosted DSP
www.dreamfactory.co
m
Anatomy of an Angular App
Module
Config
Routes
View
Directives
Controller
Factory
Service
Provider
Value
$scope
• Keep Dat...
Server Calls with Angular
$http – wraps XMLHttpRequest object
$resource – supports RESTful data model
Restangular – servic...
angular-dreamfactory
Open source Angular module
Dynamically generated when app loads
Integrates your app with DSP REST ser...
Nice Angular Examples
egghead.io
ng-newsletter.com
The AngularJS Magazine
AngularJS-Learning
Good Book
$scope
Two-way data binding
-----------------------------
Services
CORS
Authentication
Routing
Promises
Demo Time!
Demo Recap
angular-dreamfactory tutorial
http://blog.dreamfactory.com/tutorial-angular-
and-rest-made-simple
$resource tut...
New DSP Features
Server-side events and JS scripting
RAML support
Record CRUD security (by user and role)
LDAP / Active Di...
Resources
Tutorial
http://blog.dreamfactory.com/tutorial-angular-and-rest-made-simple
Trivia App code
https://github.com/d...
Thank You!
QUESTIONS
benbusse@dreamfactory.com
@benbusse
Upcoming SlideShare
Loading in...5
×

AngularJS and REST Made Simple

8,794

Published on

This presentation was given at the Mar 11, 2014 AngularJS meetup talk at Google. The talk covered the DreamFactory open source REST API platform, Angular's built-in services for making API calls, and a new open source Angular module called angular-dreamfactory for consuming REST APIs for SQL, NoSQL, BLOB storage, and remote web services.

Published in: Technology
1 Comment
21 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,794
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
211
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • Standards-based service palettePre-built and portableInstalls on any cloud or enterprise datacenter under open source Apache licenseEnables enterprises to quickly deploy secure mobile applications using their own infrastructureAbstracts back-end complexity so small teams of client developers can build mobile apps
  • AngularJS and REST Made Simple

    1. 1. Ben Busse benbusse@dreamfactory.com Angular + REST Made Simple
    2. 2. Agenda Why REST Services? Angular + REST angular-dreamfactory demo
    3. 3. 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
    4. 4. The Evolution of Apps
    5. 5. Web Apps – Click, Get a Page SQL App Server Web App Browser HTML ClientServer
    6. 6. HTML Contains Everything Graphics Layout Scripting Text Data
    7. 7. iPhone Ships in 2007 Mobile Era Begins
    8. 8. Thick Client Apps SQL, NoSQL, PaaS REST Services HTML5 / Native Devices JSON ClientServer
    9. 9. From HTML to JSON 95% Size Reduction { "employees": [ {"name":"John"}, {"name":"Anna"}, {"name":"Peter"} ] }
    10. 10. CSS / Sass AngularUI Bootstrap Foundation Ionic Javascript Angular Backbone Ember jQuery Knockout Sencha Rapid Innovation on the Client
    11. 11. But What About the Server? SQL, NoSQL, PaaS REST Services HTML5 / Native App Devices JSON ?
    12. 12. We Make Enterprise Apps Less Code Flexible Deployment Mobile Architecture Existing Data User Management Our Wish List…
    13. 13. We Wanted Less Code REST APIs Provided Flexible Deployment Open Source, Install Anywhere Mobile Architecture REST & JSON Existing Data SQL, NoSQL, BLOB, Remote User Management Roles, Auth, Access Control
    14. 14. It Didn’t Exist State of the Art… 1) Build REST APIs By Hand 2) Build Security By Hand 3) Build User Management By Hand Repeat for every new project
    15. 15. We Open Sourced DreamFactory Services Platform (DSP)
    16. 16. 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, OpenSta ck, Azure, Local DSP HTML5 & JS
    17. 17. Free & Open Source • Apache License • Hosted • Cloud • On Premises
    18. 18. Unified REST API Developer Single interface Security model User permissions DSP Files NoSQL SQL REST + JSON External Integration
    19. 19. Simple Development Paradigm Service Platform Client Side REST JSON
    20. 20. Less Code, More Consistency Before BackendTeamFronendTeam Install DSP Design UI Build & Test App Deliver Configure Server & Software Design REST APIs Build REST APIs Design UI Build & Test App Test REST APIs Deliver Now
    21. 21. Bitnami Installers http://bitnami.com/stack/dreamfact ory
    22. 22. Free Hosted DSP www.dreamfactory.co m
    23. 23. Anatomy of an Angular App Module 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
    24. 24. Server Calls with Angular $http – wraps XMLHttpRequest object $resource – supports RESTful data model Restangular – service to handle RESTful resources easily
    25. 25. angular-dreamfactory Open source Angular module Dynamically generated when app loads Integrates 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
    26. 26. Nice Angular Examples egghead.io ng-newsletter.com The AngularJS Magazine AngularJS-Learning
    27. 27. Good Book $scope Two-way data binding ----------------------------- Services CORS Authentication Routing Promises
    28. 28. Demo Time!
    29. 29. Demo Recap angular-dreamfactory tutorial http://blog.dreamfactory.com/tutorial-angular- and-rest-made-simple $resource tutorial http://www.dreamfactory.com/angularjs-example
    30. 30. New DSP Features Server-side events and JS scripting RAML support Record CRUD security (by user and role) LDAP / Active Directory / SAML Multi-tenant VM
    31. 31. Resources Tutorial http://blog.dreamfactory.com/tutorial-angular-and-rest-made-simple Trivia App code https://github.com/dreamfactorysoftware/trivia_app angular-dreamfactory library https://github.com/dreamfactorysoftware/angular-dreamfactory Cordova mobile app https://github.com/dreamfactorysoftware/mobile-dreamfactory-app Developer resources http://www.dreamfactory.com/developers Cloud Academy quizzes https://cloudacademy.com/dreamfactory
    32. 32. Thank You! QUESTIONS benbusse@dreamfactory.com @benbusse

    ×