如何使用AngularJS和RequireJS解决项目的依赖关系?

时间:2017-02-22 20:45:47

标签: javascript angularjs requirejs require

我有一个简单的AngularJS应用程序,我试图重构使用RequireJS。

由于控制器和服务是异步加载的,我无法在index.html中使用ng-app。

以下是我的main.js

require.config({
    paths: {
        "angular": '../../bower_components/angular/angular',
        "angularCookies": '../../bower_components/angular-cookies/angular-cookies'
    },
    shim: {
        angular: {
            exports: "angular"
        },
        angularCookies : {
            deps: ["angular"]
        }
    }
});

require(['angular', './login/js/login'],
    function (angular) {
        angular.bootstrap(document, ['loginApp']);
    }
);

我的login.js是我定义角度模块的地方。 以下是我的login.js

'use strict';
define(['angular',
        'angularCookies',
        './login.controller'],
    function(angular, angularCookies, loginController) {
    angular.module('loginApp', [
            'ngCookies'])
        .config(['$cookiesProvider',
            function($cookiesProvider) {
              $cookiesProvider.defaults.path = '/';
              $cookiesProvider.defaults.domain = 'localhost';
            }
        ])
        .run(['$cookies',
            'loginService',
            function($cookies, loginService) {

            }
        ]).controller(loginController);
});

如图所示,它取决于loginControllerloginController取决于loginService

我的loginService定义为 -

"use strict";

define(['angular',
        'angularCookies'],

    function (angular, angularCookies) {

        var loginService = angular.module('loginApp')
            .factory('loginService', [
                '$http',
                '$cookies',
                function ($http, $cookies) {

                    // My functions and other code here.

                }]);
        return loginService;
    });

使用此配置我收到错误 - Module 'loginApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我在这里缺少什么? 我需要做什么配置才能做到正确?

1 个答案:

答案 0 :(得分:0)

我看到了几个问题。首先,不应该在登录内创建应用程序。该应用程序是所有控制器和服务的基础。

因此,我会将应用创建移至另一个名为api_instance = kubernetes.client.CoreV1Api() namespace = 'default' manifest = { "kind": "Service", "apiVersion": "v1", "metadata": { "name": "node-js-service" }, "spec": { "selector": { "app": "node-js" }, "ports": [ { "protocol": "TCP", "port": 80, "targetPort": 8000 } ] } } try: api_response = api_instance.create_namespaced_service(namespace, manifest, pretty=true) pprint(api_response) except ApiException as e: print("Exception when calling CoreV1Api->create_namespaced_endpoints: %s\n" % e) 的文件。

然后在我的require config中:

app.js

shim: {
    'app': {
        deps: ['angular', 'angular-route', 'angularCookies']
    },
    angularCookies : {
        deps: ["angular"]
    }
}

然后你的控制器将是:

require
(
    [
        'app'
    ],
    function(app)
    {
        angular.bootstrap(document, ['loginApp']);
    }
);