Lazy Loading In AngularJS with require.js and delayed bootstarping

I am developing a large scale application using angular js as single page application.

In this application I need to write 50+ controllers, 20+ services and 10 + directives. Initially I have declared all the js files in index.html file.

Apart from js files Index.html contains an ng-app and ng-view. I am using routing concept to redirect to specific view based upon navigation.

I am facing few issues while declaring all the files in index.html like performance and if any issues with JS files entire application is down. To avoid these issues I have found few solutions by following below url.

http://ify.io/lazy-loading-in-angularjs/

http://www.codeproject.com/Articles/1039826/Angularjs-Lazy-Loading-with-Requirejs-and-OcLazylo

http://www.codeproject.com/Articles/808213/Developing-a-Large-Scale-Application-with-a-Single

I have followed first article using require.js and angular.bootstrap() I am able to load required files based up on user request.

For example If user navigate to home page I am loading home page related files like homeservice,common service, constants, controllers and directives. Common service and constants and few directive files will be useful to entire application.

// Register routes with the $routeProvider
        $routeProvider.when('/', {templateUrl:'views/home.html'});
        $routeProvider.when('/about', {templateUrl:'views/about.html', resolve:{deps:function($q, $rootScope)
        {
            var deferred = $q.defer();
            var dependencies =
            [
                'controllers/AboutViewController.js',
                'directives/some-directive.js'
            ];

            $script(dependencies, function()
            {
                // all dependencies have now been loaded by $script.js so resolve the promise
                $rootScope.$apply(function()
                {
                    deferred.resolve();
                });
            });

            return deferred.promise;
        }}});

In dependencies I have mentioned all dependencies. Is there any way to declare reusable dependencies like common service, constants and directive only once per entire application. Presently I am specifying these reusable dependencies in every when condition.

I am not using OcLazyload, When we need to use this. I have read documentation about delayed boot strapping in angularjs site and unable to understand below specified lines. Please help me to understand better.

There a few things to keep in mind regardless of automatic or manual bootstrapping:

While it's possible to bootstrap more than one AngularJS application per page, we don't actively test against this scenario. It's possible that you'll run into problems, especially with complex apps, so caution is advised. Do not bootstrap your app on an element with a directive that uses transclusion, such as ngIf, ngInclude and ngView. Doing this misplaces the app $rootElement and the app's injector, causing animations to stop working and making the injector inaccessible from outside the app.

I am using ngview and directives but in above mentioned lines don't use these tags. So please guide me whether I can use delayed bootstrapping or lazy loading will cause any issues to entire application. Which scenario I need to use require.js and oczyload.

Thanks in advance.