LabVIEW WebService With AngularJS

[prettypwnie]

Hi everyone!

I just joined this group because I need to make a web app with a LabVIEW backend. I'm pretty familar with LabVIEW, but this is the first time I've done any kind of web development. From the research I've done, it seems to me like AngularJS is the best tool for making the frontend, so I went through a bunch of tutorials to learn Angular in addition to the LabVIEW WebService tutorials. Then as a first step to help me figure out what I'm doing, I made a version of the "Add Two" tutorial using Angular (attached). It actually took me a while to figure it out, so I'm posting it here in case anyone else is trying to do use Angular with a LabVIEW WebService, to save you some pain. If you have comments on it or suggestions of things I could do better, that would be great too. As I said, I am a pretty new to web development.

--Hope

[cirrusio]

This is a fairly simple app with not a lot to comment on.  Todd Motto and John Papa have both put out excellent style guides to follow for developing your apps.  Todd Motto recently completely rewrote his Angular 1.x guide with an eye to Angular 2 and I have not had a chance to look this over.  These style guides can be found at:

• Todd Motto - https://github.com/toddmotto/angular-styleguide
• John Papa - https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

First comment regarding the code - try to define one component per file.  Rather than having the module declared in your IIFE followed by the controller, maintain a separate file for the module and another for the controller.  Your module file will look like this:

(function(){

    angular.module('addTwo', []);
})();

This looks silly, but as your app grows, this file will start to contain more modules that will be pulled in with the main module ('addTwo').  Also, the main module will be pulled into all of the controllers, services, etc. that will be defined on that module and it will be easy to make a mistake if your module is not separate.

With the module in it's own file, your controller now looks like

(function() {

    angular.module('addTwo').controller('AddTwoController', ['$http', function($http){

        var addTwo = this;
        addTwo.firstNumber = 0;
        addTwo.secondNumber = 0;
        addTwo.sum = 0;
       
        this.addNumbers = function(){

            $http.get('AddTwo', {params:{first: addTwo.firstNumber, second: addTwo.secondNumber}})

                 .then(function(response){

                              addTwo.sum = response.data.sum;
                 });
        };
    }]);
})();

I don't tend to capture this but rather use $scope.  The this keyword is an ungodly mess in js and I try to avoid using it in only well defined situations.  That being said, John Papa recommends doing exactly what you have done, so you are in good company.

The one thing to keep in mind as you continue to go forward with this is that Angular 2 is going to look dramatically different than 1.x, so it might be a good idea to look over Todd Motto's guide and internalize it so that when it comes time to moving up, it will be less painful.

Hope all of this helps. cirrus

[cirrusio]

Also, consider learning a build tool such as gulp.  Makes life nice with js...

[prettypwnie]

Thanks for the advice. I'll look into those style guides. Hmm, I'll see if I can muster up enough energy to try to learn gulp.