Question

我认为这相当于

var module = angular.module(...);
module.controller(...);
module.directive(...);

但我不确定。而且我不知道角度会发生什么，以及为什么我可以用这种方式编写代码。

我尝试调试并追踪它，但它很困惑。

Answer 1

这称为流畅的API。

每个方法都将返回模块实例，以便可以调用另一个方法。

为了说明我们可以创建一个类似的类。

class Module {

  controller() {
    console.log('controller');
    return this;
  }

  directive() {
    console.log('directive');
    return this;
  } 
}

当每个方法完成后，它将返回模块实例this，以便可以链接另一个方法。

所以现在我们可以使用这个类并链接这样的方法：

new Module().controller().directive();

或者

const module = new Module();
module.controller();
module.directive();

Answer 2

当我使用angular.module（...）.controller（...）。diffire（...）时会发生什么？为什么？

简短回答

这是在一个文件中编写代码的好方法。

如果要将Angular项目拆分为不同的文件，请使用第二种方法：

var app = angular.module(...);
app.controller(...);
app.directive(...);

答案很长

另请查看此角度代码段（从https://code.angularjs.org/1.5.6/angular.js获取）：

您可以看到controller，directive，module，filter，factory，value，provider，{{ 1}}，decorator，animation，config，component返回run

moduleInstance

为什么更好？

两种方法都是一样的，因此开发人员将决定什么对他的项目结构更好

效率？

没有效率值测量，两者都具有相同的效率。没有性能损失。

为了什么？

在项目中我想在每个控制器中编写每个指令...在单独的文件中，因此我使用function setupModuleLoader(window) { var $injectorMinErr = minErr('$injector'); var ngMinErr = minErr('ng'); function ensure(obj, name, factory) { return obj[name] || (obj[name] = factory()); } var angular = ensure(window, 'angular', Object); // We need to expose `angular.$$minErr` to modules such as `ngResource` that reference it during bootstrap angular.$$minErr = angular.$$minErr || minErr; return ensure(angular, 'module', function() { /** @type {Object.<string, angular.Module>} */ var modules = {}; return function module(name, requires, configFn) { var assertNotHasOwnProperty = function(name, context) { if (name === 'hasOwnProperty') { throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context); } }; assertNotHasOwnProperty(name, 'module'); if (requires && modules.hasOwnProperty(name)) { modules[name] = null; } return ensure(modules, name, function() { if (!requires) { throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " + "the module name or forgot to load it. If registering a module ensure that you " + "specify the dependencies as the second argument.", name); } /** @type {!Array.<Array.<*>>} */ var invokeQueue = []; /** @type {!Array.<Function>} */ var configBlocks = []; /** @type {!Array.<Function>} */ var runBlocks = []; var config = invokeLater('$injector', 'invoke', 'push', configBlocks); /** @type {angular.Module} */ var moduleInstance = { // Private state _invokeQueue: invokeQueue, _configBlocks: configBlocks, _runBlocks: runBlocks, requires: requires, name: name, provider: invokeLaterAndSetModuleName('$provide', 'provider'), factory: invokeLaterAndSetModuleName('$provide', 'factory'), service: invokeLaterAndSetModuleName('$provide', 'service'), value: invokeLater('$provide', 'value'), constant: invokeLater('$provide', 'constant', 'unshift'), decorator: invokeLaterAndSetModuleName('$provide', 'decorator'), animation: invokeLaterAndSetModuleName('$animateProvider', 'register'), filter: invokeLaterAndSetModuleName('$filterProvider', 'register'), controller: invokeLaterAndSetModuleName('$controllerProvider', 'register'), directive: invokeLaterAndSetModuleName('$compileProvider', 'directive'), component: invokeLaterAndSetModuleName('$compileProvider', 'component'), config: config, run: function(block) { runBlocks.push(block); return this; } }; if (configFn) { config(configFn); } return moduleInstance; function invokeLater(provider, method, insertMethod, queue) { if (!queue) queue = invokeQueue; return function() { queue[insertMethod || 'push']([provider, method, arguments]); return moduleInstance; }; } function invokeLaterAndSetModuleName(provider, method) { return function(recipeName, factoryFunction) { if (factoryFunction && isFunction(factoryFunction)) factoryFunction.$$moduleName = name; invokeQueue.push([provider, method, arguments]); return moduleInstance; }; } }); }; }); }，app.controller(...);，...

但是常见的指令我想放在一个文件中，所以我使用：

app.service(...);

希望它会为你的理解传播光明:)

当我使用angular.module（...）。controller（...）。directive（...）时会发生什么？为什么？

2 个答案:

简短回答

答案很长