One of the important topics that we have not touched on yet is how AngularJS initializes the app. To answer that, we will have to go back to the HTML view and look at the <body> tag. The <body> tag is as follows:
<body ng-app="app">
The <body> tag defines an ng-app directive attribute. Wherever Angular encounters this directive, it starts the initialization process. Since we have added ng-app to the <body> tag, everything within the <body> tag becomes part of our AngularJS app.
Note
This construct makes it possible for an Angular app to coexist with other frameworks, as we can demarcate what part of HTML should use AngularJS.
During this bootstrapping/initialization process Angular does the following:
It loads the module for the application. Modules are a way for AngularJS to organize and segregate code. As described earlier, these are containers for various Angular artifacts. In fact, even the framework's internal functionality is exposed through such modules.
It sets up dependency injection (DI). DI is not very popular in the JavaScript world but is commonplace in other programming languages. It is basically a mechanism to inject dependencies into components that require it instead of the component creating it itself. For example, in the
GuessTheNumberControllerfunction, we inject the dependency for$scope.function GuessTheNumberController($scope) {It creates a
$rootScopeobject, which is a scope object available at the global level and not tied to any specific HTML fragment.It compiles the DOM starting from where
ng-appis declared. In this compilation process, the framework traverses the DOM, looks for all directives and interpolations, and sets up the binding between the view and model.Post compilation, it links the view and scope to produce a live view where changes are synced across the model and viewed in real time as we interact with the app.
This compilation and linking process can also lead to the creation of new scopes, all of which depend on the directive that is being applied to the HTML node. If you have Batarang opened, go back to the lone child scope (003) and click on the < link. We will again land up here:
<div class="container" ng-controller="GuessTheNumberController">
Now look at the AngularJS documentation for ng-controller (https://docs.angularjs.org/api/ng/directive/ngController). There is this quote:
Directive Info
This directive creates new scope.
So, this ng-controller declaration when compiled by the framework leads to the creation of a new scope whose visibility is limited within the earlier mentioned <div> tag.
Note
There are a number of other directives in Angular that cause the creation of a new scope; this is precisely the reason why there can be multiple scopes active during the execution of the app.
So now we know how and when these scope objects are created. We also now understand the Angular app initialization process a little better.
The last two sections cover the tools and resources that will come in handy for us while we make some killer apps on AngularJS.