doc(guide): various fixes and improvements

This commit is contained in:
Igor Minar 2011-07-29 12:45:10 -07:00
parent 3e54a1b18a
commit a79231dea6
7 changed files with 43 additions and 53 deletions

View file

@ -8,7 +8,7 @@ We want this HTML source:
<pre>
<div ng:init="s='Hello'; n='World'">
<my:greeter salutation="s" name="n"/>
<my:greeter salutation="s" name="n"></my:greeter>
</div>
</pre>
@ -23,9 +23,9 @@ to produce this DOM:
</div>
</pre>
That is, the new `<my:greeter/>` tag's `salutation` and `name` attributes should be transformed by
the compiler such that two `<span>` tags display the values of the attributes, with CSS classes
applied to the output.
That is, the new `<my:greeter></my:greeter>` tag's `salutation` and `name` attributes should be
transformed by the compiler such that two `<span>` tags display the values of the attributes, with
CSS classes applied to the output.
The following code snippet shows how to write a following widget definition that will be processed
by the compiler. Note that you have to declare the {@link dev_guide.bootstrap namespace} `my` in
@ -41,9 +41,9 @@ angular.widget('my:greeter', function(compileElement){
var salutationSpan = angular.element('<span class="salutation"></span');
var nameSpan = angular.element('<span class="name"></span>');
linkElement.append(salutationSpan);
linkElement.append(compiler.text(' '));
linkElement.append(' ');
linkElement.append(nameSpan);
linkElement.append(compiler.text('!'));
linkElement.append('!');
this.$watch(salutationExp, function(value){
salutationSpan.text(value);
});

View file

@ -57,12 +57,9 @@ angular.markup('---', function(text, textNode, parentElement) {
var compiler = this;
var index = text.indexOf('---');
if (index > -1) {
var before = compiler.text(text.substring(0, index));
var hr = compiler.element('hr');
var after = compiler.text(text.substring(index + 3));
textNode.after(after);
textNode.after(hr);
textNode.after(before);
textNode.after(text.substring(index + 3));
textNode.after(angular.element('<hr>'));
textNode.after(text.substring(0, index));
textNode.remove();
}
});

View file

@ -11,7 +11,7 @@ expression and `alert()` the user with each new value:
<pre>
// An element widget
<my:watch exp="name"/>
<my:watch exp="name"></my:watch>
</pre>
You can implement `my:watch` like this:
@ -36,8 +36,8 @@ Let's implement the same widget as in the example in Defining an Element Widget,
an attribute that can be added to any existing DOM element:
<pre>
// An attribute widget (my-watch) in a div tag
<div my-watch="name">text</div>
// An attribute widget (my:watch) in a div tag
<div my:watch="name">text</div>
</pre>
You can implement `my:watch` attribute like this:
<pre>
@ -45,7 +45,7 @@ angular.widget('@my:watch', function(expression, compileElement) {
var compiler = this;
return function(linkElement) {
var currentScope = this;
currentScope.$watch(expression, function(value){
currentScope.$watch(expression, function(value) {
alert(value);
});
};

View file

@ -87,14 +87,8 @@ function fnB($window, serviceA_, name){};
</pre>
If angular does not find a `$inject` annotation on the function, then it calls the `.toString()`
method and tries to infer what should be injected using the following rules:
* Any argument starting with `$` is an angular service and will be added to the `$inject` property
array
* Any argument ending with `_` will be added to the `$inject` property array (angular strips the
`_`)
* All arguments following an argument which has neither `$` nor `_` , must not have `$` nor `_`
(these are free arguments for {@link http://en.wikipedia.org/wiki/Currying currying})
method and tries to infer what should be injected by using function argument names as dependency
identifiers.
**IMPORTANT**
Minifiers/obfuscators change the names of function arguments and will therefore break the `$inject`

View file

@ -39,7 +39,7 @@ only, not recommended for real applications):
Angular creates models implicitly (by creating a scope property and assigning it a suitable value)
when processing the following template constructs:
* Form input, select, and textarea elements:
* Form input, select, textarea and other form elements:
<input name="query" value="fluffy cloud">

View file

@ -43,21 +43,17 @@ easier a web developer's life can if they're using angular:
<doc:example>
<doc:source>
<b>Invoice:</b>
<br/>
<br/>
<br />
<br />
<table>
<tr><td> </td><td> </td>
<tr><td>Quantity</td><td>Cost</td></tr>
<tr>
<td><input name="qty" value="1"
ng:validate="integer:0"
ng:required/></td>
<td><input name="cost" value="19.95"
ng:validate="number"
ng:required/></td>
<td><input name="qty" value="1" ng:validate="integer:0" ng:required /></td>
<td><input name="cost" value="19.95" ng:validate="number" ng:required /></td>
</tr>
</table>
<hr>
<hr />
<b>Total:</b> {{qty * cost | currency}}
</doc:source>
<!--

View file

@ -4,39 +4,42 @@
@description
Following is a unit test for the service in the example in {@link
dev_guide.services.registering_services Registering Angular Services}. The unit test example uses
Jasmine spy (mock) instead of a real browser alert.
dev_guide.services.creating_services Creating Angular Services}. The unit test example uses Jasmine
spy (mock) instead of a real browser alert.
<pre>
var mock, notify;
beforeEach(function() {
mock = {alert: jasmine.createSpy()};
notify = angular.service('notify')(mock);
mock = {alert: jasmine.createSpy()};
notify = angular.service('notify')(mock);
});
it('should not alert first two notifications', function() {
notify('one');
notify('two');
expect(mock.alert).not.toHaveBeenCalled();
notify('one');
notify('two');
expect(mock.alert).not.toHaveBeenCalled();
});
it('should alert all after third notification', function() {
notify('one');
notify('two');
notify('three');
expect(mock.alert).toHaveBeenCalledWith("one\ntwo\nthree");
notify('one');
notify('two');
notify('three');
expect(mock.alert).toHaveBeenCalledWith("one\ntwo\nthree");
});
it('should clear messages after alert', function() {
notify('one');
notify('two');
notify('third');
notify('more');
notify('two');
notify('third');
expect(mock.alert.callCount).toEqual(2);
expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
notify('one');
notify('two');
notify('third');
notify('more');
notify('two');
notify('third');
expect(mock.alert.callCount).toEqual(2);
expect(mock.alert.mostRecentCall.args).toEqual(["more\ntwo\nthird"]);
});
</pre>