动态角度负载控制器

Question

我是angularjs的新手，我使用laravel，angularjs和requirejs在一个应用程序中工作。 我的问题是：当用户请求页面（视图）时，我如何动态加载控制器。 示例：如果用户请求此URL（http://domain.com/#!/page_requested），那么我想加载文件page_requested.controller.js和page_request.template.html。 我的app结构是：

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("/");
}]);
});

我的控制器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...');
  });
}]);

现在我的问题是：

1. 我正在寻找的是正确的吗？ ＆＃34;这对我的应用程序是否安全？
2. 我不想使用layzyLoad.js-这是一个很棒的剧本，但它不是我想在这个应用程序上使用的。
3. 如果我必须注册我的控制器并将脚本元素添加到我的身体，我怎么能从我的config.js做到这一点？是angular.dirictives可以做到这一点？

Answer 1

试试这个

'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;
});

您只需添加多个$ routeProvider即可注册您的视图＆amp;控制器。 require.js将在状态改变时加载控制器。