2

介绍：

我认识到这真的很深，我可能不会在这里得到任何帮助，但我已经用尽了整个互联网的解决方案。

简而言之，我想让我的 ui-router 动态化，并使用控制器，同时使用 REQUIREJS。

我知道 Dan​​ Wahlin 有类似的东西，但他在 main.js 文件中硬编码了他的控制器，我更愿意让与 $state.routes 相关的所有内容都来自数据库，即。模板和控制器。

这是我得到的错误：

错误：[ng:areq] 参数“MyDashboardCtrl”不是函数，未定义 http://errors.angularjs.org/1.2.9/ng/areq?p0=MyDashboardCtrl&p1=not%20aNaNunction%2C%20got%20undefined

我知道问题是仪表板控制器没有被缓存，即使它在 ui-router 作为默认路由。

当 Dashboard.html 出现时，通过ui-view="container"，控制器没有被缓存。

在此处输入图像描述

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

应用程序.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; });

在此处输入图像描述

仪表板控件：

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. 将 JavaScript 最小化为视图所需的内容，但通过将其与动态视图和登录相结合，

  2. 可以有效地隐藏各个用户可能无权访问的所有客户端脚本。

我只是希望这些天的例子不仅仅是“Hello World”；（

于 2014-10-25T21:50:33.263 回答