Skip to content

Commit 1c3a46a

Browse files
matskopetebacondarwin
matsko
authored and
petebacondarwin
committed
chore(ngdoc): wrap all pages inside of a container tag for easy styling
1 parent 4407e81 commit 1c3a46a

File tree

5 files changed

+187
-155
lines changed

5 files changed

+187
-155
lines changed

‎docs/content/tutorial/index.ngdoc

+106-108
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,115 @@
11
@ngdoc overview
2-
@name Tutorial
2+
@name Tutorial: Index
33
@description
44

5-
<div class="tutorial-page tutorial-page-no-nav">
6-
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
7-
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
8-
of Android devices, lets you filter the list to see only devices that interest you, and then view
9-
details for any device.
10-
11-
<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
12-
13-
Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
14-
or plug-ins. As you work through the tutorial, you will:
15-
16-
* See examples of how to use client-side data binding and dependency injection to build dynamic
17-
views of data that change immediately in response to user actions.
18-
* See how Angular creates listeners on your data without the need for DOM manipulation.
19-
* Learn a better, easier way to test your web apps.
20-
* Learn how to use Angular services to make common web tasks, such as getting data into your app,
21-
easier.
22-
23-
And all of this works in any browser without modification to the browser!
24-
25-
When you finish the tutorial you will be able to:
26-
27-
* Create a dynamic application that works in any browser.
28-
* Define the differences between Angular and common JavaScript frameworks.
29-
* Understand how data binding works in AngularJS.
30-
* Use the angular-seed project to quickly boot-strap your own projects.
31-
* Create and run tests.
32-
* Identify resources for learning more about AngularJS.
33-
34-
The tutorial guides you through the entire process of building a simple application, including
35-
writing and running unit and end-to-end tests. Experiments at the end of each step provide
36-
suggestions for you to learn more about AngularJS and the application you are building.
37-
38-
You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
39-
really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
40-
{@link misc/started Getting Started} document.
41-
42-
43-
44-
45-
46-
47-
48-
# Working with the code
49-
50-
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
51-
environment. The tutorial relies on the use of Git versioning system for source code management.
52-
You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
53-
and follow the instructions for setting up your computer.
54-
55-
<div class="tabbable" show="true">
56-
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
57-
<ol>
58-
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
5+
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
6+
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
7+
of Android devices, lets you filter the list to see only devices that interest you, and then view
8+
details for any device.
9+
10+
<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
11+
12+
Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
13+
or plug-ins. As you work through the tutorial, you will:
14+
15+
* See examples of how to use client-side data binding and dependency injection to build dynamic
16+
views of data that change immediately in response to user actions.
17+
* See how Angular creates listeners on your data without the need for DOM manipulation.
18+
* Learn a better, easier way to test your web apps.
19+
* Learn how to use Angular services to make common web tasks, such as getting data into your app,
20+
easier.
21+
22+
And all of this works in any browser without modification to the browser!
23+
24+
When you finish the tutorial you will be able to:
25+
26+
* Create a dynamic application that works in any browser.
27+
* Define the differences between Angular and common JavaScript frameworks.
28+
* Understand how data binding works in AngularJS.
29+
* Use the angular-seed project to quickly boot-strap your own projects.
30+
* Create and run tests.
31+
* Identify resources for learning more about AngularJS.
32+
33+
The tutorial guides you through the entire process of building a simple application, including
34+
writing and running unit and end-to-end tests. Experiments at the end of each step provide
35+
suggestions for you to learn more about AngularJS and the application you are building.
36+
37+
You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
38+
really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
39+
{@link misc/started Getting Started} document.
40+
41+
42+
43+
44+
45+
46+
47+
# Working with the code
48+
49+
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
50+
environment. The tutorial relies on the use of Git versioning system for source code management.
51+
You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
52+
and follow the instructions for setting up your computer.
53+
54+
<div class="tabbable" show="true">
55+
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
56+
<ol>
57+
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
58+
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
59+
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
60+
command in a terminal window:</p>
61+
<pre>node --version</pre>
62+
<p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
63+
don't have it already:</p>
64+
<pre>npm install -g karma</pre>
65+
<li><p>You'll also need Git, which you can get from
66+
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
67+
<li><p>Clone the angular-phonecat repository located at <a
68+
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
69+
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
70+
<p>This command creates the <code>angular-phonecat</code> directory in your current
71+
directory.</p></li>
72+
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
73+
<pre>cd angular-phonecat</pre>
74+
<p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
75+
directory.</p></li>
76+
<li><p>You will need an http server running on your system. Mac and Linux machines typically
77+
have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
78+
to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
79+
</ol>
80+
</div>
81+
82+
<div class="tab-pane well" id="git-win" title="Git on Windows">
83+
<ol>
84+
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
5985
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
6086
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
6187
command in a terminal window:</p>
6288
<pre>node --version</pre>
6389
<p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
64-
don't have it already:</p>
90+
don't have it already:</p>
6591
<pre>npm install -g karma</pre>
66-
<li><p>You'll also need Git, which you can get from
67-
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
68-
<li><p>Clone the angular-phonecat repository located at <a
69-
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
70-
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
71-
<p>This command creates the <code>angular-phonecat</code> directory in your current
72-
directory.</p></li>
73-
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
74-
<pre>cd angular-phonecat</pre>
75-
<p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
76-
directory.</p></li>
77-
<li><p>You will need an http server running on your system. Mac and Linux machines typically
78-
have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
79-
to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
80-
</ol>
81-
</div>
82-
83-
<div class="tab-pane well" id="git-win" title="Git on Windows">
84-
<ol>
85-
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
86-
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
87-
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
88-
command in a terminal window:</p>
89-
<pre>node --version</pre>
90-
<p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
91-
don't have it already:</p>
92-
<pre>npm install -g karma</pre>
93-
</li>
94-
<li><p>You'll also need Git, which you can get from
95-
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
96-
<li><p>Clone the angular-phonecat repository located at <a
97-
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
98-
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
99-
<p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li>
100-
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
101-
<pre>cd angular-phonecat</pre>
102-
<p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
103-
directory.</p>
104-
<p>You should run all <code>git</code> commands from Git bash.</p>
105-
<p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
106-
executed from the Windows command line.</li>
107-
<li><p>You need an http server running on your system, but if you don't already have one
108-
already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
109-
bundled http server.</p></li>
110-
</ol>
111-
</div>
112-
113-
The last thing to do is to make sure your computer has a web browser and a good text editor
114-
installed. Now, let's get some cool stuff done!
115-
116-
{@link step_00 <span class="btn btn-primary">Get Started!</span>}
117-
</div>
92+
</li>
93+
<li><p>You'll also need Git, which you can get from
94+
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
95+
<li><p>Clone the angular-phonecat repository located at <a
96+
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
97+
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
98+
<p>This command creates the <code>angular-phonecat</code> directory in your current directory.</p></li>
99+
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
100+
<pre>cd angular-phonecat</pre>
101+
<p>The tutorial instructions assume you are running all commands from the <code>angular-phonecat</code>
102+
directory.</p>
103+
<p>You should run all <code>git</code> commands from Git bash.</p>
104+
<p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
105+
executed from the Windows command line.</li>
106+
<li><p>You need an http server running on your system, but if you don't already have one
107+
already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
108+
bundled http server.</p></li>
109+
</ol>
110+
</div>
111+
112+
The last thing to do is to make sure your computer has a web browser and a good text editor
113+
installed. Now, let's get some cool stuff done!
114+
115+
{@link step_00 <span class="btn btn-primary">Get Started!</span>}

