Question

我非常喜欢使用AMD来管理依赖项。

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

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

在Angular JS中管理依赖项的最佳实践是什么，使应用程序在增长时更容易维护？

Answer 1

我建议实施AMD的Require.js。这里有一个很好的例子，说明如何配置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模块就是启用依赖注入。您将得到类似于此示例的代码：

示例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;
});

在Angular JS中管理依赖项的最佳实践

1 个答案:

示例app.js