Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit a526ae8

Browse files
petebacondarwinpetebacondarwin
committed
docs(tutorial): synch step 0 with angular-seed
1 parent b63fd11 commit a526ae8

File tree

2 files changed

+40
-91
lines changed

2 files changed

+40
-91
lines changed

‎docs/app/src/tutorials.js

+12-22
Original file line numberDiff line numberDiff line change
@@ -31,28 +31,18 @@ angular.module('tutorials', [])
3131

3232

3333
.directive('docTutorialReset', function() {
34-
function tab(name, command, id, step) {
35-
return '' +
36-
' <div class=\'tab-pane well\' title="' + name + '" value="' + id + '">\n' +
37-
' <ol>\n' +
38-
' <li><p>Reset the workspace to step ' + step + '.</p>' +
39-
' <pre>' + command + '</pre></li>\n' +
40-
' <li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-' + step + '/app">Angular\'s server</a>.</p></li>\n' +
41-
' </ol>\n' +
42-
' </div>\n';
43-
}
44-
4534
return {
46-
compile: function(element, attrs) {
47-
var step = attrs.docTutorialReset;
48-
element.html(
49-
'<div ng-hide="show">' +
50-
'<p><a href="" ng-click="show=true;$event.stopPropagation()">Workspace Reset Instructions ➤</a></p>' +
51-
'</div>\n' +
52-
'<div class="tabbable" ng-show="show" ng-model="$cookies.platformPreference">\n' +
53-
tab('Git on Mac/Linux', 'git checkout -f step-' + step, 'gitUnix', step) +
54-
tab('Git on Windows', 'git checkout -f step-' + step, 'gitWin', step) +
55-
'</div>\n');
56-
}
35+
scope: {
36+
'step': '@docTutorialReset'
37+
},
38+
template:
39+
'<div ng-hide="show">' +
40+
'<p><a href="" ng-click="show=true;$event.stopPropagation()">Workspace Reset Instructions ➤</a></p>' +
41+
'</div>\n' +
42+
'<div class="tabbable" ng-show="show">\n' +
43+
' <li><p>Reset the workspace to step {{step}}.</p>' +
44+
' <pre>git checkout -f step-{{step}}</pre></li>\n' +
45+
' <li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{{step}}/app">Angular\'s server</a>.</p></li>\n' +
46+
'</div>\n'
5747
};
5848
});

‎docs/content/tutorial/step_00.ngdoc

+28-69
Original file line numberDiff line numberDiff line change
@@ -11,65 +11,27 @@ with the most important source code files, learn how to start the development se
1111
angular-seed, and run the application in the browser.
1212

1313

14-
<div class="tabbable" show="true" ng-model="$cookies.platformPreference">
15-
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux" value="gitUnix">
16-
<ol>
17-
<li><p>In <code>angular-phonecat</code> directory, run this command:</p>
18-
<pre>git checkout -f step-0</pre>
19-
<p>This resets your workspace to step 0 of the tutorial app.</p>
20-
<p>You must repeat this for every future step in the tutorial and change the number to
21-
the number of the step you are on. This will cause any changes you made within
22-
your working directory to be lost.</p></li>
23-
24-
<li>To see the app running in a browser, do one of the following:
25-
<ul>
26-
<li><b>For node.js users:</b>
27-
<ol>
28-
<li>In a <i>separate</i> terminal tab or window, run <code>npm start</code> to start the web server.</li>
29-
<li>Open a browser window for the app and navigate to <a
30-
href="http://localhost:8000/app/index.html" target="_blank">`http://localhost:8000/app/index.html`</a></li>
31-
</ol>
32-
</li>
33-
<li><b>For other http servers:</b>
34-
<ol>
35-
<li>Configure the server to serve the files in the <code>angular-phonecat</code> directory.</li>
36-
<li>Navigate in your browser to <code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
37-
</ol>
38-
</li>
39-
</ul>
40-
</li>
41-
</ol>
42-
</div>
43-
44-
45-
<div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
46-
<ol>
47-
<li><p>Open Git bash and run this command (in <code>angular-phonecat</code> directory):</p>
48-
<pre>git checkout -f step-0</pre>
49-
<p>This resets your workspace to step 0 of the tutorial app.</p>
50-
<p>You must repeat this for every future step in the tutorial and change the number to
51-
the number of the step you are on. This will cause any changes you made within
52-
your working directory to be lost.</p></li>
53-
<li>To see the app running in a browser, do one of the following:
54-
<ul>
55-
<li><b>For node.js users:</b>
56-
<ol>
57-
<li>In a <i>separate</i> terminal tab or window, run <code>node scripts\web-server.js</code> to start the web server.</li>
58-
<li>Open a browser window for the app and navigate to <a href="http://localhost:8000/app/index.html" target="_blank">`http://localhost:8000/app/index.html`</a></li>
59-
</ol>
60-
</li>
61-
<li><b>For other http servers:</b>
62-
<ol>
63-
<li>Configure the server to serve the files in the <code>angular-phonecat</code> directory.</li>
64-
<li>Navigate in your browser to <code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
65-
</ol>
66-
</li>
67-
</ul>
68-
</li>
69-
</ol>
70-
</div>
71-
</div>
14+
In `angular-phonecat` directory, run this command:
7215

