Question

尝试使用requirejs将angularjs实现模块化加载。很难理解requirejs及其配置选项。这是我到目前为止所拥有的。我的问题在下面

的index.html

<!DOCTYPE HTML>
<html>
<head>
    <link href="app/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="app/css/style.css" rel="stylesheet"> 
    <script data-main="app/main.js" src="app/vendor/require/require-2.1.11.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <div ng-include="flexyLayout('header')"></div>
        <div ng-view id="content"></div>
        <div ng-include="flexyLayout('footer')"></div>
    </div>
</body>
</html>

main.js

require.config({
    paths: {
        'angular': 'vendor/angular/angular.min',
        'angular-route': 'vendor/angular/angular-route.min',
        'angular-cookies': 'vendor/angular/angular-cookies.min'
    },
    shim: {
        angular: {
            exports: 'angular'
        },
        'angular-route' : {
            exports : 'angular',
            deps : ['angular']
        },
        'angular-cookies' : {
           deps : ['angular']
        }
    }
});

require(
    [
        'angular',
        'app',
        'module/login/login',
        'services/services'
    ],
    function(angular, app) {
        'use strict';
        angular.bootstrap(document, ['myApp']);
    });

app.js

define(['angular', 'angular-route'], function(angular) {
    var app = angular.module("myApp", ['ngRoute']);

    app.config(function ($routeProvider,$httpProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/module/public/index.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/login', {
                templateUrl: 'app/module/login/login.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/home', {
                templateUrl: 'app/module/home/home.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/register', {
                templateUrl: 'app/module/register/register.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .when('/admin', {
                templateUrl: 'app/module/admin/admin.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html',
                permission: 'admin'
            })
            .when('/unauthorized', {
                templateUrl: 'app/partials/unauthorized.html',
                header: 'app/partials/header.html',
                footer: 'app/partials/footer.html'
            })
            .otherwise({redirectTo: '/'});
    });

    return app;
});

login.js

define(['app','services/services'], function (app) {
    app.controller('LoginCtrl', function($scope,AuthenticatorService,CookieService,$window,$location) {
        $scope.user = {};

        $scope.login = function() {
            AuthenticatorService.authenticate($scope.user).then(function(response){
                if(response.authentication) {
                    CookieService.saveLoginData(response.user);
                    $window.location.href = $location.absUrl()+'home';
                }else {
                    $scope.error = response.message;
                    $scope.user = {};
                }
            });
        }
    });
});

问题：

angularjs cookies文件没有加载，因为我收到了未知的提供程序错误。当我检查元素时，我可以看到angularjs和angular-route js文件已加载但不是angularjs cookie文件。 shim选项中的angular-cookies选项设置是否不正确？
如何加载服务和指令？我的services.js文件位于services文件夹中。我是否通过在require中调用它来正确加载它？我可以在paths的{{1}}选项中加载services.js文件吗？
我在这里阅读了一些帖子，但没有清楚地了解如何使用requirejs加载模块化文件。例如，我有不同的模块，如登录，管理，注册等。如何使用requirejs加载单个模块js文件。以下是我的根文件夹结构

My App root directory structure

如果有人能用代码解释我，我将不胜感激。如果您需要任何其他细节，请告诉我并抱歉这么长的帖子。暂时无法解释

Answer 1

angularjs cookies文件未加载：您必须从某个地方要求它（或使用deps中的require.config()配置选项）。为它提供垫片不自动要求它。
将services.js加载为define([...,'services/services'],...)似乎没问题。它不加载吗？你还有其他问题吗？

另一方面，paths配置是一种提供别名的方法（可以这么说）。与shim一样，它不会自动加载内容。
要加载单个模块，您必须从某个地方需要它们。使用Angular，这可能会导致尴尬的情况，如：
```
define(["module1","module2","module3",...,"module1024"], function() {
    // do nothing but load all the modules
});
```

我正在尝试将AngularJS + RequireJS +优化器组合起来（请参阅angular-require-lazy和require-lazy）。角度要求懒惰的项目远非完整，但它可能会给你一些想法。（我即将对它进行一些重大改动，现在就对抗一些错误，但总的想法仍然存在。）

另外作为旁注：也许你应该暂停一下，熟悉一下需要，一个小的测试项目或其他东西......

有关angularjs + requirejs的问题

1 个答案: