In a large-scale application, we are too lazy to load modules, controllers, services, when necessary, without loading them into index.html. Here, I mean loading all js into the corresponding html template, not index.html. (It can be different js that have a module, several controllers, services, directives for this functionality, or separate js files that have several controllers or services)
I do not want to use RequireJs. However, I am looking for a solution in angular itself.
angular.module( 'my-second-module', ['ui.router']) .config(function config($stateProvider) { $stateProvider .state('mainscreen', { url: "/mainscreen", templateUrl: "app/MyMain.tpl.html" }) .state('mainscreen.sub', { url: "/sub", controller: 'subCtrl', templateUrl: "app/sub.tpl.html" }) }) .controller( 'subCtrl', function contractCtrl ($scope,$http,$route,$location) { }) .controller( 'subTwoCtrl', function newContractCtrl($scope,someService,$http,$templateCache) { .filter('myTypeFilter',function(){ return function (input,value){ return 'Normal'; }; }) .service('newService', function () { var selectedContract = []; var hotelObject=[{}]; return { notes:function () { }, addNote:function (noteTitle) { } }; }) .directive('autocomplete', function($parse) { return function(scope, element, attrs) { var setSelection = $parse(attrs.selection).assign; scope.$watch(attrs.autocomplete, function(value) { element.autocomplete({ source: value, select: function(event, ui) { setSelection(scope, ui.item.value); scope.$apply(); } }); }); }; }) .factory('restService', function(commonService) { return { setReturnMessage: function(res) { }; }) });