helloworld.html

<h1>Cookbook: Hello World</h1>
<div class="cookbook-hello-world"><fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<doc:example>
<pre class="doc-source">
 Your name: &lt;input type="text" name="name" value="World"/&gt;
 &lt;hr/&gt;
 Hello {{name}}!
</pre>
<pre class="doc-scenario">
  it('should change the binding when user enters text', function(){
    expect(binding('name')).toEqual('World');
    input('name').enter('angular');
    expect(binding('name')).toEqual('angular');
  });
</pre>
</doc:example><h2>Things to notice</h2>

<p>Take a look through the source and note:</p>

<ul>
<li>The script tag that <a href="#!/guide/dev_guide.bootstrap">bootstraps</a> the angular environment.</li>
<li>The text <a href="#!/api/angular.widget.HTML"><code>input widget</code></a> which is bound to the greeting name text.</li>
<li>No need for listener registration and event firing on change events.</li>
<li>The implicit presence of the <code>name</code> variable which is in the root <a href="#!/api/angular.scope"><code>scope</code></a>.</li>
<li>The double curly brace <code>{{markup}}</code>, which binds the name variable to the greeting text.</li>
<li>The concept of <a href="#!/guide/dev_guide.templates.databinding">data binding</a>, which reflects any
changes to the
input field in the greeting text.</li>
</ul></div>