mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-16 23:30:23 +00:00
doc(guide): various fixes and improvements
This commit is contained in:
parent
3e54a1b18a
commit
a79231dea6
7 changed files with 43 additions and 53 deletions
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue