使用 require.js 加载控制器 js 文件答案

【问题标题】：Loading controller js files using require.js使用 require.js 加载控制器 js 文件
【发布时间】：2014-11-04 06:30:41
【问题描述】：

我正在学习实现 require.js 以加载必要的 javascript 文件。我可以使用 require.js 来加载 java 脚本文件，它可以代替 <script> 标签。即使我能够加载 js 文件，文件中的内容也无法访问，并且出现“找不到 CarApp 模块”的错误消息。这会有什么不同？

我的 index.html 我加载 require.js 的地方

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My App</title>
<link rel="stylesheet" href="/vendor/bootstrap-2.3.1/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="/css/style.css" media="screen">
<script src="/vendor/angularjs-1.0.5/angular.min.js"></script>
<script src="/vendor/angularjs-1.0.5/angular-resource.min.js"></script>

<script data-main="/js/main" src="/js/require.js"></script>

<div ng-app="CarApp" class="containr">
  <div ng-view>
    <!-- partial will go here -->
  </div>
</div>

/js/main.js

requirejs.config({
    paths: {
        controllers: './controllers',
        app: './app'
    }
});
requirejs(['controllers', 'app'],
function   (controller, app) { });

/js/app.js

var CarApp = angular.module('CarApp', ['ngResource'])

CarApp.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/', {controller: ListCtrl, templateUrl: '/partials/list.html'}) 
    .otherwise({redirectTo: '/'})
    $locationProvider.html5Mode(true)
})

使用 require.js 加载 app.js 文件后，无法访问 app.js 中的“CarApp”模块。为什么会这样？如何通过 main.js 访问“CarApp 模块”。

【问题讨论】：

标签： angularjs requirejs

【解决方案1】：

您使用 RequireJS 加载的文件不会在页面就绪事件（Angular 尝试引导的时间）上加载。这就是找不到 CarApp 模块的原因。

您应该手动引导 Angular (ref)：

删除ng-app 指令，将其替换为id：

<div id="mainContainer" class="containr">

在main.js 中手动引导：

requirejs(['controllers', 'app'], function(controller, app) {
    angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById('mainContainer'), ['myApp']);
    });
});

还可以查看angular-require-lazy 了解一些可能有用的想法。

【讨论】：

感谢您提供的好信息。这些更改不仅像以前一样加载文件，而且还进入了 app.js。我想知道的一件事是，一旦进程在 var CarApp = angular.module('CarApp', ['ngResource']) 行之后立即进入 app.js，程序就不会进入 CarApp.config 来处理路由。我也没有在控制台中看到任何错误..如何找到它没有进入 CarApp.config 的原因