I'm trying to build a huge Modular Web App with AngularJs and RequireJS. This is my directory that I want to build:
|--index.html
|--css
|--images
|--libs
| └--angular.js
| └--angular-route.js
| └--require.js
|
|--js
| └--app.js
| └--controller.js
|
└--module
|--user
| |--controller
| | └--index.js (that is controller to list all users)
| | └--add.js (this controller to add new user)
| |--service
| | └--user.js
| └--template
| └--index.tpl.html
| └--add.tpl.html
|
└--photo
|--controller
| └--index.js
| └--add.js
|--service
| └--photo.js
└--template
└--index.tpl.html
└--add.tpl.html
In app.js
'use strict';
var hugeApp = angular.module('hugeApp', [
'ngRoute',
'mainController'
]);
hugeApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/:fullpath', {
templateUrl: 'main.html',
controller: 'RouteController'
}).
otherwise({
templateUrl: 'main.html',
controller: 'RouteController'
});
}]);
And for controller.js
'use strict';
var mainController = angular.module('mainController', []);
mainController.controller('RouteController', ['$scope', '$routeParams', function($scope, $routeParams) {
// I will use url link to find the right sub-controller
// example:
// #/user:index
// #/user:add
/* This is Some code to find moduleId and ControllerId */
var moduleId = 'user';
var controllerId = 'index';
// This is the code by using requireJS to replace
// controller to /module/user/controller/index.js
// and view to /module/user/template/index.html
}]);
Now, I want to complete the code to replace controller and view in above with RequireJs. How can I do like that?