Category Archives: Javascript

Phil 2.2.15

8:00 – 10:00, 12:00 – 5:30 SR

  • DB backups
  • Worked with Dong to install FR on the test server. The services still aren’t working. Maybe missing jar files?
  • Status report
  • More Angular
    • Tried making factories work but I got stuck trying to access the object’s this. Since they are structured differently but generally have the same functionality(ish), I tried configuring the TypeScript class as a service. That worked just fine – I was able to access public variables and functions through dependency injection.
    • Discovered that the ‘static’ keyword allows for directives to work with classes. THis might also be true for factories. The issue to work through is how the link function connects to the directive. Components like the scatterplot are big directives, and can’t be crammed into a single method in a class.
  • Timesheet!

Phil 1.30.15

8:00 – 5:00 SR

  • Had a scary email from Ronda about the center where our servers live getting shut down sometime in June. I thought we had started this process, but maybe not?
  • Meeting with Ronda at 4:00 on Monday.
  • More Typescript/Angular integration. Today’s results!
  • First, plain old angular HTML:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="simpleApp">
<div ng-controller="MainCtrl as mc">
    <p>String = {{mc.myString}}</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="simple.js"></script>

</body>
</html>
  • Next, the TypeScript (simple.ts):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />

class TestClass{
   myString:string;

   constructor(){
      this.myString = "Hello, TypeScript4";
   }
}

class AngularMain{
   myModule:ng.IModule;
   myController:ng.IModule;
   public doCreate(angular:ng.IAngularStatic, sfn:Function){
      this.myModule = angular.module('simpleApp', []);
      this.myController = this.myModule.controller('MainCtrl', [sfn]);
   }
}

new AngularMain().doCreate(angular, TestClass);
  • Last, the generated JavaScript code (simple.js):
/// <reference path="../definitelytyped/angularjs/angular.d.ts" />
var TestClass = (function () {
    function TestClass() {
        this.myString = "Hello, TypeScript4";
    }
    return TestClass;
})();
var AngularMain = (function () {
    function AngularMain() {
    }
    AngularMain.prototype.doCreate = function (angular, sfn) {
        this.myModule = angular.module('simpleApp', []);
        this.myController = this.myModule.controller('MainCtrl', [sfn]);
    };
    return AngularMain;
})();
new AngularMain().doCreate(angular, TestClass);
//# sourceMappingURL=simple.js.map

Phil 1.29.15

8:00 – 5:00 SR

  • Deployed swf fix
  • Tried FR webapp again, but login still won’t work. The service can’t be found.
  • Working on using Typescript for our modules, now that we’ve settled on a variant of the Angular Prototype pattern.
  • Had to get the definitely typed angular and jquery ‘libraries’ and put them in their own folder for the 
    /// <reference path="../definitelytyped/angularjs/angular.d.ts" />
  • declarations(?) to work.
  • Went back to the angular with typescript video. The key points are really around 15:00 in, where the controllers and factories are built. Sean Hess’s github repository for the demo code is here.

Phil 1.28.15

8:00 – 3:30 SR

Phil 1.27.15

8:00 – 4:00 SR

  • Working on promoting the dialog and server components to the Novetta libs folder(s)
  • Aaaaaand while working on that I figured I’d make sure that inheritance works with my example server factory class. Turns out the Revealing Module Pattern breaks inheritance because the private functions don’t come along with closure, which surprised me. A google search brings up this post by MetaDuck, which I’m looking at….
  • No luck with that. It’s wierd, I’m just not getting the pointer from angular when I inherit. Giving up for a little while.
  • Moved password dialog to the novetta libs
  • Moved phpConnection to novetta libs
  • Ok, after a long walk to clear my head, I realized that my problems are because factories require a return object. This means that you have to change the first line of the inheritance code to store that return object so that it in turn can be returned to angular:
function QueryServiceFn2($http){
   var retObj = QueryServiceFn.call(this, $http);
   globalU.inheritPrototype(this, QueryServiceFn);
   return retObj;
}
  • And that works just fine. Going to check that closure works the way that I think it should now. And lo, it does. So here’s a full example of inheriting a factory object:
globalUtils.appMap.phpFactories2 = (function(globalU, base){
   "use strict";
   function QueryServiceFn($http){
      var retObj = base.call(this, $http);
      globalU.inheritPrototype(this, base);
      return retObj;
   }

   return{
      queryServicePtr: QueryServiceFn
   };
})(globalUtils, globalUtils.appMap.phpFactories.queryServicePtr);
  • To override a function, simply declare it normally and then set the pointer in retObj to point at the new version. The only thing to watch out for is that closure won’t hold. If you need access to an item in the base class that’s accessed through closure, you’ll probably have to copy it.

Phil 1.26.14

