Jack Chan Jack Chan - 1 year ago 96
AngularJS Question

'pusher-angular' not works in ionic application

I am developing pusher application by using ionic framework and pusher realtime technologies. 'pusher-angular' dependency injection in app.js is not work in ionic application when I run it in android application. Any suggestion how to solved it? I want to enable $pusher dependency injection in controller so that I can use Pusher realtime API in my application. Any suggestion?


<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="//js.pusher.com/3.2/pusher.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<body ng-app="starter" >


angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','ngCordova'])

.run(function($ionicPlatform, $cordovaSQLite) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {

if (window.StatusBar) {

db = window.openDatabase("chatChannel.db", "1", "Demo SQLite Test", "2000");
$cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS chat_channel(id interger primary key, chat_room text, last_text text, username text, chat_channel text unique)")


.controller('ChatRoomCtrl', ['$scope', '$state', '$rootScope', '$ionicScrollDelegate',
function($scope, $state, $rootScope,$ionicScrollDelegate){

var client = new Pusher('ed05a79be9c11b452872', {
cluster: 'ap1',
encrypted: true
var my_channel = client.subscribe(subscribeChannel);
my_channel.bind('chat_message', function(data) {


Answer Source

The first issue I see is with the index.html.

<script src="//js.pusher.com/3.2/pusher.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>

This lines wont work in Android application but will work in browser. It is because android files are loaded from file:// so it will try to load file://js.pusher.com/3.2/pusher.min.js for example.

You will need to precise the protocol like this :

<script src="https://js.pusher.com/3.2/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"></script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download