Go back to the main page

Connect to QuickBooks Angular directive

 

 


Simple Connect button rendering

I was attempting to answer this SO question which referenced this angular directive for rendering a "Connect to QuickBooks" button. I fired up the gulp-angular generator but couldn't get that directive to work and in the process was was able to come up with a simpler approach.

  1. Install the gulp-angular Yeoman generator, make a new dir, and run the generator.
    2.   $ npm install -g generator-gulp-angular
  $ cd ~/github/labs
  $ mkdir connect-intuit-angular && cd $_
  $ yo gulp-angular
  2. Install no additional items when prompted by the Yeoman wizard.
    3. Barebones setup
  3. Oops. The bower install failed.
    4. Bower install crashes with EMALFORMED in bower.json
    Take out the comma to fix.
  4. Re-run bower install.
  5. Test the generator doing a gulp serve.
    6. Ok, the generator scaffolding is working.
  6. Let's clean up some of the scaffolding stuff. Remove the awesomeThings array in src/app/main/main.controller.js
    7. Remove awesomeThings array in controller.
  7. Then remove the corresponding ng-repeat in src/index.html.
    8. Clean up the view as well.
  8. Make a new file src/app/main/directives.js and add the following.
    9. /* src/app/main/directives.js */
angular.module('connectIntuitAngular')
.directive('connectToQuickbooks', function($window){
  return {
    restrict: 'E',    template: "<ipp:connectToIntuit></ipp:connectToIntuit>",
    link: function(scope) {
        var script = $window.document.createElement("script");
        script.type = "text/javascript";
        script.src = "//js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere.js";
        script.onload = function () {
           scope.$emit('intuitjs:loaded');
        };
        $window.document.body.appendChild(script);
        scope.$on('intuitjs:loaded', function (evt) {
          $window.intuit.ipp.anywhere.setup({ grantUrl: '/' });
          scope.connected = true;
          scope.$apply();
        });
    }
  }
});
  9. Then in src/index.html do:
    10. <!-- index.html -->
<div class="jumbotron" ng-init="connected = false">
  <div class="control-group">
    <div class="controls" ng-show="!connected">
      Loading QuickBooks Connect button
    </div>
    <div class="controls" ng-show="connected">
      <connect-to-quickbooks />
    </div>

  </div>
</div>
  10. Let's check it out.
    11. Connect to QuickBooks button is ready to go.

Handling external Javascript

There a few other ways to handle external Javascript dependencies in Angular but I like using the onload attribute in combination with Angular events as it is simple and easy to follow. In this refactoring I was able to save quite a few lines of code while improving read-ability.