Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

Creating Your First Angular App

Jump to bottom
Kathy Walrath edited this page Jan 29, 2014 · 5 revisions

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:

name: angular_dart_demo
version: 0.0.1
dependencies:
  angular: any

To use AngularDart in any app, include angular as a dependency.

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:

index.html
Defines the app's UI and includes the app's script.
main.dart
Defines a main() function that bootstraps Angular.

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:

<html ng-app>

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.

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 second 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:

import 'package:angular/angular.dart';

main() => ngBootstrap();

That code is minimal because our app is so simple. The only thing we see is some code that imports Angular and bootstraps your app. For now, don’t worry about the details of bootstrapping. We’ll cover it later.

Once an application is bootstrapped, 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.

####View 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.

####Model 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”).

<h3>Hello {{name}}!</h3>
Name: <input type="text" ng-model="name">

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.”

####Controller A really simple Angular app like this one doesn't need a controller. Real apps, however, have controllers. The next chapter dives into controllers.

###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:

  • No control flow statements are allowed (no ifs or loops, for example).
  • Dereferencing chained objects is forgiving. For example, foo.bar.baz doesn't blow up if one of the objects along the chain is null.

Here's an example of a simple expression:

{{ 1 + 2 }}

Here's another:

{{ 'foo' + 'bar'}}

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.

<h3>Hello {{name}}!</h3>
Name: <input type="text" ng-model="name">

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 scope. First, Angular checks whether the property exists in the scope. If it does exist, Angular sets its value. If not, Angular creates the property in the scope and then sets the value from the input.

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.

Home | Prev | Next

Clone this wiki locally