Angularjs app.js中的角度初始化错误

因此，我正试图跳上AngularJS的潮流，我的任务是构建一个SPA，为此我选择了带有ASP.NETMVCWebAPI的AngularJS（我是一名.Net开发人员）。作为强类型语言的粉丝，在我的职业生涯中，我一直尽可能避免使用javascript，但近年来像AngularJS和其他库和插件这样的框架让我无法忽视它。所以我在这里，请求一些指导

我观看了教程，完成了示例代码项目，并在PluralSight上进行了一些学习，至少从基础的角度来看，我的工作是有效的。我有丰富的MVVM和MVC背景，所以SOC对我来说是件大事。我喜欢Angular提供的MVC类型的结构，这就是为什么我首先选择这条路线的原因

现在让我谈谈我的问题。我（目前）正在母版页（_Layout.cshtml）中初始化模块，为了简单起见，我在调整和试验时进行了初始化

<script>
    angular.module('xcmApp', ['ngRoute', 'ngResource'])
        .config(function ($routeProvider) {
            $routeProvider
            .when('/',
            {
                controller: 'companiesController',
                templateUrl: 'views/companylist.html'
            })
            .when('/Reports',
            {
                controller: 'reportsController',
                templateUrl: 'views/reportlist.html'
            })
            .otherwise({ redirectTo: '/' })
        })
        .factory('companiesFactory', ['$resource',
            function ($resource) {
                return $resource('/api/companies', {}, {
                    query: { method: 'GET', params: {}, isArray: true }
                });
            }
        ])
        .controller('companiesController', function ($scope, companiesFactory) {
            $scope.Companies = companiesFactory.query();
    });

</script>

提醒:

---

我的问题不是它不起作用，它确实起作用。当我从HTML页面中取出Javascript并将其放入引用的app.js文件时，它就会停止工作。

返回文档。您使用了一种定义应用程序的糟糕方法。尝试：

var MyApp = angular.module( 'MyApp', ['ngRoute' , 'ngSanitize']) ;

然后使用

MyApp

添加控制器、过滤器等

编辑：

---

顺便说一句，在SPA的单独文件中编写Java脚本是一种很好的做法（我想你不是在写一个小项目）。

我没有ASP.net背景，但我认为回答你的问题并不重要

首先像这样声明您的模块：

angular.module('myModule', []);

angular.module('myModule').controller/foactory/....

//xcmApp.module.js
angular.module('xcmApp', ['ngRoute', 'ngResource']);

//xcmApp.config.js
angular.module('xcmApp').config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'companiesController',
                templateUrl: 'views/companylist.html'
            })
        .when('/Reports',
            {
                controller: 'reportsController',
                templateUrl: 'views/reportlist.html'
            })
        .otherwise({redirectTo: '/'})
});

//xcmApp.factory.js
angular.module('xcmApp').factory('companiesFactory', ['$resource',
    function ($resource) {
        return $resource('/api/companies', {}, {
            query: {method: 'GET', params: {}, isArray: true}
        });
    }
]);

//xcmApp.controller.js
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) {
    $scope.Companies = companiesFactory.query();
});

<script src="/*path to angular*/"></script>
<script src="/*path to ngRoute*/"></script>
<script src="/*path to ngResource*/"></script>

<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first
<script src="/*path to xcmApp.config.js*/"></script>
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case
<script src="/*path to xcmApp.controller.js*/"></script>

然后让他们按如下方式订购文件：

angular.module('myModule', []);

angular.module('myModule').controller/foactory/....

//xcmApp.module.js
angular.module('xcmApp', ['ngRoute', 'ngResource']);

//xcmApp.config.js
angular.module('xcmApp').config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'companiesController',
                templateUrl: 'views/companylist.html'
            })
        .when('/Reports',
            {
                controller: 'reportsController',
                templateUrl: 'views/reportlist.html'
            })
        .otherwise({redirectTo: '/'})
});

//xcmApp.factory.js
angular.module('xcmApp').factory('companiesFactory', ['$resource',
    function ($resource) {
        return $resource('/api/companies', {}, {
            query: {method: 'GET', params: {}, isArray: true}
        });
    }
]);

//xcmApp.controller.js
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) {
    $scope.Companies = companiesFactory.query();
});

<script src="/*path to angular*/"></script>
<script src="/*path to ngRoute*/"></script>
<script src="/*path to ngResource*/"></script>

<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first
<script src="/*path to xcmApp.config.js*/"></script>
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case
<script src="/*path to xcmApp.controller.js*/"></script>

因此，您的代码应该如下所示：

angular.module('myModule', []);

