mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-17 19:11:08 +00:00
docs - various doc fixes
This commit is contained in:
parent
b842642b57
commit
3c87611188
3 changed files with 29 additions and 55 deletions
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue