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.

1. Ben Busse
benbusse@dreamfactory.com
Angular + REST Made
Simple

2. Agenda
Why REST Services?
Angular + REST
angular-dreamfactory demo

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. The Evolution of Apps

5. Web Apps – Click, Get a Page
SQL
App Server
Web App
Browser
HTML
ClientServer

6. HTML Contains Everything
Graphics
Layout
Scripting
Text
Data

7. iPhone Ships in 2007
Mobile Era Begins

8. Thick Client Apps
SQL, NoSQL,
PaaS
REST Services
HTML5 / Native
Devices
JSON
ClientServer

9. From HTML to JSON
95% Size
Reduction
{
"employees": [
{"name":"John"},
{"name":"Anna"},
{"name":"Peter"}
]
}

10. CSS / Sass
AngularUI
Bootstrap
Foundation
Ionic
Javascript
Angular
Backbone
Ember
jQuery
Knockout
Sencha
Rapid Innovation on the Client

11. But What About the Server?
SQL, NoSQL,
PaaS
REST Services
HTML5 / Native App
Devices
JSON
?

12. We Make Enterprise Apps
Less Code
Flexible Deployment
Mobile Architecture
Existing Data
User Management
Our Wish List…

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. 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. We Open Sourced
DreamFactory Services Platform
(DSP)

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. Free & Open Source
• Apache License
• Hosted
• Cloud
• On Premises

18. Unified REST API
Developer
Single interface
Security model
User permissions
DSP Files
NoSQL
SQL
REST + JSON
External
Integration

19. Simple Development Paradigm
Service
Platform
Client Side
REST JSON

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. Bitnami Installers
http://bitnami.com/stack/dreamfact
ory

22. Free Hosted DSP
www.dreamfactory.co
m

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. Server Calls with Angular
$http – wraps XMLHttpRequest object
$resource – supports RESTful data model
Restangular – service to handle RESTful
resources easily

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. Nice Angular Examples
egghead.io
ng-newsletter.com
The AngularJS Magazine
AngularJS-Learning

27. Good Book
$scope
Two-way data binding
-----------------------------
Services
CORS
Authentication
Routing
Promises

28. Demo Time!

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. 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. 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. Thank You!
QUESTIONS
benbusse@dreamfactory.com
@benbusse