Creating Your First Angular App

In this chapter, you’ll use a “Hello World” app to learn about the basic structure of an AngularDart app, how to bind a model to your view, and how to use a couple of built-in Angular directives.

Running the sample app

The code for this chapter is in the Chapter_01 directory of the angular.dart.tutorial download. View it in Dart Editor by using File > Open Existing Folder... to open the Chapter_01 directory.

Now run the app. In Dart Editor’s Files view, select Chapter_01/web/index.html, right-click, and choose Run in Dartium.

Note: Although AngularDart apps can run in any modern browser, we recommend using Dartium, for now. Later you’ll learn how to generate tree-shaken, minified JavaScript that can run in any modern browser.

Dartium launches, displaying the app. As you type in the field, the letters you type appear in the title.

Dartium running the Hello World app Hello World app with text

Note: You might notice {{name}} appearing and then disappearing when the app first starts. Don’t worry, later you’ll learn how to use ng-cloak to hide uncompiled DOM values.

Making Angular libraries available to your app

Dart makes dependencies available to the application through the pubspec.yaml file. Here’s the minimal pubspec.yaml file for this sample:

To use AngularDart in any app, include angular as a dependency. Also include the angular transformer, which will be necessary later, when you convert your app to JavaScript (as described in Deploying Your App). The web_components package provides polyfills for older web browsers that do not support Shadow DOM natively. The browser package helps switching to the compiled JavaSript version of the application for browsers that do not support Dart natively.

Dart Editor automatically downloads the packages your app depends on, along with any packages that they, in turn, depend on. If this download fails or you like using the command line, you can explicitly install packages. From Dart Editor, you can use Tools > Pub Get. From the command line (in the root directory of your app, assuming the Dart SDK is in your path), you can run pub get.

The app’s code

Two files contain the app’s code:


Defines the app’s UI and includes the app’s script.


Defines a main() function that initializes and starts the app.

Both files are in a directory that’s named web, in accordance with pub package layout conventions.

First, let’s look at index.html. Notice the addition of the ng-app directive to the <html> element:

The ng-app directive tells Angular which element is the root element of the application. Anything inside of this element is part of the page template managed by Angular. Unless you have a reason for Angular to manage only part of the app, we recommend putting the ng-app directive on the <html> element because it is the outermost tag. This is also the default behavior when no ng-app directive is found on the page.

Next, let’s look at the two script tags in the HTML <head>.

<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
These two script tags enable the use of Shadow DOM (a new web platform feature) for older browsers.

Next, let’s look at the two script tags at the end.

<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>

This code should be familiar if you’ve ever written a Dart web app. The first script tag specifies the Dart file that contains the main() function of your app. The last one runs a script, dart.js, that determines whether the browser is capable of running Dart code natively. If so, it runs Dart. If not, it runs compiled JavaScript. It then registers a callback to be executed by the browser when the containing HTML page is fully loaded.

Once the page is loaded, Angular looks for the ng-app directive. If Angular finds the directive, it bootstraps the application with the root of the application DOM being the element on which the ng-app directive was defined.

Now let’s look at main.dart:

That code is minimal because our app is so simple. We start by defining a Greeter class. As this class is set to be the root context type, the DI will create an instance of it to serve as the context for the application - that is the “name” expression will evaluate to the name property on the instance of Greeter. The @Injectable() annotation makes the class available in the DI container.

Once an Angular application starts up, it’s ready to respond to incoming browser events that might change the model (such as mouse clicks, key presses, or incoming HTTP responses). If changes are detected, Angular reflects them in the view by updating all of the affected bindings.

How Angular does MVC

The previous chapter introduced the principles of MVC. Let’s go into a little more detail about how Angular expresses MVC concepts.


In Angular, the view is a projection of the model through the HTML template. This means that whenever the model changes, Angular updates the HTML template to reflect those changes.


In our Hello World example, the “name” property is the model. It appears in two places in the view: where it’s set (in the input element) and where it’s displayed (in the curly braces, or “mustache”).

The term scope means the portion of the model that you want to expose to a view. We’ll go into more detail about scopes in later chapters. For now, just go with the definition of “The model is the scope.”


A really simple Angular app like this one doesn’t need components. Real apps, however, are built out of components. The next chapter dives into components.

Mustache syntax (interpolation) and Angular expressions

Angular uses double curly braces {{ ... }} to contain Angular expressions. Anything inside the braces is evaluated as a Dart-like expression. The braces tell Angular to evaluate the expression and put the result into the DOM. Expressions are “Dart-like” because the allowed expression syntax is not strictly Dart. Angular expressions differ from Dart in the following ways:

Here’s an example of a simple expression:

Here’s another:

These expressions would display as 3 and foobar, respectively.

Mustache syntax and data binding in Hello World

Here’s how the Hello World app uses the mustache syntax to bind to the model (“name”) and display the model in the view.

Notice that the input element has the ng-model directive, which looks like an HTML attribute. The following chapters go into more detail about directives. For now, just be aware that Angular has a construct called directives that extend HTML syntax and can control the view.

The ng-model directive binds the input’s value attribute to the property name in the current context (the instance of the Greeter class). Whenever the input value is updated, the directive copies its value to the name property.

The view displays the value of the model object using the Angular expression {{name}}. Notice how the view updates in real time whenever the model changes. This is called two-way data binding. Angular listens for changes to the model and updates the view to reflect those changes.