Question

我正在尝试使用带角度的

我目前收到错误

Failed to instantiate module

例外网址开始

http://errors.angularjs.org/undefined/$injector/modulerr?

当我使用chrome dev工具查看我的源代码并展开我的脚本文件夹时，错误时出现的唯一文件是app / main.js。文件夹中没有任何内容：控制器，模块或路由。这会让我相信这是一个过早注射的情况（不是一个真正的术语）。

我试图减慢注射速度直到正确的时间，没有任何效果。

首先尝试

require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
     $(function () { // using jQuery because it will run this even if DOM load already happened
           angular.bootstrap(document, ['app']);
     });
});

第二次尝试

 require(['angular', 'app/modules/app'], function (angular, app) {
    var $html = angular.element(document.getElementsByTagName('html')[0]);
    angular.element().ready(function () {
        $html.addClass('ng-app');
        angular.bootstrap($html, [app.name]);
    });
 });

第三次尝试

  require(['angular', 'app/modules/app'], function (angular, app) {
     require(['Scripts/app/modules/app.js', 'Scripts/app/controller/controllers.js'],    function (app) {
          angular.bootstrap(document.body, [app]);
     })

  });

UDPATE

main.js

  require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
            'jquery': 'lib/require-jquery',
            'angular': 'lib/angular/angular.min',
            'angular-resource': 'lib/angular/angular-resource.min',
    },

    shim: {
            'angular': { 'exports': 'angular' },
            'angular-resource': { deps: ['angular'] },
            'jQuery': { 'exports': 'jQuery' },
    }
 });

 require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    //the above methods go here
 });

更新2

app.js

define([
        'angular',
        'app/controllers/controller',
        'lib/angular/angular-route'
], function (angular, controllers) {
    'use strict';

    var app = angular.module('app', [
            'app.controllers'
    ]);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
          when('/phones', {
            templateUrl: 'Templates/phone-list.html',
            controller: 'PhoneListCtrl'
          }).
          when('/phones/:phoneId', {
            templateUrl: 'Templates/phone-detail.html',
            controller: 'PhoneDetailCtrl'
          }).
          otherwise({
            redirectTo: '/phones'
          });
    }]);
    return app;
});

main.js

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'angular': { 'exports': 'angular' },
        'angular-resource': { deps: ['angular'] },
        'jQuery': { 'exports': 'jQuery' },
        'app/modules/app': 'angular'
    },
    dep: ['app']
});

require(['jquery', 'angular', 'app/modules/app'], function ($, angular, app) {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });
});

Answer 1

根据您的更新2，main.js和app.js应为：

<强> main.js

require.config({
    baseUrl: '/Scripts/',
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        'app': 'app/modules/app',
        'jquery': 'lib/require-jquery',
        'angular': 'lib/angular/angular.min',
        'angular-resource': 'lib/angular/angular-resource.min'
    },
    shim: {
        'app': ['angular','angular-resource'],
        'angular-resource': ['angular']
    },
    dep: ['app']
});

<强> app.js

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

    var app = angular.module('app', [
            'app.controllers'
    ]);
    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
          when('/phones', {
            templateUrl: 'Templates/phone-list.html',
            controller: 'PhoneListCtrl'
          }).
          when('/phones/:phoneId', {
            templateUrl: 'Templates/phone-detail.html',
            controller: 'PhoneDetailCtrl'
          }).
          otherwise({
            redirectTo: '/phones'
          });
    }]);

    angular.element(document).ready(function () {
        angular.bootstrap(document, ['app']);
    });

    return app;
});

由于我看不到你的所有代码，我创建了一个简单的plunker来说明应该做什么：
http://plnkr.co/edit/Mk2qHB8zUB28PDViNjv4?p=preview

尝试angularAMD。它应该让你的生活更轻松。

angular无法实例化模块

1 个答案: