Ionic / Angular和Socket.IO-在收到Socket.IO事件后显示弹出窗口

Question

I'm trying to build a real-time mobile application utilizing the Ionic Framework (AngularJS) and Socket.IO.

Coming from a jQuery background, I'm kind of new to the whole Ionic/Angular application design and structure (eg, controllers, services, etc.). So I was wondering, how should my application be structured, or what is the best/ideal way of structuring my application?

More specifically, in an Ionic/Angular-structured application, where should my usual Socket.IO code go? I've seen one component ( https://github.com/btford/angular-socket-io ) which (as I understand) encapsulates Socket.IO code within an Angular factory. Is this the way to go?

What I really want to achieve are the following:

1. Open an (Ionic) popup when a Socket.IO event is received and
2. emit/send a Socket.IO event/message upon a UI event (eg, button click).

How should my Ionic/Angular code structure look like to achieve this? That is, which code goes into which component/controller/service/factory?

Even a high-level description of the structure would do as a starting point.

Answer 1

As an example for you, Here's how I did it with a ChatCtrl controller.

 <!-- app.js -->
 <script>
   angular.module('chatApp', ['ngAnimate'])

   .controller('ChatCtrl', ['$scope', '$http', function($scope, $http) {

     var socket = io.connect();

     // on connect, grab username
     socket.on('connect', function(data) {
       nickname = prompt("What's your name?");
       socket.emit('join', nickname);
     });

     socket.on('statusConnected', function(data) {
       $scope.status = data;
       $scope.$apply($scope.status);
     });

   }]);
 </script>

My popup is a JavaScript nickname = prompt("What's your name?") but you could probably trigger a modal or whatever other popup you want with some more JS