Bootstrapping in Angular

Name: Bootstrapping in Angular
Author: Michaela Ochnich

This chapter will explain how the Angular framework bootstraps an application and gets it running in the browser. You’ll learn how Angular automatically bootstraps an application by default, as well as how to implement manual bootstrapping for your application.

Preview the first lesson free — get full access to all 3 lessons.

Request a demo Sign in

Course: On-Demand

In this lesson, I'm going to introduce Angular's application bootstrapping process. Bootstrapping is the process of launching and loading the application in the browser for the user So here I have a starter application that was created using the Angular CLI and it's currently running and in the browser here, you can see that starter template is displaying. I'm clicking on inspect, you can see all of the HTML DOM elements and everything that is rendered here. But if you view the source file instead, you'll see that this is a much shorter file that this page has started as. There is some basic header information here, and then this single component selector app root. This is the root component for the application. Most Angular applications have one root component like so, that component then has nested components, which will then have nested components and dependencies of their own, and this all builds out a structural component tree that makes up your Angular application. There's also five JavaScript files here, there's runtime, polyfills, Runtime is a Webpack file, which is software that Angular uses to help build and bundle modules to serve to the browser. Polyfills contains scripts to support the different browser types, and styles is compiled global Vendor then contains Angular scripts as well as other library dependency scripts. And main.js contains the code for your angular application, and this file is transpiled from the main.ts file in the source code for your project. So now I'm gonna switch to Visual Studio code and open up the main.ts file, which is in the source folder, and in this file, you'll see this line calling the bootstrap module method. This line is what begins bootstrapping the application for the browser, starting with the module that's passed to the method here. This module is the route module for the application, and it's the starting point for Angular to load in all of the other modules and dependencies. And this module contains that root component that was in the source file. Then the index.HTML file is the file that browsers look for and load up first, when a user navigates to your site. This was the source file that was viewed in the browser. The bootstrapped application is injected into the DOM using this entry point here, the selector for the route component. And to the scripts that were at the end of the source file are added by angular after the build process. It first has to transpile all of the TypeScript code into JavaScript before serving it to the browser. That's all for this lesson, introducing application, bootstrapping, and check out the next lesson to learn more about Angular's automatic bootstrapping process.

Intermediate Provider : Michaela Ochnich 3 Lessons · 13m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

What You'll Learn

Understand how the Angular framework bootstraps an application and runs it in the browser
Explore the overall bootstrapping process in Angular
Learn how Angular automatically bootstraps an application by default
Implement manual bootstrapping for your Angular application

Key Takeaways

This chapter explains how the Angular framework bootstraps an application and gets it running in the browser.
Angular automatically bootstraps an application by default.
Manual bootstrapping can be implemented to control how your application starts.
The chapter covers a bootstrapping overview along with both automatic and manual bootstrapping approaches.

Frequently Asked Questions

What does this course cover?

It explains how the Angular framework bootstraps an application and gets it running in the browser, including automatic bootstrapping by default and how to implement manual bootstrapping.

What lessons are included?

The course includes three lessons: Bootstrapping Overview, Automatic Bootstrapping, and Manual Bootstrapping.

What skills will I gain from this course?

You will work with Angular (Web Framework), Angular UI, Application Frameworks, Bootstrap (Front-End Framework), Bootstrap Protocol, and bootstrapping.

What is the difference between automatic and manual bootstrapping in this course?

The course shows how Angular automatically bootstraps an application by default, as well as how to manually bootstrap an application yourself.