AngularJS dependency injection - confusing syntax

Question

I have the following code:

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

from the website: https://docs.angularjs.org/guide/bootstrap

I really can't understand how the syntax is working, particularly,

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

What does the above ugly syntax mean? What is the role of 'MyController'? what does the array parameter mean? what does $scope mean? Who is calling the "function($scope)"?

How does it work? angular.bootstrap(document, ['myApp']);

When is the parameter above ['myApp'] injected and how?

The website doesn't explain anything regarding the syntax. Just assumed the reader knows all about it.

Please help.

I think you might have started "reading from the middle of the book". The page you're linking is a guide on manually bootstrapping angular. That is an advanced topic for someone already familiar with Angular. I suggest you start learning from an actual tutorial, that takes you through the meaning and syntax incrementally. — Nikolaj Dam Larsen
– Nikolaj Dam Larsen, Commented Dec 26, 2016 at 4:23

Richard Szalay · Accepted Answer · 2016-12-26 03:50:02Z

Angular's dependency injection "stringifies" the function and then extracts the parameter names from the string, and uses that to find the dependant service.

However when you minify your code, those parameters because "g", "e", etc. Since Angular now can't know what service you actually wanted, they provide two different methods of explicitly describing your dependencies.

The first is to supply your function/class as the last parameter in an array, with the elements in the array before it being the original names of the parameters.

The alternative is to pass your original function/class, but to assign a "static" $inject property to the function itself. The property is given the value of an array of strings representing your original parameter names.

And, finally, the first parameter supplied to angular.controller/service/factory/etc is the name that you will be applying to the service you are registering. It is that string that other services will use to declare their dependency on your controller/service.

"myApp", in your sample, is a module. Modules aren't injected as dependencies but are instead a way of packaging up a group of services (controllers, directives). You can't inject a service from a different module without first declaring a dependency on that module by adding the name of the module to the array passed as the second parameter to angular.module. angular.bootstrap allows a module (and it's dependants) to work with a dom node.

Naga Sai A · Accepted Answer · 2016-12-26 04:14:39Z

May be below explanation give you clear understanding

angular.module('myApp', [])

This line creates variable for module (in this case myApp) which we will using in the HTML page to bootstrap the application from the element specified

Either by manul bootstrapping using below line of code

angular.bootstrap(document, ['myApp']);

or by adding to any element where we want to use angular

$scope is the application object and available for both view and controller which contains model data

ng-controller directive will allow to use controller specified (in this case ng-controller ="MyController")

One module can have multiple controllers and each controller will have its own associated $scope object and constructor function model properties and functions are defined inside that associated scope.

Angular Dependency Injection feature will help to consume the components created separately and thereby make those components reusable, maintainable and testable.

Below article on dependency injection will provide more insight http://anandmanisankar.com/posts/angularjs-dependency-injection-demystified/

Hope this is helpful for you

Collectives™ on Stack Overflow

AngularJS dependency injection - confusing syntax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related