角速度コントローラを動的に

Question

私はangularjsで新しく、私はlaravel、angularjs、requirejsを使って一つのアプリケーションで作業しています。 私の質問は：ユーザーがページ（ビュー）を要求したときにコントローラを動的にロードする方法です。 例：ユーザーがこのURL（http://domain.com/#!/page_requested）を要求した場合、ファイルpage_requested.controller.jsおよびpage_request.template.htmlをロードします。 マイアプリの構造は以下の通りである：

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. 私が探している何が正しいのですか？ "これは私のアプリケーションのために安全ですか？
2. 私はlayzyLoad.jsを使いたくありません - それは素晴らしいスクリプトですが、私はこのアプリで使いたいものではありません。
3. コントローラを登録して私の体にscript要素は、私は私のconfig.jsのからこれを行うことができますか？

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

を試してみてください？angular.dirictivesはこれを行うことができますです

あなたのビューを登録するには、複数の$ routeProviderを追加するだけです&コントローラ。 require.jsは、状態が変更されたときにコントローラをロードします。