Refresh controller in AngularJS

Question

Is there any way to refresh a controller in Angular? Consider the following example:

<div ng-controller="MsgCtrl" ng-repeat="m in messages">{{m}}<br></div>
<script>
var ws = new WebSocket(something, something);
function MsgCtrl($scope) {
    $scope.messages = [];
    ws.onmessage = function(e) {
        $scope.$apply(function() {
            $scope.messages.push(e.data);
        });
    }
}
</script>

If the websocket connection fails, or has to be restarted for some reason, a new websocket must be created and listened to. Is there any way to force the controller to run again, creating a new listening function to push the new connection's messages into $scope?

Also, as a secondary question: is there a good place to go to learn more about Angular? The documentation on the site seems a little unclear.

Second egghead.io also bennadel.com/blog/… and yearofmoo.com also youtube.com/watch?v=ZhfUv0spHCY lots of other stuff on youtube. There's an O'Reilly book but it was immediately out-dated. Also check out yeoman and angular-seed, even if you don't use them they're good for examples. — shaunhusain
– shaunhusain, Commented Aug 19, 2013 at 6:05

Chickenrice · Accepted Answer · 2013-08-19 08:09:53Z

Web socket need to be reconnected when connection failed or need to be restart for some reseason. I think that you shouldn't restart the web sockect by "restarting the controller".

My suggestion is that create a "web socket" service that will maintain its own logic (e.g., reconnect socket when connection failed) and controller just handle the model and view binding.

<html ng-app="MyApp">
....
<div ng-controller="MsgCtrl" ng-repeat="m in messages">{{m}}<br></div>
</html>
<script>

    var myApp = angular.module("MyApp",[]);
    myApp.factory("WebSocket",function(){
        var ws;
        var triedTime=0;
        var maxRetryTime=20;
        return {
            createWS: function(server,protocol,handler){
                ws = new WebSocket(server, protocol);
                ws.onmessage = handler;
                ws.onerror = function(e){
                    this.restartWS(server,protocol,handler);
                }
            },
            closeWS: function(){
                if(ws) ws.close();
            },
            restartWS: function(server,protocol,handler){
                if(triedTime<=maxRetryTime){
                    this.closeWS();
                    this.createWS(server,protocol);
                    triedTime++;
                }
            }
        };
    });

    function MsgCtrl($scope, WebSocket){
        $scope.messages = [];

        WebSocket.createWS("something","something",$scope.msgHandler);

        $scope.msgHandler = function(e){
            $scope.$apply(function() {
                //model update
                $scope.messages.push(e.data);

                var msg = JSON.parse(e.data);

                switch(msg.cmd)
                {
                    case "restart":
                    WebSocket.restartWS("something","something",$scope.msgHandler);
                    break;
                }
            });
        }

    }
</script>

In the above example, web socket will be reconnected when socket client received the "restart" message or connection is failed. Hope this is helpful for you.

Tzu ng · Accepted Answer · 2013-08-19 07:18:26Z

1

One of solutions is trying to reload the page using $route.reload(). A better solution is try to reinit the websocket on the onerror.
I find the best place to learn angularJS is Egghead. And stackoverflow is always the best place to ask question if things are not clear for you.

answered Aug 19, 2013 at 7:18

Tzu ng

9,25414 gold badges69 silver badges106 bronze badges

Collectives™ on Stack Overflow

Refresh controller in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related