Download - AngularJS and REST Made Simple
![Page 2: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/2.jpg)
Agenda
Why REST Services?
Angular + REST
angular-dreamfactory demo
![Page 3: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/3.jpg)
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
![Page 4: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/4.jpg)
The Evolution of Apps
![Page 5: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/5.jpg)
Web Apps – Click, Get a Page
SQL
App Server
Web App
Browser
HTML
Clien
t
S
erv
er
![Page 6: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/6.jpg)
HTML Contains Everything
GraphicsLayout
ScriptingTextData
![Page 7: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/7.jpg)
iPhone Ships in 2007
Mobile Era Begins
![Page 8: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/8.jpg)
Thick Client Apps
SQL, NoSQL,PaaS
REST Services
HTML5 / Native
Devices
JSON
Clien
t
S
erv
er
![Page 9: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/9.jpg)
From HTML to JSON
95% SizeReduction
{"employees": [
{"name":"John"},
{"name":"Anna"},
{"name":"Peter"}]
}
![Page 10: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/10.jpg)
CSS / Sass
AngularUIBootstrap
FoundationIonic
Javascript
AngularBackbone
EmberjQuery
KnockoutSencha
Rapid Innovation on the Client
![Page 11: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/11.jpg)
But What About the Server?
SQL, NoSQL,PaaS
REST Services
HTML5 / Native App
Devices
JSON
?
![Page 12: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/12.jpg)
We Make Enterprise Apps
Less Code
Flexible Deployment
Mobile Architecture
Existing Data
User Management
Our Wish List…
![Page 13: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/13.jpg)
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
![Page 14: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/14.jpg)
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
![Page 15: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/15.jpg)
We Open Sourced
DreamFactory Services Platform (DSP)
![Page 16: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/16.jpg)
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
![Page 17: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/17.jpg)
Free & Open Source
• Apache License• Hosted • Cloud• On Premises
![Page 18: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/18.jpg)
Unified REST API
Developer
Single interface Security modelUser permissions
DSP Files
NoSQL
SQL
REST + JSON
External Integration
![Page 19: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/19.jpg)
Simple Development Paradigm
Service Platform
Client SideRES
TJSON
![Page 20: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/20.jpg)
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
![Page 21: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/21.jpg)
Bitnami Installers
http://bitnami.com/stack/dreamfactory
![Page 23: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/23.jpg)
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
![Page 24: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/24.jpg)
Server Calls with Angular
$http – wraps XMLHttpRequest object$resource – supports RESTful data model
Restangular – service to handle RESTful resources easily
![Page 25: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/25.jpg)
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
![Page 26: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/26.jpg)
Nice Angular Examples
egghead.io
ng-newsletter.com
The AngularJS Magazine
AngularJS-Learning
![Page 27: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/27.jpg)
Good Book
$scopeTwo-way data binding-----------------------------ServicesCORSAuthenticationRoutingPromises
![Page 28: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/28.jpg)
Demo Time!
![Page 29: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/29.jpg)
Demo Recap
angular-dreamfactory tutorialhttp://blog.dreamfactory.com/tutorial-angular-and-rest-made-simple $resource tutorialhttp://www.dreamfactory.com/angularjs-example
![Page 30: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/30.jpg)
New DSP Features
Server-side events and JS scriptingRAML support Record CRUD security (by user and role)
LDAP / Active Directory / SAMLMulti-tenant VM
![Page 31: AngularJS and REST Made Simple](https://reader036.vdocuments.site/reader036/viewer/2022062303/554d1e8bb4c905ca208b4983/html5/thumbnails/31.jpg)
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