Creating Your First Angular App

###What you will learn In this tutorial, you will learn how to create a basic “Hello World” app. You will learn about the basic structure of an AngularDart app, how to bind a model to your view, and you will learn about some basic Angular Directives.

When you’re finished, you will be able to create a bare bones AngularDart app and run it in a Dart enabled browser.

###The code Here is the code for your “Hello World” app. We will examine each part in more detail. First, though, make these files available in Dart Editor by choosing File -> Open Existing Folder… and selecting the root directory of your app.

###Making Angular libraries available to your app Dart makes dependencies available to the application through the pubspec.yaml file. You will need to tell your app where the Angular libraries are by including Angular in your pubspec.yaml file, and then running pub upgrade or pub get to install the dependencies:

pubspec.yaml
dependencies:
  angular: any

You can run pub get or pub upgrade by right clicking on pubspec.yaml in Dart Editor and choosing Pub Get or Pub Upgrade. Alternately, you can run it from the command line in the root directory of your app.

###Running your app from inside Dart Editor To run your app from inside Dart Editor, you will need to create a run configuration for it. Bring up the “Manage Launches” menu by clicking on the arrow next to the green “run” menu item and choosing "Manage Launches..."

Next, create a new Dartium configuration by clicking on the blue Dartium+ icon.

In the right pane, give your app a name, select the HTML file Launch target and point it at your index.html.

Click the "Run" button. A Dartium browser will come up with your Hello World app running in it. Play with your app by typing in the input box and watching the view change.

###Let’s take a closer look at the code First, let’s look at the index.html file. The first thing to notice is the addition of the ng-app Directive to the HTML element. The ng-app Directive can be placed on any element, and 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, it is recommended to put 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.

The first script tag loads the Dart code that represents the main() function of your app.

<script type="application/dart" src="main.dart"></script>

The second script enable loading the JavaScript version of the application for browsers which don't support Dart.

<script src="packages/browser/dart.js"></script>

This piece of JavaScript code bootstraps the Dart environment. The dart.js script determines if 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 that will be executed by the browser when the containing HTML page is fully downloaded. When the callback is executed, Angular looks for the ng-app Directive. If Angular finds the Directive, it will bootstrap the application with the root of the application DOM being the element on which the ng-app Directive was defined.

Next, let’s look at the .dart file.

main() => ngBootstrap();

There’s not much here because our app is so simple. The only thing we see is some code that bootstraps your app. For now, don’t worry about the details of bootstrapping. We’ll cover it later.

Once an application is bootstrapped, it is ready to respond to incoming browser events that might change the model (such as mouse click, key press or incoming HTTP response). If changes are detected, Angular will reflect them in the view by updating all of the affected bindings.

###How Angular does MVC Let’s return to the .html file. In the previous chapter, we introduced the principles of MVC. We will describe how Angular expresses MVC concepts in a little more detail here. ####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. Once in the place where it’s set (in the input element), and also in the place where it is displayed (in the curly braces, or “mustache”). Angular also uses the word “Scope” to mean the portion of the model that you want to expose to a view. We will go into more detail about scopes in later chapters. For now, just go with the definition of “The model is the scope.” ####Controller In a really simple Angular app, you don’t even need a controller. Our Hello World app doesn’t have a controller. Realistically, though, you will want to create one. We will dive into controllers in the next chapter. ####Mustache syntax (interpolation) and Angular expressions Angular uses curly braces {{ … }} to contain an Angular expression. 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, loops, etc)
• Dereferencing chained objects is forgiving: For example: foo.bar.baz won’t blow up if one of the objects along the chain is null.

A simple expression could simply be something like:

{{ 1 + 2 }}

or

{{ 'foo' + 'bar'}}

Which would display as 3, and foobar respectively. ####Mustache syntax and data binding The .html fragment below is an example of how Angular uses the mustache syntax to bind to the model and then display the model in the view.

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

Notice that on the input element, we find a Directive called ng-model. We will go into detail about Directives in the next chapter. For now, just be aware that Angular has a construct called Directives that extend HTML syntax, that are used to control the view.

The Directives on the input control bind the input’s value attribute to the property “name” on the current scope. First it looks to see if the property exists in the scope. If it does, it sets the value. If it does not, it creates the property in the scope and then sets the value from the input.

The value of the model object is displayed in the view using the Angular expression {{name}}. Notice how the view is updated 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