2

I'm currently experimenting with Browserify + Angular and I've stumbled into a weird issue. I've created a file within a subdir for my controller called controllers/start-controller.js.`

In my app.js file I have a local variable that references the controllers:

var controllers = require('./controllers/');

Within controllers/ is an index.js file that references the start-controller:

require('./start-controller');

And then back in my app.js, to call the controller I have the following:

app.controller('StartController', ['$scope', controllers.StartController]);

The problem:

With the current setup, StartController isn't recognised and Angular throws this error. However, if I change the local variable to include start-controller directly:

var controllers = require('./controllers/start-controller');

Then this works fine but this isn't really what I'm after. I'd like to be able to reference the controllers within controllers/index.js. Is app.controller missing something in the call to StartController which is why it can't recognise it?

Improve this question
2
  • By "StartController isn't recognised" do you mean that controllers.StartController is undefined? Can you create a small example? I cannot reproduce any issues on my side. Commented Nov 25, 2014 at 21:19
  • I believe @RickvanMook's answer is the correct solution, but posting index.js would be a lot more helpful. Commented Dec 8, 2014 at 20:37

3 Answers 3

Reset to default
1

Not sure about the contents of your index and start-controller files but it looks like you need to export StartController in your index file.

Try to this in your controllers/index.js

exports.StartController = require('./start-controller');
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

James Halliday (substack, creator of browserify) has been hard at work coming up with the browserify handbook: https://github.com/substack/browserify-handbook

This resource is excellent. It goes really deep into how requires work and resolve dependencies. It is by far the best resource I have ever seen on the subject. Perhaps if you (or anyone else landing on this question with a similar problem) give it a read, the answer might jump out at you.

I know it's not a direct answer to your question, but I only recently found this resource, and I wish I knew it existed earlier.

For an introduction to browserify, I recommend watching this tagtree video: http://tagtree.tv/browserify-an-intro?share_code=uncoopered-inspirer

Improve this answer

1 Comment

While this is a great reference and very helpful, it doesn't answer the question.
0

Something awesome about Angular is how modular it is by design. The modularity also lends itself to unit testing for each module.

Inside your index.js file you could establish an Angular module:

module.exports = angular.module('app.controllers', [
  require('./start-controller').name
]);

And then inside your start-controller.js file:

  module.exports = angular.module('app.controllers.startController', [])

  .controller('StartCtrl', ['$scope',

    function($scope, ) {

    }
  ]);

Now when you want to test just the start controller you have it isolated inside angular already.

At this point if you want to add this module to a larger app, for instance your root app, you'd do the exact same process at the top level:

 module.exports = angular.module('app', [
    'ui.router', // Third party library that we've pulled in with an earlier require()
    require('./controllers').name
  ]);

And then inside your index.html file:

<html lang="en" ng-app="app" class="no-js">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.