What is the best way to structure Angular application so controllers can have $state.go(..)?

Question

In my Angular app, each page of the app has its own folder, with its .html files, app files, and controller files inside it.

Kind of like

root
|-- index
|  |-- index.html
|  |-- index.js
|  |-- indexCtrl.js
|-- login
|  |-- login.html
|  |-- login.js
|  |-- loginCtrl.js
etc...

My ui-router logic is contained in the app in index.js .

What I would like to do is place some ui-router logic in login.js where I have a submit function ( ng-submit in login.html ) and I would like to redirect the user if login is successful.

loginApp.controller('loginCtrl', ['$scope', function($scope){
    $scope.submit = function(){

    }

Trouble is, I don't exactly how to manage all the imports and dependencies or if I'm doing it the best way. Should I inject ui-router in this app and all my apps that need to redirect states?

I fear that will make things messy. For instance, LoginApp is injected with ui-router and then IndexApp is injected with LoginApp and ui-router for itself.

It doesn't seem right. Is there a better way to let different apps/controllers do things to $state but cut back on all the injections?

Answer 1

You should'nt split your routings into different modules, it makes it tedious to keep up with it and is highly prone to errors.

Your main app should contain your routings to that particular app. If you really want to sub-module all components, you would be referring to the (other module's) controllers in the routing file.