javascript - Angular JS 中管理依赖关系的最佳实践

Question

我真的很喜欢使用 AMD 来管理依赖项。

现在我开始使用 Angular，在这种情况下事情会变得更加复杂，因为在一个文件中我们引用了一个我们承认已经创建的特定对象，这需要使脚本标签全部组织起来，所以上。

我注意到的另一件事是，随着应用程序的增长，将会有许多脚本标签和更多需要按顺序授予的东西。我找到了让 AMD 与 Angular.js 一起工作的方法，但我真的不喜欢它，因为它看起来不自然。

管理 Angular JS 中的依赖关系的最佳实践是什么，使应用程序的维护变得更容易？

Answer 1

我建议Require.js它确实实现了AMD。这里有一个很好的示例，说明如何配置 main.js(require.js 应用程序的入口点)和 test-main.js(业力测试的入口点):https://github.com/tnajdek/angular-requirejs-seed .

注释:

• 请务必使用 paths和 shim用于您想要向应用程序公开但不能作为 require.js 模块使用的依赖模块。
• 请确保记住 angular.js 的模块概念和 require.js 模块之间的区别。 Require.js 模块用于描述文件依赖关系并以正确的方式加载。 Angular 模块的作用是在正确完成加载后启用依赖项注入(inject)。您最终会得到类似于此示例的代码:

示例 app.js

define([
    'angular', //as defined in the requirejs shim config
    'filters', //as defined in the filters.js
    'services', //as defined in services.js
    'directives', //in directives.js
    'controllers', //in controllers.js
    'angularRoute',//as defined in the requirejs config
    ],function(angular,filters,services,directives,controllers,angularRoute){

'use strict';
//angular.js module definition syntax: Declare app level module which depends on filters,services,controllers,directives, and angular globals
var angularappModule = angular.module('angularapp', [
  'ngRoute',
  'angularapp.filters',
  'angularapp.services',
  'angularapp.directives',
  'angularapp.controllers'
]);

angularappModule.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/angularapp', {templateUrl: 'partials/angularapp.html', controller: 'angularappCtrl'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/angularapp'});
}]);

return angularappModule;
});