Question

我正在学习实现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模块”。

Answer 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了解一些可能有用的想法。

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

1 个答案: