AngularJS + RequireJS:模块已创建但从未加载 - 空白页面

时间:2015-11-02 10:31:14

标签: angularjs requirejs

我遵循本教程(https://www.startersquad.com/blog/angularjs-requirejs/)以使用AngularJS + RequireJS构建应用程序;我面临的问题是,我没有任何错误,只是一个空白页面.. 在提示中,我可以看到我的所有模块(包括ui-router和app):'模块已创建但从未加载' ...

我无法看到我做错了什么,以及为什么没有加载任何东西;调用angular.bootstrap,我可以看到日志。

这是我的架构:

enter image description here

main.js

require.config({
    // Alias libraries paths
    paths: {
        'domReady': './app/bower_components/requirejs-domready/domReady',
        'angular': './app/bower_components/angular/angular',
        'uiRouter': './app/bower_components/angular-ui-router/release/angular-ui-router'
    },

    // To support AMD
    shim: {
        'angular': {
            exports: 'angular'
        },

        'uiRouter': {
            deps: ['angular']
        }
    },

    // Kick start application
    deps: ['./bootstrap']
});

bootstrap.js

/**
  * Bootstraps Angular onto the window.document node
  */
define([
    'require',
    'angular',
    'uiRouter',
    'app',
    'routes'
], function(require, ng) {
    'use strict';

    require(['domReady!'], function(document) {
        console.log('document is ready : ' + document);
        ng.bootstrap(document, ['app']);
        console.log('after bootstrap');
    });
});

app.js

define([
    'angular',
    'uiRouter',
    './app/components/index'
], function(ng) {
    'use strict';

    return ng.module('app', [
        'app.components',
        'ui.router'
    ]);
});

routes.js

define(['./app'], function(app) {
    'use strict';

    return app.config([
        '$stateProvider',
        '$urlRouterProvider',

        function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: '/javascripts/app/components/home/views/home.html',
                    controller: 'MainCtrl',
                    resolve: {
                        contactPromise: ['contacts', function(contacts) {
                            return contacts.getAll();
                        }]
                    }
                })

                .state('contacts', {
                    url: '/contacts',
                    templateUrl: '/javascripts/app/components/contact/views/list.html',
                    controller: 'ContactsListCtrl',
                    resolve: {
                        contactPromise: ['contacts', function(contacts) {
                            return contacts.getAll();
                        }]
                    }
                })

                .state('contacts_show', {
                    url: '/contacts/{id}',
                    templateUrl: '/javascripts/app/components/contact/views/show.html',
                    controller: 'ContactsShowCtrl',
                    resolve: {
                        contact: ['$stateParams', 'contacts', function($stateParams, contacts) {
                            return contacts.get($stateParams.id);
                        }]
                    }
                });

            $urlRouterProvider.otherwise('home');
        }
    ]);
});

应用/组件/ index.js

define([
    './contact/index',
    './home/index'
], function() {});

应用/组件/ module.js

define(['angular'], function(ng) {
    'use strict';

    return ng.module('app.components', []);
});

应用/组件/接触/ index.js

define([
    './controllers/ContactsControllers',

    './services/contactFactory'
], function() {});

应用/组件/接触/ module.js

define(['angular', '../module'], function(angular, module) {
    'use strict';

    return angular.module('app.components.contact', []);
});

app / components / contact / controllers / ContactsControllers.js (例如)

define(['../module'], function(module) {
    'use strict';

    module.controller('ContactsListCtrl', [
        '$scope',
        'contacts',

        function($scope, contacts) {
            $scope.contacts = contacts.contacts;

            $scope.addContact = function() {
                if (!$scope.name || $scope.name === '' || !$scope.firstname || $scope.firstname === '') {
                    return;
                }

                contacts.create({
                    name: $scope.name,
                    firstname: $scope.firstname,
                    dynamicField: 'test'
                });

                $scope.name = '';
                $scope.firstname = '';
            };
        }
    ]);

    module.controller('ContactsShowCtrl', [
        '$scope',
        'contacts',
        'contact',

        function($scope, contacts, contact) {
            $scope.contact = contact;
        }
    ]);
});

有什么想法吗?

编辑:我的angularjs由nodejs服务器提供服务,也许它改变了一些东西.. 这是我的index.ejs:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <title>Troubadour : Prenez votre groupe en main !</title>

        <!--
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
        -->
    </head>

    <body>
        <div class="container-fluid">
            <ui-view></ui-view>
        </div>
        <!-- .container-fluid -->

        <script src="/javascripts/app/bower_components/requirejs/require.js" data-main="/javascripts/main.js"></script>
    </body>
</html>

0 个答案:

没有答案