8:00 – 3:00 SR

  • Looks like the presentation went well. Chris wants a single presentation as well, which should be easy – just add the FY to the title and then make one large slideshow.
  • Hopefully finishing login directive.
    • Added in the factory calls to the http calls. Needed to add an additional then to process the reselts of the password query.
    • Working on a reset password capability – done.
    • Cleaning up CSS.

Phil 12.11.14

8:00 – 2:30 SR

  • DB backups
  • Got an annotated set of screenshots for the FMP problem. Left on Dong’s desk.
  • Meeting with Agenia. Progress? There is confusion about what our landlord actually is.
  • Scatterplots
    • Got 3D transforms working. It’s important to have the root (origin) div have the perspective property set, and then the child (stage) div have the transform-style: preserve-3d set. As before, this intro to CSS 3D is most helpful.
    • The points for the pointcloud need to fit inside the dimensions (width/height) defined in the CSS for the rotations to work correctly

Phil 10.10.14

8:00 – 5:00 SR

  • Backups
  • Updated lab list
  • Finish ng-route section of Angular book
    • module.config is very picky about what it can use. All the injections that work in controllers, factories and services cannot be used here. Angular module.provider can interact, but providers appear to be tricky too. This post goes into the differences between factories, services and providers.
  • Start on Documentation – Nope started on directives, since it’s a long weekend.
  • Install Mathematica – done

Phil 8.9.14

8:00 – 5:00 SR

  • Backups!
  • Restored the qb_queries table since Lenny had blown some of his queries away
  • More Angular – walking though the full webapp example. Also watched this talk on TypeScript and Angular. Good stuff – just not quite yet.
  • Meeting at 2:00, plus a deploy of the fixed FA.
    • We are to document the current system. I’ll do most of it, which will keep Dong free to fix and update things. Here’s the list of Things To Do.
    • The next step will be to do visualization (reports, slides, quad-charts) of the live data. We may roll our own or possible use something like the Wolfram Alpha Appliance. Have to see how much that costs.

Phil 10.8.14

8:00 – 2:30 SR

  • Backups!
  • More angular. Filters yesterday, directives today?
  • Discovered an interesting problem with bound arrays, at least for strings. If the value that Angular is using to connect it to the div is the same for two or more rows, it complains with a “Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use ‘track by’ expression to specify unique keys”. The default seems to be the first column. This is discussed in the documentation here, with the upshot that you can generally get around this by using “<div ng-repeat="value in [4, 4] track by $index"></div>“. not sure how that would play with some of the large tables we’re using. I’ve just tried this for objects, and it seems just fine. This implies that we’ll need to be careful about how we populate datagrids, but nothing horrible.
  • Working my way through ng-route.

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

Phil 10.6.14

8:00 – 10:00, 1:00 – 5:00 SR

  • No joy in getting on the servers. Put in another ticket to get my admin accounts back(?)
  • Ronda seems to be making progress though
  • Angular
    • learning about $q
    • Re-rigged the Angular ‘QueryAppServlet’ to use a service. There doesn’t seem to be a straightforward way to bind the values from the service to the controller, so I used a pubsub pattern, which worked just fine and I don’t feel too bad about it, but it seems… clunky. In looking for an answer, I found this discussion on stackoverflow, which I need to spend more time reading.
    • Tried to get the Java Servlet to see straight json, but no luck. back to URL encoding.

 

Phil 9.12.14

8:00 – 5:00 SR

  • DB Backups
  • Deployed new FA and RA
  • Added a column to the master table
  • Added labs to FRa
  • Angular
    • Worked on http interaction. It turns out that Angular likes to post in JSON format, but most servers (PHP, Java) use URI encoding. Spent a few hours going around and around with that. There are also no directives around <br>, and ng-model doesn’t seem to work with <div>. Nonetheless, I’m interacting with the database through a web page, so yay.

Phil 9.10.14

8:00 – 4:00 SR

  • Got an email from Geena – she’s unable to save a mitigation plan. “To elaborate, looks like the malfunction occurs when ‘copy from previous month’ is selected, unable to save. I selected ‘copy from previous month’ and modified the data yet unable to save”
  • DB Backups.
  • Get for class, this too.
  • Working through chapter 3 of AngularJS Up and Running, which introduces unit testing. I was having trouble getting karma to run – getting the error
    • ERROR [karma]: { [Error: listen EACCES] code: ‘EACCES’, errno: ‘EACCES’, syscall: ‘listen’ }
  • Poking around led to this post, which suggested changing the port in the karma.conf.js file to 8001 from 8080. This works just fine, though I’m not sure why port 8080 is choking. I have Tomcat installed on 8080, but even with Tomcat off, I get the same error. Odd.
  • On to forms and validation. Very nicely done.