Question

我想在require.js的标题中加载或资源。我怎样才能做到这一点？这是我的控制器和索引的当前代码。我是angularjs的新手，非常感谢你帮助解决这个挑战。

Require.js：位于js / require.js

require.config({
    baseUrl: "js",    
    paths: {
        'angular': '.../lib/angular.min',
        'angular-route': '.../lib/angular-route.min',
        'angularAMD': '.../lib/angular-animate.min.js'
    },
    shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] },
    deps: ['app']
    });

的index.html：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>App Demo</title>
 <script data-main="js/main" src="js/require.js"></script>
 <script src="js/controllers.js"></script>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="main" ng-view></div>
</body>
</html>

App.js：

define(function () {
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);

myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListContrIndex.htmloller'
}).
when('/details/:itemId', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);
  return app;
  });

Controller.js：

define(['app'], function (app) {
var artistControllers = angular.module('artistControllers', ['ngAnimate']);

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);

artistControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.whichItem = $routeParams.itemId;

if ($routeParams.itemId > 0) {
  $scope.prevItem = Number($routeParams.itemId)-1;
} else {
  $scope.prevItem = $scope.artists.length-1;
}

if ($routeParams.itemId < $scope.artists.length-1) {
  $scope.nextItem = Number($routeParams.itemId)+1;
} else {
  $scope.nextItem = 0;
}

});
}]);

}）;

Answer 1

使用data-main="path/file.js"指定要加载脚本的文件..

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

Answer 2

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>App Demo</title>
 <script data-main="js/main" src="js/require.js"></script>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="main" ng-view></div>
</body>
</html>

并在main.js

中

    require.config({
        baseUrl: "js",    
        paths: {
            'angular': '.../lib/angular.min',
            'angular-route': '.../lib/angular-route.min',
            'angularAMD': '.../lib/angular-animate.min.js'
        },
        shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] },
        deps: ['app']
        });

require(['requireModule,'requireModule2'],function(requireModule,requireModule2){
//code to start the application
})

您的代码不允许通过requirejs启动应用程序。您需要define AngularJS Components as RequireJS Modules

Answer 3

RequireJS加载相对于baseUrl的所有代码。 baseUrl通常设置为与要为页面加载的顶级脚本的data-main属性中使用的脚本相同的目录。 data-main属性是require.js将检查以启动脚本加载的特殊属性。此示例最终将使用baseUrl脚本：

<!--This sets the baseUrl to the "scripts" directory, and
loads a script that will have a module ID of 'main'-->
<script data-main="scripts/main.js" src="scripts/require.js"/>

有关详细信息，请查看Loading JS Files - Require.js

使用require.js加载资源

3 个答案: