domadev812 · November 15, 2017 21:06
diff --git a/1.html b/1.html
 <!doctype html>
 <html>
    <head>
        <script src="<location-of-PubNub-SDK>/pubnub-angular-4.0.2.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://pubnub.github.io/angular-js/scripts/pubnub-angular.js"></script>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    </head>
 <body>
diff --git a/10.js b/10.js
 // Register for presence events (optional)
 $rootScope.$on(Pubnub.getPresenceEventNameFor($scope.selectedChannel), function (ngEvent, pnEvent) {
    // apply presence event (join|leave) on users list
    handlePresenceEvent(pnEvent);
 });

 // Pre-Populate the user list (optional)
 PubNub.hereNow(
    {
        channels: [$scope.channel]
    },
    function (status, response) {
        // handle status, response
    }
 );

diff --git a/11.html b/11.html
 });
 </script>
 </body>
 </html>
diff --git a/12.js b/12.js
 // we must call angular "bootstrap" since we're running two separate
 // angular apps for normal/encrypted views
 angular.bootstrap($('#unencrypted'),['PubNubAngularUnencryptedApp']);
diff --git a/2.html b/2.html
 <div class="container" ng-app="PubNubAngularApp" ng-controller="EncryptedChatCtrl">
diff --git a/3.html b/3.html
 <h4>Online Users</h4>
 <ul>
  <li ng-repeat="user in users">{{user}}</li>
 </ul>
diff --git a/4.html b/4.html
 <h4>Chat History {{messages.length}}</h4>
diff --git a/5.html b/5.html
 <form ng-submit='publish()'>
  <input type="text" ng-model='newMessage' />
  <input type="submit" value="Send" />
 </form>
diff --git a/6.html b/6.html
 <div class="well">
 <ul>
   <li ng-repeat="message in messages">{{message}}</li>
 </ul>
 </div>
diff --git a/7.js b/7.js
 angular.module('PubNubAngularApp', ["pubnub.angular.service"])
 .controller('ChatCtrl', function($rootScope, $scope, $location, PubNub) {
  // 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 ENCRYPTED Channel';
  // pre-populate any existing messages (just an AngularJS scope object)
  $scope.messages = ['Welcome to ' + $scope.channel];
diff --git a/8.js b/8.js
 if (!$rootScope.initialized) {
  // Initialize the PubNub service
  Pubnub.init({
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    ssl: true
 })
  
  $rootScope.initialized = true;
 }
diff --git a/9.js b/9.js
  // Subscribe to the Channel
  PubNub.ngSubscribe({ channel: $scope.channel });
  PubNub.subscribe({channel: $scope.channel})

  // Create a publish() function in the scope
  $scope.publish = function() {
       
    PubNub.publish(
    {
        channel: $scope.channel,
        message: "[" + $scope.userId + "] " + $scope.newMessage
    }, 
     function(status, response){
            console.log(response);
        }
    );
    $scope.newMessage = '';
  };

  // Register for message events
 $rootScope.$on(Pubnub.getMessageEventNameFor($scope.channel), function (ngEvent, payload) {
      scope.$apply(function () {
          // add message to the messages list
          $scope.chatMessages.unshift(payload.message);
      });
  });
	<!doctype html>
	<html>
	<head>
	<script src="<location-of-PubNub-SDK>/pubnub-angular-4.0.2.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
	<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://pubnub.github.io/angular-js/scripts/pubnub-angular.js"></script>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
	</head>
	<body>
	// Register for presence events (optional)
	$rootScope.$on(Pubnub.getPresenceEventNameFor($scope.selectedChannel), function (ngEvent, pnEvent) {
	// apply presence event (join\|leave) on users list
	handlePresenceEvent(pnEvent);
	});

	// Pre-Populate the user list (optional)
	PubNub.hereNow(
	{
	channels: [$scope.channel]
	},
	function (status, response) {
	// handle status, response
	}
	);
	// we must call angular "bootstrap" since we're running two separate
	// angular apps for normal/encrypted views
	angular.bootstrap($('#unencrypted'),['PubNubAngularUnencryptedApp']);
	<h4>Online Users</h4>
	<ul>
	<li ng-repeat="user in users">{{user}}</li>
	</ul>
	<form ng-submit='publish()'>
	<input type="text" ng-model='newMessage' />
	<input type="submit" value="Send" />
	</form>
	<div class="well">
	<ul>
	<li ng-repeat="message in messages">{{message}}</li>
	</ul>
	</div>
	angular.module('PubNubAngularApp', ["pubnub.angular.service"])
	.controller('ChatCtrl', function($rootScope, $scope, $location, PubNub) {
	// 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 ENCRYPTED Channel';
	// pre-populate any existing messages (just an AngularJS scope object)
	$scope.messages = ['Welcome to ' + $scope.channel];
	if (!$rootScope.initialized) {
	// Initialize the PubNub service
	Pubnub.init({
	subscribeKey: "mySubscribeKey",
	publishKey: "myPublishKey",
	ssl: true
	})

	$rootScope.initialized = true;
	}
	// Subscribe to the Channel
	PubNub.ngSubscribe({ channel: $scope.channel });
	PubNub.subscribe({channel: $scope.channel})

	// Create a publish() function in the scope
	$scope.publish = function() {

	PubNub.publish(
	{
	channel: $scope.channel,
	message: "[" + $scope.userId + "] " + $scope.newMessage
	},
	function(status, response){
	console.log(response);
	}
	);
	$scope.newMessage = '';
	};

	// Register for message events
	$rootScope.$on(Pubnub.getMessageEventNameFor($scope.channel), function (ngEvent, payload) {
	scope.$apply(function () {
	// add message to the messages list
	$scope.chatMessages.unshift(payload.message);
	});
	});