stephenlb/1.html

## 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>

## 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
    }
);


## 11.html
});
</script>
</body>
</html>

## 12.js
// we must call angular "bootstrap" since we're running two separate
// angular apps for normal/encrypted views
angular.bootstrap($('#unencrypted'),['PubNubAngularUnencryptedApp']);

## 2.html
<div class="container" ng-app="PubNubAngularApp" ng-controller="EncryptedChatCtrl">

## 3.html
<h4>Online Users</h4>
<ul>
  <li ng-repeat="user in users">{{user}}</li>
</ul>

## 4.html
<h4>Chat History {{messages.length}}</h4>

## 5.html
<form ng-submit='publish()'>
  <input type="text" ng-model='newMessage' />
  <input type="submit" value="Send" />
</form>

## 6.html
<div class="well">
<ul>
   <li ng-repeat="message in messages">{{message}}</li>
</ul>
</div>

## 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];

## 8.js
if (!$rootScope.initialized) {
  // Initialize the PubNub service
  Pubnub.init({
    subscribeKey: "mySubscribeKey",
    publishKey: "myPublishKey",
    ssl: true
})

  $rootScope.initialized = true;
}

## 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);
	});
	});