angular and socket.io - wrong code structure

Question

I'm quite new with Node/Angular/.. and tried this simple script. But it doesn't work, whats wrong with it?

I always get Error: [ng:areq] http://errors.angularjs.org/1.3.0/ng/areq?p0=rCtlr&p1=not%20a%20function%2C%20got%20undefined

<!DOCTYPE html>
<html ng-app>
<head lang="en">
    <meta charset="UTF-8">
    <title>test</title>
    <script src="lib/angular/1.3.0/angular.min.js"></script>
    <script src="lib/socket.io/1.2.0/socket.io.js"></script>
</head>
<body ng-controller="rCtlr">
    <h1>{{xTime}}</h1>
    <script>
    function rCtlr($scope){
        var socket = io.connect();
        socket.on('updateTime', function (data) {
            $scope.xTime = data.updateTime;
            console.log(data);
        });
    }
    </script>
</body>
</html>

Without Angular it works fine, I guess there is an issue with the function scope? Thanks for help!

MSadura · Accepted Answer · 2014-11-21 14:14:52Z

0

To make it work properly you should: 1) Add name to your ng-app:

<html ng-app="myapp"> //myapp is an example name

2) Then you can define angular module and controller like this:

angular.module("myapp",[]) // define module with name from ng-app
.controller('rCtlr',['$scope', function($scope){ //define controller for your module
    var socket = io.connect();
    socket.on('updateTime', function (data) {
        $scope.xTime = data.updateTime;
        console.log(data);
    });    
}]);

alternatively (it does the same):

var app = angular.module("myapp",[]);
app.controller('rCtlr',['$scope', function($scope){
      //controller body
}]);

PS. It doesn't matter, but name of you controller should be "rCtrl" rather than "rCtlr"

Here is a refference to angular docs: https://docs.angularjs.org/guide/controller

answered Nov 21, 2014 at 14:14

MSadura

1,04213 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rudi Over a year ago

Thanks for the typo hint ;-) This now works at least at the browser console (I see the time frequently). But I don't see the h1 output. Another typo? WebStorm tells me everything is fine.

MSadura Over a year ago

Im not a socket.io specialist, but your h1 (xTime var) is not showing, because event 'updateTime' is not trigered. As a test try to set xTime directly in controller: $scope.xTime = 'Test". Text should show up, because angular part is working

Rudi · Accepted Answer · 2014-11-21 16:33:46Z

0

Update, thanks to MarkS: But .. see comment to Mark's answer

<!DOCTYPE html>
<html >
<head lang="en">
    <meta charset="UTF-8">
<title>AngularSocket</title>
    <script src="lib/angular/1.3.0/angular.min.js" type="text/javascript"></script>
    <script src="lib/socket.io/1.2.0/socket.io.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body data-ng-app="angApp">
    <div data-ng-controller="timeCtrl">
            <h1>{{xTime}}</h1>
    </div>
</body>
</html>

app.js:

angular
.module('angApp', [])
.controller('timeCtrl', ['$scope', function($scope) {
    var socket = io.connect();
    socket.on('updateTime', function (data) {
        $scope.xTime = data.updateTime;
        console.log(data);
    });
}]);

edited Nov 21, 2014 at 16:33

answered Nov 21, 2014 at 16:27

Rudi

1,1892 gold badges15 silver badges34 bronze badges

Collectives™ on Stack Overflow

angular and socket.io - wrong code structure

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related