AngularJS依赖项注入-混乱的语法_Angularjs

AngularJS依赖项注入-混乱的语法

angularjs

AngularJS依赖项注入-混乱的语法,angularjs,Angularjs,我有以下代码： <!doctype html> <html> <body> <div ng-controller="MyController"> Hello {{greetMe}}! </div> <script src="http://code.angularjs.org/snapshot/angular.js"></script> <script> angular

我有以下代码：

<!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>

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

它是如何工作的？引导（文档，['myApp']）

上面的参数['myApp']是何时注入的，如何注入

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

请提供帮助。

Angular的依赖项注入将函数“字符串化”，然后从字符串中提取参数名称，并使用该名称查找依赖项服务

然而，当您缩小代码时，这些参数是因为“g”、“e”等。由于Angular现在不知道您实际需要什么服务，它们提供了两种不同的方法来显式描述您的依赖关系

第一种方法是将函数/类作为数组中的最后一个参数提供，数组中位于它前面的元素是参数的原始名称

另一种方法是传递原始函数/类，但将“static”$inject属性分配给函数本身。该属性被赋予表示原始参数名称的字符串数组的值

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

在您的示例中，“myApp”是一个模块。模块不是作为依赖项注入的，而是打包一组服务（控制器、指令）的一种方式。如果不先通过将模块名称添加到作为第二个参数传递给angular.module的数组中，声明对该模块的依赖关系，则无法从其他模块注入服务。angular.bootstrap允许模块（及其依赖项）与dom节点一起工作。

可能会在下面解释，以便您清楚地理解

angular.module（'myApp'，[]）

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

通过手动引导或使用下面的代码行

angular.bootstrap（文档，['myApp']）
或者通过添加到任何元素中，我们要使用

$scope是应用程序对象，可用于包含模型数据的视图和控制器
ng controller指令将允许使用指定的控制器（在这种情况下，ng controller=“MyController”）
一个模块可以有多个控制器，每个控制器都有自己关联的$scope对象和构造函数，函数模型属性和函数在关联的作用域内定义
角度依赖注入功能将有助于使用单独创建的组件，从而使这些组件可重用、可维护和可测试
下面关于依赖注入的文章将提供更多的见解

希望这对您有所帮助
我想您可能已经开始“从书的中间开始阅读”。您链接的页面是关于手动引导的指南。对于已经熟悉Angular的人来说，这是一个高级主题。我建议你从一个实际的教程开始学习，这个教程会带你逐步了解词义和语法。
angular.module('myApp', []) .controller('MyController', ['$scope', function ($scope) { $scope.greetMe = 'World'; }]);