How to use angularjs ui router nested views with multi controllers and require js

Question

I'm working on a angular project with angular-ui-route and the use of nested views like:

 $stateProvider.state('app', {
     url: '/form',
     views: {
         'p1@modals': {
             templateUrl: 'form1.html'
         }
         'p2@modals': {
             templateUrl: 'form2.html',
             controller: function($scope) {
                 //do some thing
             }
         }
     }
 })

however, we have several sub views of /form, each of them has a controller, we don't want to put all the controller code in a js file so we write the config as:

 $stateProvider.state('app', {
     url: '/form',
     views: {
         'p1@modals': {
             templateUrl: 'form1.html'
         }
         'p2@modals': {
             templateUrl: 'form2.html',
             controller: 'P2Controller.js'
         }
     }
 })

in P2Controller.js we define the controller as:

 define(['app'], function(app) {
    app.controller('P2Controller', function($scope) {

    });
 })

the problem is how can load the P2Controller.js and invoke the controller

Answer 1

Why not to use standart technique:

config-file:

angular.module('yourModule', [])
.config(function($stateProvider) {
    $stateProvider.state('app', {
        url: '/form',
        views: {
            'p1@modals': {
                templateUrl: 'form1.html'
            },
            'p2@modals': {
                templateUrl: 'form2.html',
                controller: 'P2Controller'
            }
        }
    })
})

P2Controller.js:

angular.module('yourModule')
.controller('P2Controller', function() {
    //your stuff
});

P.S. 'p1@modals' means that modals is parent for view 'p1'. Be careful with this logic