angular.js/docs/content/cookbook/helloworld.ngdoc

40 lines
1.2 KiB
Text
Raw Normal View History

2011-02-01 18:01:02 +00:00
@ngdoc overview
@name Cookbook: Hello World
@description
<doc:example>
<doc:source>
2011-09-08 20:56:29 +00:00
<script>
function HelloCntl($scope) {
$scope.name = 'World';
2011-09-08 20:56:29 +00:00
}
</script>
<div ng-controller="HelloCntl">
Your name: <input type="text" ng-model="name"/>
2011-09-08 20:56:29 +00:00
<hr/>
Hello {{name || "World"}}!
2011-09-08 20:56:29 +00:00
</div>
2011-02-01 18:01:02 +00:00
</doc:source>
<doc:scenario>
it('should change the binding when user enters text', function() {
2011-02-01 18:01:02 +00:00
expect(binding('name')).toEqual('World');
input('name').enter('angular');
expect(binding('name')).toEqual('angular');
});
</doc:scenario>
</doc:example>
# Things to notice
Take a look through the source and note:
2012-09-26 13:30:55 +00:00
* The script tag that {@link guide/bootstrap bootstraps} the Angular environment.
* The text {@link api/ng.directive:input input form control} which is
bound to the greeting name text.
2012-09-26 13:30:55 +00:00
* There is no need for listener registration and event firing on change events.
* The implicit presence of the `name` variable which is in the root {@link api/ng.$rootScope.Scope scope}.
2011-02-01 18:01:02 +00:00
* The double curly brace `{{markup}}`, which binds the name variable to the greeting text.
* The concept of {@link guide/databinding data binding}, which reflects any
2011-06-06 15:50:35 +00:00
changes to the
2011-02-01 18:01:02 +00:00
input field in the greeting text.