Phil 10.7.14

8:00 – 4:00 SR

  • Another day, another ticket trying to get back my servers.
  • Updated the database though, through the scripting server.
  • More Angular. First, we’re going to try to move the QueryService off to it’s own file.
  • AngularJS: Getting around ngApp limitations with ngModule
  • Here’s how to have multiple files with dependencies in Angular, at least insofar as I can tell.
  • First, make sure that all your scripts are listed at the bottom of your html file. In this case, the ng-app is queryAppServlet, which is shown below:
<html ng-app="queryAppServlet">
    <body ng-controller="MainCtrl as mainCtrl">
        <script src="libs/angular.js"> </script>
        <script src="queryAppServlet.js"></script>
        <script src="tomcatConnection.js"></script>
    </body>
</html>
  • Each javascript file contains an individual module. Here’s a truncated version of ‘tomcatConnection.js’:
 var tc = angular.module('tomcatConnection', []);
 tc.factory('QueryService', ['$http', function($http){
     "use strict";
     var items = ["Ready"];
     var message = "No Messages";
     var subscribers = [];
     return{
         addSubscriber: function(subscr){
         subscribers.push(subscr);
     }
}]);
  • ‘queryAppService.js’ uses tomcatConnect for the communication with the server. It looks like this:
var qa = angular.module('queryAppServlet', ['tomcatConnection']);
qa.controller('MainCtrl', ['QueryService', '$http', function (QueryService, $http) {
     "use strict";
     var self = this;
     QueryService.addSubscriber(self);
     self.query = "show tables";

     self.items = QueryService.getItems();
     self.message = QueryService.getMessage();

     self.submit = function(){
         QueryService.submit(self.query);
     };
}]);