2

はじめに:

これは非常に奥が深く、おそらくここで何の助けも得られないことは認識していますが、解決策を求めてインターネット全体のように見えるものを使い果たしました。

要するに、私は自分の ui-router を動的にしたいのです。それにより、 REQUIREJS を使用しているときにコントローラーを使用します。

Dan Wahlin が似たようなものを持っていることは知っていますが、彼は main.js ファイルにコントローラーをハードコーディングしています。テンプレート & コントローラー.

これは私が得ているエラーです:

エラー: [ng:areq] 引数 'MyDashboardCtrl' は関数ではありません 。

問題は、デフォルト ルートとして ui-router にあるにもかかわらず、ダッシュボード コントローラーがキャッシュされていないことです。

ui-view="container"を介して Dashboard.html が表示されている間、コントローラーはキャッシュされていません。

ここに画像の説明を入力

main.js:

require.config({

baseUrl: "/app",
paths: {
    'app' : '/app/app',
    'jquery': '/vendor/jquery/dist/jquery.min',
    'angular': '/vendor/angular/angular',
    'angular-bootstrap': '/vendor/angular-bootstrap/ui-bootstrap-tpls.min',
    'angular-breeze': '/vendor/breeze.js.labs/breeze.angular',
    'angular-cookies': '/vendor/angular-cookies/angular-cookies.min',
    'angular-resource': '/vendor/angular-resource/angular-resource.min',
    'angular-route': '/vendor/angular-route/angular-route.min',
    'angular-sanitize': '/vendor/angular-sanitize/angular-sanitize.min',
    'angular-touch': '/vendor/angular-touch/angular-touch.min',
    'angular-ui-router':'/vendor/angular-ui-router/release/angular-ui-router.min',
    'angular-ui-tree':'/vendor/angular-ui-tree/angular-ui-tree.min',
    'angularAMD': '/vendor/angularAMD/angularAMD.min',
    'bootstrap':'/vendor/bootstrap/dist/js/bootstrap.min',
    'breeze':'/vendor/breeze/breeze.min',
    'breeze-directives':'/vendor/breeze.js.labs/breeze.directives',
    'highcharts':'/vendor/highcharts/highcharts',
    'highchartsng':'/vendor/highcharts/highcharts-ng',
    'moment': '/vendor/moment/min/moment.min',
    'ngload': '/vendor/ng-load/ng-load',
    'q': '/vendor/q/q',
    'spin': '/vendor/javascripts/jquery.spin',
    'toastr': '/vendor/toastr/toastr.min',
    'tweenMax':'/vendor/greensock/src/minified/TweenMax.min',
    'underscore':'/vendor/underscore/underscore.min'
},

// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
    angular: {
        exports: "angular"
    },
    'angularAMD': ['angular'],
    'angular-ui-router':['angular'],
    'highchartsng': {deps:['highcharts']},
    'bootstrap': {deps:['jquery']},
    'toastr': {deps:['jquery']}
},

// kick start application
deps: ['app'] });

app.js:

define(['angularAMD', 'angular-ui-router', 'config/common', 
            'layout/services/dBoardSvc', 'localize/LangSettings.Svc'], 
function (angularAMD, common, dBoardSvc, LangSettingsSvc) {

var $stateProviderRef = null;
var $urlRouterProviderRef = null;

var app = angular.module("anuApp", ['ui.router'])
    /* @ngInject */
    .config(function ($locationProvider, $urlRouterProvider, $stateProvider) {
        $urlRouterProviderRef = $urlRouterProvider;
        $stateProviderRef = $stateProvider;
        $locationProvider.html5Mode(false);
        $urlRouterProviderRef.otherwise('/')
    })
    /* @ngInject */
    .run(function($q, $rootScope, $state, $window, common, dBoardSvc, LangSettingsSvc){
        // set initial current language
        LangSettingsSvc.currentLang = LangSettingsSvc.languages[0];
        dBoardSvc.all().success(function (data) {
            var startUp = undefined;
            angular.forEach(data, function (value) {
                var tmp = 6;
                angular.forEach(value.viewGroups, function (viewGroup, key) {
                    angular.forEach(viewGroup.viewStates, function (viewState, key) {
                        var viewStateUrl = undefined;
                        if (viewState.isStartUp == true && startUp == undefined) {
                            startUp = viewState.name;
                        }

                        if (viewState.url != '0') {
                            viewStateUrl = viewState.name + "/:moduleId";
                        }

                        var state = {
                            "url": viewStateUrl,
                            "parent": viewState.parentName,
                            "abstract": viewState.isAbstract,
                            "views": {}
                        };

                        angular.forEach(viewState.views, function (view) {
                            state.views[view.name] = {
                                controller: view.controllerName,
                                templateUrl: common.appRoot +  view.templateUrl + '.html',
                                controllerUrl: common.appRoot +  view.controllerUrl + '.js'
                            };

                        });
                        $stateProviderRef.state(viewState.name, angularAMD.route(state));
     --------->>>>>>>>>>>>>>>>>  **console.log(state);**
                    });
                });
            });
            $state.go(startUp);
        });
    });
// Bootstrap Angular when DOM is ready    
angularAMD.bootstrap(app);
return app; });

ここに画像の説明を入力

ダッシュボードCtrl:

define(['app'], function (app) {
'use strict';

app.register.controller('MyDashboardCtrl', MyDashboardCtrl);

/* @ngInject */
function MyDashboardCtrl($scope){
    $scope.pageTitle = 'MyDashboardCtrl';
};

});

結論：

これは問題を解決するための時間でしょうか? 私は文字通りここでストローをつかんでいます。

4

1 に答える 1

2

問題は私のコントローラーにありました。以下は正しいアプローチです：

define(['angularAMD'], function (app) {
'use strict'

 /* @ngInject */  
app.controller('MyDashboardCtrl', MyDashboardCtrl);
function MyDashboardCtrl($scope) {
    $scope.pageTitle = 'This controller now loads dynamically';
};

// MyDashboardCtrl.$inject = ['$scope']; 
});

私のアプリでは、ベンダー ファイル以外に何もハード コードされていません。私のコントローラー、ビュー、およびサービスはすべて動的で承認ベースです!!!

ここに画像の説明を入力

動的ルートでrequirejsを利用できることの意味は、1つだけではないことを意味するため、これが他の人に役立つことを願っています:

  1. ビューが必要とするものだけに javaScript を最小限に抑えますが、動的ビューとログインを組み合わせることで、

  2. それぞれのユーザーがアクセスする権限を持たないすべてのクライアント側スクリプトを効果的に隠すことができます。

最近は「Hello World」以上の例があればいいのに ;(

于 2014-10-25T21:50:33.263 に答える