CODEWITHSUNDEEP
angularjs
user1539343
user1539343

Reputation: 1669

AngularJS dependency injection - confusing syntax

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.

Upvotes: 3

Views: 126

Answers (2)

Naga Sai A
Naga Sai A

Reputation: 10975

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

Upvotes: 0

Richard Szalay
Richard Szalay

Reputation: 84724

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.

Upvotes: 1

Related Questions