0

我正在尝试使用 angularjs、ui-router 和 requirejs 制作一个示例应用程序来延迟加载我的控制器。它在本地运行良好，但我想为生产环境编写 requirejs 优化器，为此尝试使用 grunt:requirejs 工具，但它对我不起作用。它甚至没有给出任何脚本加载错误或其他东西..

<--index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
  <head>
  </head>

  <body class="no-padding">
    <div data-ui-view="header"></div>
    <div data-ui-view="module"></div>
    <script data-main="app/main" src="bower_components/requirejs/require.js"></script>
  </body>

</html>


//main.js
require.config({
    baseUrl: "",
    // Paths for just the core application and its controllers/factories/services
    paths: {
            "jquery": "bower_components/jquery/dist/jquery",
        "angular":                    "bower_components/angular/angular.min",
        "angular-ui-router":          "bower_components/angular-ui-router/release/angular-ui-router.min",
          "app":                        "app/app",
        "underscore":                 "node_modules/underscore/underscore-min",
    },


  shim: {
        //Tell requirejs to pipe in angular"s return variable as "angular"
    "angular": {
      exports: "angular"
    },
  },
    // Say we have a dep on App, so it gets loaded
  deps: ["app", 'lib']
});

//lib.js
define([
  'jquery',
  'underscore',
], function($){
});


//app.js
define([
  'angular',
  'angular-ui-router'
], function(){
  var app = angular.module('app', ['ui.router']);


  //lazy loading
  var loadController = function(path){
    return ['$q', function($q){
      var defered = $q.defer();
      require([path], function(){
        defered.resolve();
      });
      return defered.promise;
    }]
  };


  app.config(['$controllerProvider',  function($controllerProvider){
    app.registerController = $controllerProvider.register;
  }]);


  app.config(['$stateProvider',  function($stateProvider){
    //registering controller
    // defining states
    $stateProvider.state('app', {
      url: '/',
      views: {
        'header':{
          templateUrl:"<div>{{title}}</div>",
          controller:"appCtrl"
        },
        'module':{
          template:"<div>{{title}}</div>",
          controller:"homeCtrl"
        }
      },
      resolve: {
         loadApp: loadController('../app/controllers/header'),
         loadHome: loadController('../app/controllers/home')
      }
    });
  }]);
  angular.bootstrap(document, ['app']);
  return app;
});

//home.js

define(function(){
  angular.module('app').registerController('homeCtrl', ['$scope', '$state', function($scope,$state){
    $scope.title = 'CONTENT';
  }]);
});

//header.js
define(function(){
   angular.module('app').registerController('appCtrl', ['$scope', '$state', function($scope,$state){
     $scope.title = 'HEADER';
   }]);
});

我正在使用 grunt:requirejs 任务来编译优化的 dist 文件“main.js”和 grunt 副本以在 dist 目录中修改 index.html：

grunt:requirejs 并修改 index.html -->

grunt.initConfig({
  //...
  requirejs: {
  compile: {
    options: {
      name: 'node_modules/almond/almond',
      mainConfigFile: 'app/main.js',
      out: 'dist/main_opt.js',
      baseUrl: './'
    }
  }
},
  //...
})

<--dist/index.html--!>
<!DOCTYPE html>
<html style="overflow-x:hidden">
  <head>
  </head>

  <body class="no-padding">
    <div data-ui-view="header"></div>
    <div data-ui-view="module"></div>
    <script src='bower_components/requirejs/require.js'></script>
<script>
        require.config({
            paths: {
                //Comment out this line to go back to loading
                //the non-optimized main.js source file.
                "main_opt": "dist/main_opt"
            }
        });
        require(["main_opt"]);
    </script>
  </body>

</html>

加载 dist/index.html 时它什么也没给我，浏览器中没有错误，只是不起作用，如果它给我控制器的脚本加载错误，它可能有任何意义，但它没有。这里完全没头绪。。

4

1 回答 1

0

main.js 文件中没有任何要求。您必须至少要求在路径中声明的文件之一。执行以下操作：

require(['app'], function () {
    console.log('app required successfully');
});

将这行代码放在您的 main.js 文件中。我希望它可以帮助找到错误：

requirejs.onError = function (err) {
    console.error('[require error] type: ', err.requireType, ' ,modules: ' + err.requireModules);
    throw err;
};
于 2016-01-04T20:22:29.220 回答