Explanations describe the concepts and reasons behind the instructions. Explanations have a thin border on the left like this block of text.

Click Hide Explanations to show only the instructions. Click View Explanations to see everything again.

AppComponent is the root of the application

Every Angular app has at least one root component, conventionally named AppComponent, that hosts the client user experience. Components are the basic building blocks of Angular applications. A component controls a portion of the screen — a view — through its associated template.

This QuickStart has only one, extremely simple component. But it has the essential structure of every component we'll ever write:

• One or more import statements to reference the things we need.
• A @Component annotation that tells Angular what template to use and how to create the component.
• A component class that controls the appearance and behavior of a view through its template.

Import

Angular apps are modular. They consist of many files each dedicated to a purpose. Angular itself is modular. It is a collection of library modules each made up of several, related features that we'll use to build our application.

When we need something from a module or library, we import it. Here we import the Angular 2 core so that our component code can have access to the @Component annotation.

@Component annotation

@Component is an annotation that allows us to associate metadata with the component class. The metadata tells Angular how to create and use this component.

The call to the @Component constructor has two named parameters, selector and template.

The selector specifies a simple CSS selector for an HTML element that represents the component.

The element for this component is named my-app. Angular creates and displays an instance of our AppComponent wherever it encounters a my-app element in the host HTML.

The template specifies the component's companion template, written in an enhanced form of HTML that tells Angular how to render this component's view.

Our template is a single line of HTML announcing "My First Angular App".

A more advanced template could contain data bindings to component properties and might identify other application components which have their own templates. These templates might identify yet other components. In this way an Angular application becomes a tree of components.

Component class

At the bottom of the file is an empty, do-nothing class named AppComponent.

When we're ready to build a substantive application, we can expand this class with properties and application logic. Our AppComponent class is empty because we don't need it to do anything in this QuickStart.

We import the two things we need to launch the application:

1. Angular's browser bootstrap function
2. The application root component, AppComponent.

Then we call bootstrap with AppComponent.

Bootstrapping is platform-specific

Notice that we import the bootstrap function from angular2/platform/browser.dart, not angular2/core.dart. Bootstrapping isn't core because there isn't a single way to bootstrap the app. True, most applications that run in a browser call the bootstrap function from this library.

But it is possible to load a component in a different environment. We might load it on a mobile device with Apache Cordova or NativeScript. We might wish to render the first page of our application on the server to improve launch performance or facilitate SEO. These targets require a different kind of bootstrap function that we'd import from a different library.

Why create separate main.ts, app module and app component files?

Then main.ts, app module and the app component files are tiny. This is just a QuickStart. We could have merged these files into one and spared ourselves some complexity.

We'd rather demonstrate the proper way to structure an Angular application. App bootstrapping is a separate concern from creating a module or presenting a view. Mixing concerns creates difficulties down the road. We might launch the AppComponent in multiple environments with different bootstrappers. Testing the component is much easier if it doesn't also try to run the entire application. Let's make the small extra effort to do it the right way.

The index.html file defines the web page that hosts the application.

When Angular calls the bootstrap function in main.ts, it reads the AppComponent metadata, sees that AppComponent is the bootstrap component, finds the my-app selector, locates an element tag named my-app, and renders our application's view between those tags.

Building the app (generating JavaScript)

Before deploying the app, we need to generate JavaScript files. The pub build command makes that easy.

The generated JavaScript appears, along with supporting files, under a directory named build.

Using the Angular transformer

When generating JavaScript for an Angular app, be sure to use the Angular transformer. It analyzes the Dart code, converting reflection-using code to static code that Dart's build tools can compile to faster, smaller JavaScript. The highlighted lines in pubspec.yaml configure the Angular transformer:

The entry_points item identifies the Dart file in our app that has a main() function. For more information, see the Angular transformer wiki page.

Using dart_to_js_script_rewriter

To improve the app's performance, convert the HTML file to directly include the generated JavaScript; one way to do that is with dart_to_js_script_rewriter. To use the rewriter, specify dart_to_js_script_rewriter in both the dependencies and transformers sections of the pubspec.

For more information, see the docs for dart_to_js_script_rewriter.

This figure doesn't show generated files and directories. For example, a pubspec.lock file specifies versions and other identifying information for the packages that our app depends on. The pub build command creates a build directory containing the JavaScript version of our app. Pub, IDEs, and other tools often create other directories and dotfiles.