Angular Load Controller dynamisch

Question

Ich bin neu in angularjs, ich arbeite in einer App mit Laravel, Angularjs und Requirejs. meine Frage ist: Wie kann ich den Controller dynamisch laden, wenn ein Benutzer eine Seite (Ansicht) anfordert. Beispiel: Wenn ein Benutzer diese URL anfordert (http://domain.com/#!/page_requested), dann möchte ich die Datei page_requested.controller.js und page_request.template.html laden. Meine app Struktur ist:

public/ 
    app/ 
     main.js 
     app.js 
     config.js 
     todo/ 
      controllers/ 
         page_requested.controller.js 
      views/ 
       page_requested.template.html 
      dirictives/ 
     ... 

main.js

'use struct'; 
require.config({ 
    baseUrl: '/../libPath/', 

    paths: { 
    jquery  : '/../bower_components/jquery/dist/jquery', 
    angular  : '/../bower_components/angular/angular', 
    ngAnimate : '/../bower_components/angulat-animate/angular-animate', 
    ngAria  : '/../bower_components/angular-aria/angular-aria', 
    ngMessages : '/../bower_components/angular-messages/angular-messages', 
    ngRoute  : '/../bower_components/angular-route/angular-route', 
    ngSanitize : '/../bower_components/angular-sanitize/angular-sanitize', 
     autoLoad  : '/../bower_components/auto-load/lib/index', 
    app   : 'app' 


    }, 
    shim: { 
    jquery: { 
      exports: '$' 
     }, 

     angular: { 
      exports: 'angular', 
     }, 
     ngRoute: { 
      exports: 'ngRoute', 
      deps: ['angular'] 
     } 
    } 
}); 

require(
    [ 
     'angular', 
     'ngRoute', 
     'app', 
     'config' 
    ], 
    function (angular) { 
     var AppRoot = angular.element(document.getElementById('ng-app')); 
     AppRoot.attr('ng-controller','app'); 
     angular.bootstrap(document, ['app']); 
    } 
); 

app.js

'use strict'; 
define(['angular', 'ngRoute', 'ngSanitize'], function (angular, ngRoute, ngSanitize) { 

    angular.module('HashBangURLs', ['ngRoute']).config(['$locationProvider', function($location) { 
     $locatio 
</pre>n.hashPrefix('!'); 
    }]); 

    angular.module('HTML5ModeURLs', ['ngRoute']).config(['$locationProvider', function($location) { 
     $location.html5Mode(true); 
    }]); 


    var app = angular.module('app', ['HashBangURLs', 'ngSanitize'], function (
                  $routeProvider, 
                  $locationProvider, 
                  $httpProvider) { 

    }); 

}); 

config.js

'use strict'; 

define(['angular', 'app'], function (angular, app) { 

    return app.config([ '$routeProvider', function ($routeProvider) { 

$routeProvider 
    .when('/:name',{ 
     templateUrl: function(v){return "app/todo/views/"+v.name+".template.html";}, 
     controller: function($q, $route, $rootScope){ 
        return $route.current.params.name + "Controller"; 
       } 
    }) 
    .otherwise("/"); 
}]); 
}); 

Mein Controller page_requestedController

define(['angular', 'app', function(angular, app){ 
    app.controller('page_rquestedController', function($scope){ 
    $scope.title = "Hi from page_requested.controller.js"; 
    console.log('controller is exicuted...'); 
    }); 
}]); 

Nun meine Frage:

1. Es ist richtig, was ich suche? „Ist dies sicher für meine Anwendung?
2. Ich mag nicht verwenden layzyLoad.js- es große Skript, aber es ist nicht das, was ich auf dieser App verwenden möchten.
3. Wenn ich meinen Controller registrieren und fügen Sie die Script-Element zu meinem Körper, wie kann ich dies tun aus meiner config.js? ist die angular.dirictives kann dies tun?

Answer 1

Versuchen Sie, diese

'use strict'; 
 
define([],function() { 
 
    var app = angular.module('UConnect',['ngRoute','ngAnimate','ui.materialize','yaru22.angular-timeago']); 
 
    app.config(['$routeProvider', '$controllerProvider', '$provide',function($routeProvider, $controllerProvider, $provide) { 
 
     // Register your component 
 
     app.register = { 
 
      controller: $controllerProvider.register, 
 
      factory: $provide.factory, 
 
      service: $provide.service 
 
     }; 
 
     // Add resolver for load controller through require.js 
 
     function resolveController(dependencies) { 
 
      return { 
 
      load: ['$q', '$rootScope', function ($q, $rootScope) { 
 
       var defer = $q.defer(); 
 
       require(dependencies, function() { 
 
        defer.resolve(); 
 
        $rootScope.$apply(); 
 
       }); 
 
       return defer.promise; 
 
      }] 
 
      } 
 
     }; 
 
    $routeProvider 
 
    .when("/Pages", { 
 
     templateUrl : "templates/Pages.html", 
 
     controller: 'PagesCtrl', // Add controller name. 
 
     resolve: resolveController(['controller/PagesCtrl']) // Call resolver to load controller. 
 
    }) 
 
    .when("/ContactUs", { 
 
     templateUrl : "templates/ContactUs.html", 
 
     controller: 'ContactUsCtrl', 
 
     resolve: resolveController(['controller/ContactUsCtrl']) 
 
    }) 
 
    ; 
 
    $routeProvider.otherwise('/Pages'); 
 
    }]); 
 
    angular.element(document).ready(function() { 
 
     angular.bootstrap(document, ['Uconnect']); 
 
    }); 
 
    return app; 
 
});

Sie müssen nur mehrere $ routeProvider hinzufügen, um Ihre Ansicht & Controller zu registrieren. require.js lädt den Controller, wenn der Status geändert wird.