Question

如何访问在其他.js文件中定义的角度模块？

背景：

我开始使用角度js编程（在ASPNET MVC应用程序中）入门指南。

为了清楚起见，我在名为AspnetMvcAngular.js文件的文件中创建了一个角度模块。

var AspnetMvcAngularJs = angular.module('AspnetMvcAngularJs', []);

然后，我将角度控制器代码定义在不同的文件中（Scripts / Controllers / HomeController.js）

AspnetMvcAngularJs.controller('HomeController', ['$scope', function ($scope) { $scope.greeting = 'Hola!'; }]);

当应用运行时，它似乎无法识别AspnetMvcAngularJs。

关于我在这里做错了什么的指示？

修改虽然以下答案非常好，但我注意到了一些至关重要的问题。

访问文件的顺序很重要

E.g。我在ASP.NET-MVC中使用了bundles，顺序应如下所示：

bundles.Add(new ScriptBundle("~/bundles/definitions"). Include("~/Scripts/AspnetMvcAngularJs.js"). IncludeDirectory("~/Scripts/Controllers", "*.js"));

这首先定义包含*.js的{{1}}文件，然后包含其他angular module控制器文件。

我犯的错误是首先调用控制器文件。因此，运行时抛出一个错误，指出没有这样的模块可用。

Answer 1

您可以使用相同的angular.module语法访问已定义的模块，但不指定模块的依赖关系。在这种情况下，您将返回已定义的模块，然后您可以使用它来创建控制器或其他角度组件。

angular.module('AspnetMvcAngularJs').controller('HomeController',['$scope', function ($scope) {
    $scope.greeting = 'Hola!';
}]);)

Answer 2

以下是original angular doc on module：

的引用

创建与检索

请注意，使用angular.module('myModule',[])将创建模块myModule并覆盖任何现有模块   名为myModule。

使用angular.module('myModule')检索现有内容   模块。

angular.module()返回的内容，无论是使用创建语法还是检索语法，都是angular.Module类型的模块，其中方法controller(), service(), directive(), value(), factory()等都返回模块本身。因此，您可以将它们链接在一起，如下所示：

angular.module('myModule', []).
     value('a', 123).
     controller( 'myController', function( $scope ) {...})
     factory('a', function() { return 123; }).
     directive('directiveName', ...).
     filter('filterName', ...);

您也可以将模块分配给变量，然后通过变量访问模块：

var myModule = angular.module('myModule', []);
// add some directives and services
myModule.service('myService', ...);
myModule.directive('myDirective', ...);

模块创建和模块访问代码可以放在单独的文件中。

访问在不同.js文件

2 个答案: