docs - various doc fixes

This commit is contained in:
Igor Minar 2011-06-15 22:32:24 -07:00
parent b842642b57
commit 3c87611188
3 changed files with 29 additions and 55 deletions

View file

@ -3,61 +3,54 @@
@name Developer Guide: Angular HTML Compiler: Extending the Angular Compiler @name Developer Guide: Angular HTML Compiler: Extending the Angular Compiler
@description @description
Let's say that we want to create a new DOM element called `<my:greeter/>` that displays a greeting. Let's say that we want to create a new DOM element called `<my:greeter/>` that displays a greeting.
We want this HTML source: We want this HTML source:
<pre> <pre>
<div ng:init="salutation='Hello'; name='World'"> <div ng:init="s='Hello'; n='World'">
<my:greeter salutation="salutation" name="name"/> <my:greeter salutation="s" name="n"/>
</div> </div>
</pre> </pre>
to produce this DOM: to produce this DOM:
<pre> <pre>
<div ng:init="salutation='Hello'; name='World'"> <div ng:init="s='Hello'; n='World'">
<my:greeter salutation="salutation" name="name"/> <my:greeter salutation="s" name="n"/>
<span class="salutation">Hello</span> <span class="salutation">Hello</span>
<span class="name">World</span>! <span class="name">World</span>!
</my:greeter> </my:greeter>
</div> </div>
</pre> </pre>
That is, the new `<my:greeter/>` tag's `salutation` and `name` attributes should be transformed by 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 the compiler such that two `<span>` tags display the values of the attributes, with CSS classes
applied to the output. applied to the output.
The following code snippet shows how to write a following widget definition that will be processed 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 by the compiler. Note that you have to declare the {@link dev_guide.bootstrap namespace} `my` in
the page: the page:
<pre> <pre>
angular.widget('my:greeter', function(compileElement){ angular.widget('my:greeter', function(compileElement){
var compiler = this; var compiler = this;
compileElement.css('display', 'block'); compileElement.css('display', 'block');
var salutationExp = compileElement.attr('salutation'); var salutationExp = compileElement.attr('salutation');
var nameExp = compileElement.attr('name'); var nameExp = compileElement.attr('name');
return function(linkElement){ return function(linkElement){
var salutationSpan = angular.element('<span class="salutation"></span'); var salutationSpan = angular.element('<span class="salutation"></span');
var nameSpan = angular.element('<span class="name"></span>'); var nameSpan = angular.element('<span class="name"></span>');
linkElement.append(salutationSpan); linkElement.append(salutationSpan);
linkElement.append(compiler.text(' ')); linkElement.append(compiler.text(' '));
linkElement.append(nameSpan); linkElement.append(nameSpan);
linkElement.append(compiler.text('!')); linkElement.append(compiler.text('!'));
this.$watch(salutationExp, function(value){ this.$watch(salutationExp, function(value){
salutationSpan.text(value); salutationSpan.text(value);
}); });
this.$watch(nameExp, function(value){ this.$watch(nameExp, function(value){
nameSpan.text(value); nameSpan.text(value);
}); });
}; };
}); });
</pre> </pre>

View file

@ -150,13 +150,11 @@ function MyClass(xhr) {
} }
</pre> </pre>
This is the preferred way since the code makes no assumptions as to where the `xhr` comes from,
This is the proferred way since the code makes no assumptions as to where the `xhr` comes from, rather that whoever created the class was responsible for passing it in. Since the creator of the
rather that who-ever crated the class was responsible for passing it in. Since the creator of the class should be different code than the user of the class, it separates the responsibility of
class should be different code the the user of the class, it separates the responsibility of
creation from the logic, and that is what dependency-injection is in a nutshell. creation from the logic, and that is what dependency-injection is in a nutshell.
The class above is very testable, since in the test we can write: The class above is very testable, since in the test we can write:
<pre> <pre>
function xhrMock(args) {...} function xhrMock(args) {...}
@ -165,21 +163,16 @@ myClass.doWork();
// assert that xhrMock got called with the right arguments // assert that xhrMock got called with the right arguments
</pre> </pre>
Notice that no global variables were harmed in the writing of this test. Notice that no global variables were harmed in the writing of this test.
Angular comes with {@link dev_guide.di dependency-injection} built in which makes the right thing
Angular comes with {@link dev_guide.di dependency-injection} built in which makes the right thin easy to do, but you still need to do it if you wish to take advantage of the testability story.
the easy thing to do, but you still need to do it if you wish to take advantage of the testability
story.
## Controllers ## Controllers
What makes each application unique is its logic, which is what we would like to test. If the logic What makes each application unique is its logic, which is what we would like to test. If the logic
for your application is mixed in with DOM manipulation, it will be hard to test as in the example for your application is mixed in with DOM manipulation, it will be hard to test as in the example
below: below:
<pre> <pre>
function PasswordController(){ function PasswordController(){
// get references to DOM elements // get references to DOM elements

View file

@ -88,46 +88,34 @@ describe('checkmark filter', function() {
}) })
</pre> </pre>
To run the unit tests, execute the `./scripts/test.sh` script and you should see the following To run the unit tests, execute the `./scripts/test.sh` script and you should see the following
output. output.
Chrome: Runner reset. Chrome: Runner reset.
.... ....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms) Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms) Chrome 11.0.696.57 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
# Experiments # Experiments
* Let's experiment with some of the {@link api/angular.filter built-in angular filters} and add the * Let's experiment with some of the {@link api/angular.filter built-in angular filters} and add the
following bindings to `index.html`: following bindings to `index.html`:
* `{{ "lower cap string" | uppercase }}` * `{{ "lower cap string" | uppercase }}`
* `{{ {foo: "bar", baz: 23} | json }}` * `{{ {foo: "bar", baz: 23} | json }}`
* `{{ 1304375948024 | date }}` * `{{ 1304375948024 | date }}`
* `{{ 1304375948024 | date:"'MM/dd/yyyy @ h:mma" }}` * `{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}`
* We can also create a model with an input element, and combine it with a filtered binding. Add * We can also create a model with an input element, and combine it with a filtered binding. Add
the following to index.html: the following to index.html:
<input name="userInput"> Uppercased: {{ userInput | uppercase }} <input name="userInput"> Uppercased: {{ userInput | uppercase }}
# Summary # Summary
Now that you have learned how to write and test a custom filter, go to step 10 to learn how we can Now that you have learned how to write and test a custom filter, go to step 10 to learn how we can
use angular to enhance the phone details page further. use angular to enhance the phone details page further.
<ul doc:tutorial-nav="9"></ul> <ul doc:tutorial-nav="9"></ul>