add second angular module

Question

I can't get the header component to register as a module.

I'm stuck, trying to add a new module. I'm using the gulp-angular-scaffold. When running Unit tests (Jasmine), the 'header' module is not defined.

It seems like I'm missing a module declaration, but I'm not sure of where or why?

Thanks in advance

folder structure snapshot:

├──  app/
│   │   ├──  components/
│   │   │   └──  header/
│   │   │   │   ├──  header.controller.js
|   |   |   |   ├──  header.directive.js
|   |   |   |   ├──  header.spec.js
|   |   |   |   ├──  header.js
|   |   |   |   ├──  header.less
│   │   │   │   └──  header.html
│   │   ├──  main/
│   │   │   ├──  main.controller.js
│   │   │   ├──  main.controller.spec.js
│   │   │   └──  main.html
│   │   └──  index.js

index.js:(loads the base/only successful module)

angular.module('styleguide', ['ngSanitize', 'ui.router', 'ui.bootstrap'])
    .controller('MainCtrl', MainCtrl)

header.js:

'use strict';

import HeaderCtrl from 'header.controller.js';

import HeaderNav from 'header.directive.js';

angular.module('header', ['styleguide'])
    .controller('HeaderCtrl', HeaderCtrl)
    .directive('HeaderDir', HeaderNav)
    .config();

header.controller.js

'use strict';

class HeaderCtrl {
  constructor ($scope) {
    $scope.Project = 'header.controller';
  }
}

HeaderCtrl.$inject = ['$scope'];

export default HeaderCtrl;

header.directive.js

'use strict';

class HeaderNav {

  constructor(){
      return {
        templateUrl: '../components/header/header.html'
      };
  }

}

export default HeaderNav;

What do header.controller.js and header.directive.js look like? Are there any syntax errors in those files? — Tom
– Tom, Commented Jun 2, 2015 at 20:18
@Tom I added the directive and controller to the post, JSHint isn't complaining about anything in the files and nothing stands out immediately to me. — atlMapper
– atlMapper, Commented Jun 3, 2015 at 17:59

sirrocco · Accepted Answer · 2015-06-03 04:50:47Z

1

You need to add the module in your index file - index.js :

angular.module('styleguide', ['ngSanitize', 'ui.router', 'ui.bootstrap', 'header'])
    .controller('MainCtrl', MainCtrl)

PS: ... unless that's not what you want ?

answered Jun 3, 2015 at 4:50

sirrocco

8,0294 gold badges63 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

atlMapper Over a year ago

When I add the module that way I'm getting this error:

Error: [$injector:modulerr] Failed to instantiate module header due to: Error: [ng:areq] Argument 'fn' is not a function, got undefined

atlMapper Over a year ago

I think its how I wrote the directive, my es6 skills are to blame there

Collectives™ on Stack Overflow

add second angular module

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related