Skip to content

Commit e16c6aa

Browse files
petebacondarwinpetebacondarwin
committed
docs(tutorial/step-3): fix experiments
Closes angular/angular-phonecat#142
1 parent 305696c commit e16c6aa

File tree

1 file changed

+32
-34
lines changed

1 file changed

+32
-34
lines changed

‎docs/content/tutorial/step_03.ngdoc

+32-34
Original file line numberDiff line numberDiff line change
@@ -136,58 +136,56 @@ To rerun the test suite, execute `npm run protractor` again.
136136

137137
# Experiments
138138

139-
* Display the current value of the `query` model by adding a `{{query}}` binding into the
139+
### Display Current Query
140+
Display the current value of the `query` model by adding a `{{query}}` binding into the
140141
`index.html` template, and see how it changes when you type in the input box.
141142

142-
* Let's see how we can get the current value of the `query` model to appear in the HTML page title.
143+
### Display Query in Title
144+
Let's see how we can get the current value of the `query` model to appear in the HTML page title.
143145

144-
You might think you could just add the `{{query}}` to the title tag element as follows:
146+
* Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`:
145147

146-
<title>Google Phone Gallery: {{query}}</title>
148+
```js
149+
it('should display the current filter value in the title bar', function() {
147150

148-
However, when you reload the page, you won't see the expected result. This is because the "query"
149-
model lives in the scope, defined by the `ng-controller="PhoneListCtrl"` directive, on the body element:
151+
expect(browser.getTitle()).toMatch(/Google Phone Gallery:\s*$/);
150152

151-
<body ng-controller="PhoneListCtrl">
153+
element(by.model('query')).sendKeys('nexus');
152154

153-
If you want to bind to the query model from the `<title>` element, you must __move__ the
154-
`ngController` declaration to the HTML element because it is the common parent of both the body
155-
and title elements:
155+
expect(browser.getTitle()).toMatch(/Google Phone Gallery: nexus$/);
156+
});
157+
```
156158

157-
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
159+
Run protractor (`npm run protractor`) to see this test fail.
158160

159-
Be sure to __remove__ the `ng-controller` declaration from the body element.
160161

161-
While using double curlies works fine within the title element, you might have noticed that
162-
for a split second they are actually displayed to the user while the page is loading. A better
163-
solution would be to use the {@link ng.directive:ngBind
164-
ngBind} or {@link ng.directive:ngBindTemplate
165-
ngBindTemplate} directives, which are invisible to the user while the page is loading:
162+
* You might think you could just add the `{{query}}` to the title tag element as follows:
166163

167-
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
164+
<title>Google Phone Gallery: {{query}}</title>
168165

169-
* Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`:
166+
However, when you reload the page, you won't see the expected result. This is because the "query"
167+
model lives in the scope, defined by the `ng-controller="PhoneListCtrl"` directive, on the body
168+
element:
170169

171-
```js
172-
it('should display the current filter value within an element with id "status"',
173-
function() {
174-
var statusElement = element(by.id('status'));
175-
expect(statusElement.getText()).toMatch(/Current filter:\s*$/);
170+
<body ng-controller="PhoneListCtrl">
176171

177-
element(by.model('query')).sendKeys('nexus');
172+
If you want to bind to the query model from the `<title>` element, you must __move__ the
173+
`ngController` declaration to the HTML element because it is the common parent of both the body
174+
and title elements:
178175

179-
expect(statusElement.getText()).toMatch(/Current filter: nexus\s*$/);
176+
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
180177

181-
//alternative version of the last assertion that tests just the value of the binding
182-
expect(element(by.binding('query')).getText()).toMatch(/Current filter: nexus\s*$/);
183-
});
184-
```
178+
Be sure to __remove__ the `ng-controller` declaration from the body element.
185179

186-
Re-run `npm run protractor` to see the test fail. To make the test pass, edit the `index.html`
187-
template to add a `div` or `p` element with `id` `"status"` and content with the `query` binding,
188-
prefixed by "Current filter:". For instance:
180+
* Re-run `npm run protractor` to see the test now pass.
181+
182+
* While using double curlies works fine within the title element, you might have noticed that
183+
for a split second they are actually displayed to the user while the page is loading. A better
184+
solution would be to use the {@link ng.directive:ngBind ngBind} or
185+
{@link ng.directive:ngBindTemplate ngBindTemplate} directives, which are invisible to the user
186+
while the page is loading:
189187

190-
<div id="status">Current filter: {{query}}</div>
188+
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
191189

192190

193191
# Summary

0 commit comments

Comments
 (0)