Learn how to build apps using Angular JS with Firebase(backend-as-a-service)!! Room 6 (2nd Floor Conference Room) In this presentation, we'll be using Angular JS and Firebase to create a simple web application from scratch and explore the awesome real-time syncing features provided by firebase. Combining Bootstrap, Angular JS with Firebase and Azure, we can build and deploy cross-platform HTML5 apps.

1. Using Angular.js and Firebase to
build Apps
-Avinash Kondagunta
Principal Architect, Trifecta Solutions

2. Thank Our Sponsors without whom Today is
not Possible
Platinum
Bronze
Silver

3. Housekeeping…
• Thanks to our host
• Respect your speakers and fellow attendees:
Set mobile devices to vibrate or silent
• Fill out session evaluations
– They are used in the drawings
• You must be present to win at the wrap-up

4. Avinash Kondagunta
Principal Architect, Trifecta Solutions LLC
- 10 Years of IT Consulting experience serving large organizations
- 5+ years of experience working on SP2007, SP2010 & SP2013
- Microsoft Certified SharePoint Consultant(MCTS & MCPD in SP2010)
- Worked on 4+ separate SharePoint implementations in various roles
- Built enterprise applications using JavaScript frameworks on the SharePoint platform

5. THE FOLLWING PRESENTATION HAS BEEN APPROVED FOR ALL
AUDIENCES.
Rated: E(for everyone!)

7. Firebase Primer
• What is Firebase?
– An API to store and sync data in real-time
– Easy to setup real-time persistence
– Configurable security and access control rules
– User authentication using Facebook, Twitter, Github, Google and
custom tokens

8. Firebase Dashboard - 1Datastore
Hosting Developer access control

9. Firebase Dashboard - 2Datastore
Simulate read/write operations
Security & Rules
App analytics
Configure and manage login
Firebase Hosting
Secrets for custom JWT
authentication

10. Firebase
Architectural considerations:
• Can be used in conjunction
with Cloud providers(Azure,
AWS, GAE, etc)
• Build a simple 2-tier
architecture
• Client/Server share firebase
• Firebase handles real-time
data, server handles the rest

11. Angular JS
• Two-way data binding
• Dependency injection
• Event architecture
• Reusable components
• End-to-end integration
testing/Unit testing
• Routing & Templating
What is Angular.js?
Client side JavaScript framework for building web applications
Key concepts
Directive, Views, Modules, Controllers, $scope, Services

12. Directives
What are directives?
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS
class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or
even transform the DOM element and its children.
Types of directives:
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
Relevant directives:
• Ng-app
• Ng-model
• Ng-controller
• Ng-click

13. Modules
What are modules?
You can think of a module as a container for the different parts of your app – controllers, services, filters,
directives, etc.
Why use modules?
• declaratively specify how an application should be bootstrapped
• package code as reusable modules
• modules can be loaded in any order (or even in parallel) because modules delay execution
Relevant modules:
• Firebase

14. $scope
What is $scope?
• an object that ties a view (a DOM element) to the controller.
• $scope object becomes the model. It provides an execution context that is bound to the DOM element
Although it sounds complex, the $scope is just a JavaScript object. Both the controller and the view have
access to the $scope so it can be used for communication between the two. This $scope object will house both
the data and the functions that we’ll want to run in the view, as we’ll see.
References:
https://github.com/angular/angular.js/wiki/Understanding-Scopes

15. Controllers
What are controllers?
In Angular, a Controller is a JavaScript constructor function that is used to augment the AngularScope. When a
Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller
object, using the specified Controller's constructor function. A new child scope will be available as an injectable
parameter to the Controller's constructor function as $scope.
Purpose of controllers:
• Set up the initial state of the $scope object
• Add behavior to the $scope object
Relevant controllers:
• DemoCtrl

16. Services
What are services?
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use
services to organize and share code across your app.
Angular services are:
• Lazily instantiated – Angular only instantiates a service when an application component depends on it.
• Singletons – Each component dependent on a service gets a reference to the single instance generated by
the service factory.
Angular offers several useful services (like $http), but for most applications you'll also want to create your own.
Relevant services:
• $firebase

17. Using Angular JS with Firebase
• Commoditized backend(data store with real-
time syncing, authentication, security rules for
data access control, geofire etc) with hosting
• 3-way data binding enabling real-time data
syncing
• Allows for quick prototyping of applications

18. Demo!
• Demo a simple to-do list using angular and
firebase(CodePen)
– Create a new firebase app using the account
– Use codepen to write/test the code for the app
– Deploy the code on firebase hosting
– Discuss authentication, data storage & data access
security rules features of firebase
– Discuss architectural considerations using firebase
• Demo of InCloudTrn app

19. That’s all, folks!
• Resources:
– https://chrome.google.com/webstore/detail/vulcan-by-
firebase/oippbnlmebalopjbkemajgfbglcjhnbl?utm_source=chrome-ntp-icon
– https://www.firebase.com/blog/2013-09-25-location-queries-geofire.html
– https://www.firebase.com/docs/data-structure.html