angular.module('myModule').controller/foactory/....

//xcmApp.module.js
angular.module('xcmApp', ['ngRoute', 'ngResource']);

//xcmApp.config.js
angular.module('xcmApp').config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'companiesController',
                templateUrl: 'views/companylist.html'
            })
        .when('/Reports',
            {
                controller: 'reportsController',
                templateUrl: 'views/reportlist.html'
            })
        .otherwise({redirectTo: '/'})
});

//xcmApp.factory.js
angular.module('xcmApp').factory('companiesFactory', ['$resource',
    function ($resource) {
        return $resource('/api/companies', {}, {
            query: {method: 'GET', params: {}, isArray: true}
        });
    }
]);

//xcmApp.controller.js
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) {
    $scope.Companies = companiesFactory.query();
});

<script src="/*path to angular*/"></script>
<script src="/*path to ngRoute*/"></script>
<script src="/*path to ngResource*/"></script>

<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first
<script src="/*path to xcmApp.config.js*/"></script>
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case
<script src="/*path to xcmApp.controller.js*/"></script>

编辑：

关于这个错误，请记住您的依赖项必须是正确的顺序。 因此，您的index.html（假设您使用了脚本加载程序，但尚未使用脚本加载程序）应该如下所示：

angular.module('myModule', []);

angular.module('myModule').controller/foactory/....

//xcmApp.module.js
angular.module('xcmApp', ['ngRoute', 'ngResource']);

//xcmApp.config.js
angular.module('xcmApp').config(function ($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'companiesController',
                templateUrl: 'views/companylist.html'
            })
        .when('/Reports',
            {
                controller: 'reportsController',
                templateUrl: 'views/reportlist.html'
            })
        .otherwise({redirectTo: '/'})
});

//xcmApp.factory.js
angular.module('xcmApp').factory('companiesFactory', ['$resource',
    function ($resource) {
        return $resource('/api/companies', {}, {
            query: {method: 'GET', params: {}, isArray: true}
        });
    }
]);

//xcmApp.controller.js
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) {
    $scope.Companies = companiesFactory.query();
});

<script src="/*path to angular*/"></script>
<script src="/*path to ngRoute*/"></script>
<script src="/*path to ngResource*/"></script>

<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first
<script src="/*path to xcmApp.config.js*/"></script>
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case
<script src="/*path to xcmApp.controller.js*/"></script>

//必须首先设置应用程序模块
//在您的情况下，必须在控制器之前

看起来您在控制器定义中缺少了一些与依赖项注入相关的声明

在发布特定代码和修复之前，我想先介绍一个有用的依赖项注入问题故障排除工具。Angular有一个内置指令

ng strict di

。本指令是

ng app

的配套指令。从：

如果app元素上存在此属性，则将在“严格di”模式下创建喷油器。这意味着应用程序将无法调用不使用显式函数注释（因此不适合缩小）的函数，如中所述，并且有用的调试信息将有助于跟踪这些错误的根源

现在，转到您帖子中的代码：

控制器未使用显式函数批注。在显式函数注释中，传递依赖项的字符串数组，后跟函数。这确保了即使缩小要重命名函数参数，Angular仍然可以识别提供给函数的依赖项。您在部分代码中使用了显式注释，但控制器定义中缺少该注释

这非常容易识别，有

错误：[$injector:unpr]未知提供程序：a

，即使您从未定义名为

a

的提供程序

ng strict di

将标记此控制器代码

以下是当前代码和建议的修复

而不是：

.controller('companiesController', function ($scope, companiesFactory) {

尝试：

---

感谢您的回复，但即使按照您的建议定义模块，也会导致我上面提到的错误：您使用的是Angular的缩小版本吗？如果您使用angular.js的未统一版本，您会得到一个更详细的错误，可以帮助您解决。我使用未统一的angular://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js我将CDN用于angular库，因此我的HTML主机页的头部有以下引用：。至于其他JS引用，我使用Grunt组合并缩小我的脚本，因此所有源脚本最终都会缩小到app.JS输出文件中。我很确定这不是我犯错误的原因。为什么我的答案会被否决？我在这里学习和分享知识。因此，如果这个答案是错误的，请告诉我原因。我按照建议更改了控制器声明，当我将脚本从HTML页面移到引用的app.js中时，结果是相同的。我能够获得整个堆栈跟踪，这对于我有限的角度（当然是JS）曝光来说不是很有价值，但可能对你有意义：（评论太长，我将编辑OP）你也没有在

.config

块中使用此表单；你能试着改变一下，同时检查一下

ng strict di

是否提供了新的信息吗？