‎docs/content/tutorial/the_end.ngdoc

+12-14
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,20 @@
22
@name Tutorial: The End
33
@description
44

5-
<div class="tutorial-page tutorial-page-no-nav">
6-
Our application is now complete. Feel free to experiment with the code further, and jump back to
7-
previous steps using the `git checkout` command.
5+
Our application is now complete. Feel free to experiment with the code further, and jump back to
6+
previous steps using the `git checkout` command.
87

9-
For more details and examples of the Angular concepts we touched on in this tutorial, see the
10-
{@link guide/ Developer Guide}.
8+
For more details and examples of the Angular concepts we touched on in this tutorial, see the
9+
{@link guide/ Developer Guide}.
1110

12-
For several more examples of code, see the {@link cookbook/ Cookbook}.
11+
For several more examples of code, see the {@link cookbook/ Cookbook}.
1312

14-
When you are ready to start developing a project using Angular, we recommend that you bootstrap
15-
your development with the {@link https://github.com/angular/angular-seed angular-seed} project.
13+
When you are ready to start developing a project using Angular, we recommend that you bootstrap
14+
your development with the {@link https://github.com/angular/angular-seed angular-seed} project.
1615

17-
We hope this tutorial was useful to you and that you learned enough about Angular to make you want
18-
to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
19-
own, and that you might be interested in {@link misc/contribute contributing} to Angular.
16+
We hope this tutorial was useful to you and that you learned enough about Angular to make you want
17+
to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
18+
own, and that you might be interested in {@link misc/contribute contributing} to Angular.
2019

21-
If you have questions or feedback or just want to say "hi", please post a message at {@link
22-
https://groups.google.com/forum/#!forum/angular}.
23-
</div>
20+
If you have questions or feedback or just want to say "hi", please post a message at {@link
21+
https://groups.google.com/forum/#!forum/angular}.

0 commit comments

Comments
 (0)