Janet Riley

Three notes on Angular.js directives

November 24, 2014 | In 30 days

For my Angular.js scrapbook:

  1. The naming convention for directives is camelCaseName in the directive definition, camel-case-name as the element in the view.

    If you don't follow the convention, you'll get a silent failure and a whole lot of nothing where the template output should be.

  2. Unit testing directives is straightforward.

  3. If your module contains any http requests as part of initialization, your test may fail with an error like:

    Error: Unexpected request: GET my_url
    No more request expected
        at $httpBackend (/blah/blah/blah/bower_components/angular-mocks/angular-mocks.js:1178)

If http requests aren't necessary, as when you're unit testing a directive, neutralize the error by making the $httpBackend mock ignore all requests.

   var $httpBackend;

    beforeEach(inject(function($injector){
        $httpBackend = $injector.get('$httpBackend');

       // Ignore all GET and POST requests
        $httpBackend.whenGET(/^.*$/).respond(200, '');
        $httpBackend.whenPOST(/^.*$/).respond(200, '');
    }));