16+
```
17+
git checkout -f step-0
18+
```
19+
20+
21+
This resets your workspace to step 0 of the tutorial app.
22+
23+
You must repeat this for every future step in the tutorial and change the number to the number of
24+
the step you are on. This will cause any changes you made within your working directory to be lost.
25+
26+
If you haven't already done so you need to install the dependencies by running:
27+
28+
```
29+
npm install
30+
```
31+
32+
To see the app running in a browser, open a *separate* terminal/command line tab or window, then
33+
run `npm start` to start the web server. Now, open a browser window for the app and navigate to
34+
<a href="http://localhost:8000/app/index.html" target="_blank">`http://localhost:8000/app/index.html`</a>
7335

7436
You can now see the page in your browser. It's not very exciting, but that's OK.
7537

@@ -114,7 +76,7 @@ __`app/index.html`:__
11476

11577
* AngularJS script tag:
11678

117-
<script src="../bower_components/angular/angular.js"></script>
79+
<script src="../bower_components/angular/angular.js">
11880

11981
This code downloads the `angular.js` script and registers a callback that will be executed by the
12082
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
@@ -171,16 +133,17 @@ and one static binding, and our model is empty. That will soon change!
171133

172134
## What are all these files in my working directory?
173135

174-
Most of the files in your working directory come from the [angular-seed project](https://github.com/angular/angular-seed) which is typically used to bootstrap
175-
new Angular projects. The seed project includes the latest Angular libraries, test libraries,
176-
scripts and a simple example app, all pre-configured for developing a typical web app.
136+
137+
Most of the files in your working directory come from the [angular-seed project][angular-seed] which
138+
is typically used to bootstrap new Angular projects. The seed project is pre-configured to install
139+
the angular framework (via `bower`) and tools for developing a typical web app (via `npm`).
177140

178141
For the purposes of this tutorial, we modified the angular-seed with the following changes:
179142

180143
* Removed the example app
181144
* Added phone images to `app/img/phones/`
182145
* Added phone data files (JSON) to `app/phones/`
183-
* Added [Bootstrap](http://getbootstrap.com) files to `app/css/` and `app/img/`
146+
* Added a dependency on [Bootstrap](http://getbootstrap.com) in the `bower.json` file.
184147

185148

186149

@@ -199,9 +162,5 @@ Now let's go to {@link step_01 step 1} and add some content to the web app.
199162

200163
<ul doc-tutorial-nav="0"></ul>
201164

202-
<div style="display: none">
203-
Note: During the bootstrap the injector and the root scope will then be associated with the
204-
element on which the `ngApp` directive was declared, so when debugging the app you can retrieve
205-
them from browser console via `angular.element(rootElement).scope()` and
206-
`angular.element(rootElement).injector()`.
207-
</div>
165+
166+
[angular-seed]: https://github.com/angular/angular-seed

0 commit comments

Comments
 (0)