代码之家 › 专栏 › 技术社区 › BornToCode

Visual Studio的AngularJS模板说明

self-invoking-function angularjs-injector angularjs-controller visual-studio-2015 angularjs

1

BornToCode · 技术社区 · 8 年前

使用VS2015模板创建新控制器时,我得到以下代码:

(function () {
    'use strict';

    angular
        .module('app')
        .controller('controller', controller);

    controller.$inject = ['$scope']; 

    function controller($scope) {
        $scope.title = 'controller';

        activate();

        function activate() { }
    }
})();

问题:

为什么VS template会将代码包装在自开票函数中?
这是怎么回事 activate() 作用我应该在内部编写什么代码?为什么我需要一个单独的函数,而不是只在控制器内部编写代码?
执行 controller.$inject = ['$scope']; 认为将依赖项写入数组(作为控制器函数的参数)是更好的做法。

1 回复 | 直到 8 年前

1

3

31piy 8 年前

为什么VS模板将代码包装在一个自调用函数中?

因为它可以防止损坏全局命名空间。在这种情况下, controller 将在没有IIFE的情况下成为全局命名空间的成员。

这是怎么回事 activate() 作用

它有助于分别分离控制器变量和代码的声明和执行。在调用之前 activate 函数,我们通常使用 this. 语法。

您将在 使活动 作用

执行 controller.$inject = ['$scope']; 被认为是更好的做法?

实际上是的!它可以帮助您将控制器定义与其角度对应项分离。它可以帮助您避免在中写入整个控制器代码 angular.module( ... ).controller 块以提高代码的可读性。

编辑1 :

如果没有IIFE,名为 控制器 将成为全局命名空间的成员,并且可以在整个页面中访问。它还可能被后续代码覆盖。不要将AngularJS与此混合,因为这是JavaScript所做的事情。

这个 使活动 功能只是一个分离关注点的层。您可以完全在函数中编写代码 控制器 . 但这样,就很难区分哪个代码控制器正在执行,以及哪些代码将变量绑定到控制器。举个例子:

function controller($scope) {
  var vm = this;
  vm.data = [];
  $scope.title = 'controller';

  activate();

  ///
  function activate() {
    getData()
      .then(data => {
        // do something with data
      });

    // ...
  }

  function getData() {
    ...
  }
}

通过阅读上述代码,可以很容易地了解控制器中正在使用的变量,而无需特别深入控制器。通过遵循此约定,我们将始终知道控制器将在以下位置开始执行业务逻辑 激活() 被调用。