2

I have a cross-platform enterprise app built using Onsen UI and AngularJS. However, the app is fast growing in size and is becoming confusing and difficult to manage. Up to now I have been able to manage all the apps controllers in 1 app.js file and the app is working perfectly. But I want to split my controllers into different .js files e.g. login.js, registration.js. to make it more manageable as the app grows.

I have found THIS solution on SO (the marked answer) but I have trouble implementing it. Equally the answer by @jason328 on the link looks very elegant, but again I get stuck implementing that with my code.

In my main new app.js file I have the module as follows:

angular.module('myApp.controllers', ['onsen']);

And then in e.g. login.js I setup my module as below:

angular.module('myApp.controllers').controller('LoginController', ['$scope', '$http', function($scope, $http)
{
    // All the login logic goes here
}]);

This does not work as none of the pages are displayed. When I have this setup in the original app.js file though, the app works perfect (original code below).

var app = angular.module("myApp", ['onsen']);
// Manages the state of the login.html screen
app.controller("LoginController", function($scope, $http)
{
    // All the login logic goes here
});

My issue lies with ['onsen'] in the new app.js I assume? But how do I include it in the SO solution I am trying to implement?

Improve this question
5
  • Did you include all of the new .js files in script tags in your index.html file? Are there any errors output to the console? Commented May 11, 2016 at 14:59
  • Yip, I included the new files in the index.html file. I added them underneath the <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.8/…> and I also made sure that app.js was the first file to be called. Commented May 11, 2016 at 15:24
  • I'd step through the code and see how far it's getting. This is probably just a pathing or spelling issue. Commented May 11, 2016 at 15:28
  • The error I get shows as - Uncaught Error: [$injector:modulerr] Commented May 11, 2016 at 15:33
  • AngularJS controller files can get messy. You could also try using requirejs and load files dynamically and then instantiate the app by id after loading rather than using ng-app="". Commented May 11, 2016 at 15:38

2 Answers 2

Reset to default
2

There's an other way to do this. You can make a module for each file and add them to the myApp module, like this:

app.js

var app = angular.module("myApp", ['onsen', 'loginControllers', 'otherController']);

login.js

var login = angular.module("loginControllers", []);
login.controller("LoginController", function($scope, $http)
{
    // All the login logic goes here
});

other.js

var other = angular.module('otherControllers', []);
other("OtherController", function($scope, $http)
{
    // All the other logic goes here
});

Make sure you have all the scripts added to your index.html.

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

1 Comment

> Make sure you have all the scripts added to your index.html. Is there any way to avoid this (other by using the new Angular :)?
1

You can turn them into modules, like @nicous mentioned and import them on the main app.js wherever you have to use them, then you can use webpack or any other bundler to generate your bundle for you. This way you won't need to add all of them to the html file.

Improve this answer

1 Comment

You should mention the complete steps for the answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.