Question

我有以下代码：

<!doctype html>
<html>
<body>
  <div ng-controller="MyController">
    Hello {{greetMe}}!
  </div>
  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>
    angular.module('myApp', [])
      .controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

    angular.element(function() {
      angular.bootstrap(document, ['myApp']);
    });
  </script>
</body>
</html>

来自网站：https://docs.angularjs.org/guide/bootstrap

我真的无法理解语法是如何工作的，尤其是

angular.module('myApp', [])
          .controller('MyController', ['$scope', function ($scope) {
            $scope.greetMe = 'World';
          }]);

上述难看的语法是什么意思？ 'MyController'的作用是什么？数组参数是什么意思？ $ scope意味着什么？谁在调用“函数（$ scope）”？

它是如何工作的？ angular.bootstrap（document，['myApp']）;

何时注入['myApp']上方的参数以及如何？

该网站没有解释任何有关语法的内容。只是假设读者知道所有这些。

请帮忙。

Answer 1

Angular的依赖注入＆＃34;字符串化＆＃34;该函数然后从字符串中提取参数名称，并使用它来查找依赖服务。

然而，当您缩小代码时，这些参数因为＆＃34; g＆＃34;，＆＃34; e＆＃34;等等。由于Angular现在无法知道您真正想要的服务，因此他们提供了两种不同的明确描述依赖关系的方法。

第一个是提供你的函数/类作为数组中的最后一个参数，在它作为参数的原始名称之前使用数组中的元素。

替代方法是传递原始函数/类，但是要分配一个＆＃34;静态＆＃34; $ inject属性到函数本身。该属性被赋予表示原始参数名称的字符串数组的值。

最后，提供给angular.controller / service / factory / etc的第一个参数是您将应用于您正在注册的服务的名称。它是其他服务将用于声明它们对您的控制器/服务的依赖的字符串。

＆＃34; myApp＆＃34;，在您的示例中，是一个模块。模块不是作为依赖项注入的，而是一种打包一组服务（控制器，指令）的方式。您无法通过将模块的名称添加到作为第二个参数传递给angular.module的数组，而不首先声明对该模块的依赖性，从而从不同的模块注入服务。 angular.bootstrap允许模块（及其依赖项）与dom节点一起使用。

Answer 2

可能会低于解释给你清楚的理解

angular.module（＆＃39; myApp＆＃39;，[]）

此行为模块创建变量（在本例中为myApp），我们将在HTML页面中使用该变量从指定元素引导应用程序

使用下面的代码行进行manul bootstrapping

angular.bootstrap（document，[＆＃39; myApp＆＃39;]）;

或添加到我们想要使用angular

的任何元素

$ scope 是应用程序对象，可用于包含模型数据的视图和控制器

ng-controller 指令将允许使用指定的控制器（在本例中为ng-controller =＆＃34; MyController＆＃34;）

一个模块可以有多个控制器，每个控制器都有自己的关联$ scope对象，构造函数模型属性和函数在相关范围内定义。

Angular Dependency Injection 功能将有助于消耗单独创建的组件，从而使这些组件可重用，可维护和可测试。

下面有关依赖注入的文章将提供更多见解 http://anandmanisankar.com/posts/angularjs-dependency-injection-demystified/

希望这对你有所帮助

AngularJS依赖注入 - 令人困惑的语法

2 个答案: