Making sure we have minification safe angular code

min.md

For regular Javascript name your default function

ie:

Instead of doing this:

export default function (campaignService) {
  return {
    scope: {},
    template: require('./my-directive.html'),
    link: function(scope) {
      campaignService.getCampaigns().then((campaigns) => {
        scope.campaigns = campaigns;
      });
    }
  };
}

Name your function:

export default function myDirective(campaignService) {
  return {
    scope: {},
    template: require('./my-directive.html'),
    link: function(scope) {
      campaignService.getCampaigns().then((campaigns) => {
        scope.campaigns = campaigns;
      });
    }
  };
}

Instead of doing this

export default (campaignService) => {
  return {
    scope: {},
    template: require('./my-directive.html'),
    link: function(scope) {
      campaignService.getCampaigns().then((campaigns) => {
        scope.campaigns = campaigns;
      });    
    },
    controller: function($scope,$browser) {}
  };
}

Do this: (Explicitly annotate the dependencies)

If you use one of the special angular functions (ie: controller) in the return you will need to anotate that function explicitly as well:

import { CampService } from "../ancillary/utils/typings";

// ANNOTATE dependencies for the exported service
service.$inject = ["campaignService"];
export default function service(campaignService: CampService) {
  return {
    scope: {},
    template: require('./my-directive.html'),
    link: function(scope) {
      campaignService.getCampaigns().then((campaigns) => {
        scope.campaigns = campaigns;
      });    
    },
    // Annotate resolve functions
    resolve: {
      nil : ["$q", function($q) {} ]
    }
    // 
    // annotate the special angular functions too
    //
    controller: ["$scope", function($scope) { ... }]
  };
}

Instead of annotating like this (which is not going to work as expected):

/*@ngInject*/
import "./styles.less";
export default function myDirective(campaignService) {
  return {
    scope: {},
    template: require('./my-directive.html'),
    link: function(scope) {
      campaignService.getCampaigns().then((campaigns) => {
        scope.campaigns = campaigns;
      });
    }
  };
}

Annotate like this:

import "./styles.less";
myDirective.$inject = ["campaignService"]
export default function myDirective(campaignService) {
  return {
    scope: {},
    template: require('./my-directive.html'),
    link: function(scope) {
      campaignService.getCampaigns().then((campaigns) => {
        scope.campaigns = campaigns;
      });
    }
  };
}

"For regular Javascript the same rules as typescript apply." This is confusing, I initially read that to mean to apply the explicit injection pattern to javascript files, which you indicate we should not do.

Hi.

Jen Mei has requested that we use explicit annotations for both javascript and typescript.