访问在不同.js文件中定义的Angular模块

Access Angular module defined in a different .js file

本文关键字：定义 Angular 模块 文件 js 访问      更新时间：2023-09-26

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

背景：

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

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

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

然后，我在另一个文件（Scripts/Controllers/HomeController.js）中定义了角度控制器代码

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

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

有什么关于我做错了什么的线索吗？

编辑：虽然下面的答案很好，但我注意到了一些至关重要的问题。

访问文件的顺序很重要

例如，我在ASP.NET-MVC中使用了bundles，订单应该如下所示：

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

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

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

您可以使用相同的angular.module语法访问已定义的模块，但无需指定模块的依赖项。在这种情况下，你会得到定义的模块，然后你可以用它来创建控制器或其他角度组件

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

这是模块上原始角度文档的一句话：

创建与检索

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

使用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', ...);

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

相关文章：