Zero to Real-Time
 AngularJS in
 60 Seconds Sunny Gleason Boston AngularJS Meetup September 3, 2014 http://goo.gl/KDa5j3 

var self = this; • Sunny Gleason, All-Stack Engineer • Previous: Amazon (web services), Ning, Startup(1..N) • Current: SunnyCloud • Short Story: A-Team you can call on to help you build (or rescue) cloud services, web & mobile applications • Longer Story: Network of developers aiming to change the way businesses build applications 

take these… Codepen (single) http://goo.gl/rPwPcv Codepen (sectional) http://goo.gl/z8Sof5 Blog Entry http://goo.gl/rGOXGm PubNub Trial http://goo.gl/oJnTpv 

hello codepen (this is the 60 seconds part) 

why is real-time important? 

why is real-time important? 

applications should must be 
 customer-focused 
 responsive Ǎ 
 live updating 

our demo application real-time chat user presence  message history
 
 … in 99 lines of HTML/JS 

what does it do? 
 į subscribe to a real-time channel display a list of online users show the list of recent messages publish messages to the channel 

what does it do? 

the html (1) ! <script src=“//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" />! <script src=“http://pubnub.github.io/pubnub-angular/lib/pubnub-angular.js" />! <link rel="stylesheet"
 href=“//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" /> • include PubNub data stream network • include AngularJS library • include PubNub / AngularJS library • include Bootstrap styles (optional) 

the html (2) • Configure Application • Bind the Controller 

the html (3)

Online Users

!

!
• {{user}}
!

• Display a dynamic list of users 

the html (4) ! ! ! • Create a form • Bind a text input as chat message input • Bind form submission to ‘publish()’ 

the html (5) • Display a dynamic list of messages 

the js (1) angular.module('PubNubAngularApp', ["pubnub.angular.service"])! .controller('ChatCtrl', function($rootScope, $scope, PubNub) { • Create an AngularJS application • Depend on pubnub.angular.service • Create a controller • Inject $rootScope, $scope, PubNub 

the js (2) // make up a user id (you probably already have this)! $scope.userId = "User " + Math.round(Math.random() * 1000);! // make up a channel name! $scope.channel = 'The Angular Channel';! // pre-populate any existing messages (just an AngularJS scope object)! $scope.messages = ['Welcome to ' + $scope.channel]; • Create a random user id • Put the channel name in $scope • Initialize messages array 

the js (3) if (!$rootScope.initialized) {! // Initialize the PubNub service! PubNub.init({! subscribe_key: 'demo',! publish_key: 'demo',! uuid:$scope.userId! });! $rootScope.initialized = true;! } • Initialize the PubNub service • Use $rootScope for persistence
 across controllers 

the js (4) // Subscribe to the Channel! PubNub.ngSubscribe({ channel: $scope.channel }); • Subscribe to “The Angular Channel”
 channel • Enable AngularJS $broadcast events
 in the background for messages and
 presence events 

the js (5) // Create a publish() function in the scope! $scope.publish = function() {! PubNub.ngPublish({! channel: $scope.channel,! message: "[" + $scope.userId + "] " + $scope.newMessage! });! $scope.newMessage = '';! }; • Create a “publish()” function: • Call the PubNub ngPublish() method • Reset the ‘newMessage’ model 

the js (6) // Register for message events! $rootScope.$on(PubNub.ngMsgEv($scope.channel), function(ngEvent, payload) {! $scope.$apply(function() {! $scope.messages.push(payload.message);! });! }); • Register a callback for message events • Push the message into the messages list • Call within $scope.$apply so AngularJS knows about the change 

the js (7) // Register for presence events (optional)! $rootScope.$on(PubNub.ngPrsEv($scope.channel),
 function(ngEvent, payload) {! $scope.$apply(function() {! $scope.users = PubNub.ngListPresence($scope.channel);! });! }); • Register a callback for presence events • Get the list of users from the PubNub service • Update the users list in $scope • Call within $scope.$apply so AngularJS knows about the change 

the js (8) // Pre-Populate the user list (optional)! PubNub.ngHereNow({! channel: $scope.channel! });! ! // Populate message history (optional)! PubNub.ngHistory({! channel: $scope.channel,! count: 500! }); • Call the ngHereNow() function to trigger an initial presence event • Call the ngHistory() function to trigger historical message events 

… and you’re done! questions? thank you! 

interesting tidbits service vs. directive $rootScope vs. $scope events vs. callbacks wrap vs. raw internal bookkeeping promises vs. callbacks or return values