角度和socket.io - 错误的代码结构答案

【问题标题】：angular and socket.io - wrong code structure角度和socket.io - 错误的代码结构
【发布时间】：2015-01-19 15:35:04
【问题描述】：

我对 Node/Angular/.. 很陌生，并尝试了这个简单的脚本。但它不起作用，有什么问题？

我总是得到错误：[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>

如果没有 Angular，它可以正常工作，我猜函数范围有问题吗？感谢您的帮助！

【问题讨论】：

标签： angularjs

【解决方案1】：

要使其正常工作，您应该： 1) 为您的 ng-app 添加名称：

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

2) 然后你可以像这样定义角度模块和控制器：

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

或者（它做同样的事情）：

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

附言。没关系，但是控制器的名称应该是“rCtrl”而不是“rCtlr”

这是对 Angular 文档的参考：https://docs.angularjs.org/guide/controller

【讨论】：

感谢输入错误提示 ;-) 现在至少在浏览器控制台上有效（我经常看到时间）。但我没有看到 h1 输出。另一个错字？ WebStorm 告诉我一切都很好。
我不是 socket.io 专家，但您的 h1 (xTime var) 未显示，因为未触发事件“updateTime”。作为测试，尝试直接在控制器中设置 xTime：$scope.xTime = 'Test"。应该显示文本，因为角度部分正在工作

【解决方案2】：

感谢 MarkS 更新：但是 .. 请参阅对 Mark 回答的评论

<!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);
    });
}]);

【讨论】：