0

I'm trying to use angular with sockjs-client and cyclone, a component made by bendrucker exists: https://github.com/bendrucker/angular-sockjs. Newbie to all this technologies i'm stuck getting an injection problem when i tried to use the component from bendrucker. I have check and the component is included as dependency in the main module of the angular app. I'm using angular 1.2.19, angular-route 1.2.19 The error trace is:

Error: [$injector:unpr] http://errors.angularjs.org/1.2.19/$injector/unpr?p0=%24socketsProvider%20%3C-%20%24sockets
v/<@http://localhost:8888/vendor/angular.min.js:6
dc/l.$injector<@http://localhost:8888/vendor/angular.min.js:36
c@http://localhost:8888/vendor/angular.min.js:34
dc/n.$injector<@http://localhost:8888/vendor/angular.min.js:36
c@http://localhost:8888/vendor/angular.min.js:34
d@http://localhost:8888/vendor/angular.min.js:35
dc/g/<.instantiate@http://localhost:8888/vendor/angular.min.js:35
Pd/this.$get</<@http://localhost:8888/vendor/angular.min.js:67
z/<.link@http://localhost:8888/vendor/angular-route.min.js:7
K@http://localhost:8888/vendor/angular.min.js:54
f@http://localhost:8888/vendor/angular.min.js:47
fc/this.$get</z/<@http://localhost:8888/vendor/angular.min.js:46

this is the structure of my project:

app/
 client/
    scripts/
        controllers/
             main.js
        app.js
    vendor/
        sockjs-client/
           sockjs-0.3.min.js
        angular.min.js
        angular-route.min.js
        json3.js
        socket.js //this is the component from bendrucker
    views/
    ...
    index.html
 server/
    server.py

here the index.html

<!doctype html>
<html class="no-js">
  <head>
     <meta charset="utf-8">
     <title>Kertin 4 WEB </title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="styles/bootstrap.min.css">
     <link rel="stylesheet" href="styles/main.css">
  </head>
  <body ng-app="KertinWeb">
    <div class="header">
       <ul class="nav nav-pills pull-right">
         <li class="active"><a href="#index">Home</a></li>
         <li><a href="#contactenos">About</a></li>
         <li><a href="#buscador">Contact</a></li>
       </ul>
       <h3 class="text-muted">KERTIN 4 WEB</h3>
    </div>
    <div ng-view></div>
    <script src="vendor/angular.min.js"></script>
    <script src="vendor/angular-route.min.js"></script>
    <script src="vendor/sockjs-client/sockjs-0.3.min.js"></script>
    <script src="vendor/socket.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
  </body>
</html>

scripts/app.js:

function KertinRouteConfig($routeProvider) {
    $routeProvider.
        when('/index', {
            controller: ReceptorController,
            templateUrl: '../views/receptor.html'
        }).

        when('/contactenos', {
            controller: ContactenosController,
            templateUrl: '../views/contactos.html'
        }).
        when('/buscador', {
            controller: BuscadorController,
            templateUrl: '../views/buscador.html'
        }).
        otherwise({
            redirectTo: '/index'

        });
}

var kertinServices = angular.module('KertinWeb', ['ngRoute','bd.sockjs']);

kertinServices.config(KertinRouteConfig);

kertinServices.factory('sockets', function(socketFactory){
    return socketFactory;
});

scripts/controllers/main.js:

function ReceptorController($scope, $sockets){ //this is the one with the problem
    $sockets.open("http://ip_address:8888/query");
    $sockets.setHandler('message', function(msg){
        $scope.state = msg;
    })
}
function ContactenosController($scope){

}
function BuscadorController($scope){

}

The router mechanism works and all the views are almost empty for now. Is loading the index when i get the error. The server i'm using just in case:

import sys
import os
import time

import sockjs.cyclone

from cyclone.web import RequestHandler, Application, StaticFileHandler

from twisted.internet.task import LoopingCall
from twisted.internet import reactor
from twisted.python import log

settings = {
    "static_path": os.path.join(os.path.dirname(os.path.dirname(__file__)), "client")
}



class IndexHandler(RequestHandler):
    """ Serve the chat html page """
    def get(self):
        self.render('../client/index.html')


class QueryConnection(sockjs.cyclone.SockJSConnection):

    participants = set()

    def __init__(self, session):
        sockjs.cyclone.SockJSConnection.__init__(self, session)
        lc = LoopingCall(self.newMessage)
        lc.start(1)

    def newMessage(self):
        self.broadcast(self.participants, str(time.time()))

    def connectionMade(self, info):
        self.broadcast(self.participants, "Someone joined.")
        self.participants.add(self)

    def messageReceived(self, message):
        self.broadcast(self.participants, message)

    def connectionLost(self):
        self.participants.remove(self)
        self.broadcast(self.participants, "Someone left.")

if __name__ == "__main__":
    def main():

        QueryRouter = sockjs.cyclone.SockJSRouter(QueryConnection, '/query')

        app = Application([
                        (r"/", IndexHandler),
                        (r"/(.*)", StaticFileHandler, dict(path=settings['static_path'])),
        ] + QueryRouter.urls, **settings)
        reactor.listenTCP(8888, app)
        reactor.run()

    log.startLogging(sys.stdout)
    main()
Alejandro
  • 51
  • 6

1 Answers1

0

Turns out the problem was that only the core services on angular should be prefixed by '$', custom modules should not have the '$' so the correct way on controllers.js is:

function ReceptorController($scope, sockets){
    var conn = sockets({'url':'http://ip_address:8888/query'});
    conn.setHandler('message', function(msg){
        $scope.state = msg;
    })
}
function ContactenosController($scope){

}
function BuscadorController($scope){

}

more: http://henriquat.re/basics-of-angular/services-dependency-injection/services-and-dependency-injection-in-angularjs.html

Alejandro
  • 51
  • 6