Migrating to Angular 2: Bootstrapping

Bootstrapping is the technique that we use when we want our code to get executed on our application.

Doing that in an Angular application is really easy. I guess you might recognize the ng-app directive and you know how to use it. Otherwise I’m going to explain it for you.

ng-app directive is the entry point in your application, it’s placed normally in the body or html tag. Everything inside the element that contains that directive as an attribute is where your application starts. It receives a value, this value is the name of your main module. So in case your component is called “app”, your module should look like this:

import angular from 'angular';
angular.module('app', []);

and your html this way:

<html>
<head>
<title>Angular app</title>
</head>
<body ng-app="app">
<app></app>
</body>
</html>

There, inside the body element, is where angular will start reading and recognizing your code.

There is also another way to bootstrap your Angular application. You can also use angular.bootstrap method. Let’s say this is the manual way to perform this task.

Angular 2 applications use only javascript code to bootstrap the main module, so I will highly recommend doing it this way to have a smoother transition.

import angular from 'angular';
angular.module('app', []);
angular.bootstrap(document.documentElement, ['app']);

angular.bootstrap gets three parameters, the first one is the element in which you want to bootstrap your application, the second one is an array in which you can specify the modules names that you want to bootstrap in your application.

And you might ask yourself… Why is it an array and not a simple string? Well, this method gives you the possibility to bootstrap more than one application in your html (unlike ng-app, you can only bootstrap one module), but I wouldn’t recommend doing that, so we simply pass one, our main module name, in this case “app”.

If you look deeper in angular.js code, you can see that ng-app directive is using angular.bootstrap, so using directly angular.bootstrap will perform much better.

I almost forgot to talk about the third parameter that angular.bootstrap receives, which is really important. It’s a configuration object for your application. There you can use the strictDi (strict dependency injection) mode. It defaults to false, but if you enable it, every time you use dependency injection in any of your controllers, configs, services…etc. you will have to use annotations. Otherwise, it will break. Here is an example using strictDi:

import angular from 'angular';
angular.module('app', []);
angular.bootstrap(document.documentElement, ['app'], {
strictDi: true
}
);

Now, considering creating this service:

import angular from 'angular';
const app = angular.module('app', []);
const service = ($rootScope) => {
// $rootScope is implicitly injected
};
const run = (service) => {
// it will break when it runs
};
app
.service('service', service)
.run(run);

Being in strictDi mode will break, because we didn’t specify the annotations. We can solve it annotating the service in this way:

import angular from 'angular';
const app = angular.module('app', []);
const service = ($rootScope) => {
// $rootScope is implicitly injected
};
const run = (service) => {
// it will break when it runs
};
run.$inject = ['service'];
app
.service('service', service)
.run(run);

Currently there are lots of tools that that perform this task without you having to care about annotating everything. I will recommend using ng-annotate for the cause.

Conclusion

Use angular.bootstrap with strictDi mode for bootstrapping your application. Also use a tool like ng-annotate that saves your time on annotating your angular code.

app.js

import angular from 'angular';
angular.module('app', []);
angular.bootstrap(document.documentElement, ['app'], {
strictDi: true
});

index.html

<html>
<head>
<title>Angular app</title>
</head>
<body>
<app></app>
</body>
</html>

In the next chapter we will be looking at how to build a component and how to structure it from the root element to a little part of your view.