mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-05-17 19:11:08 +00:00
docs(tutorial): fix the float issue with the improve docs button
This commit is contained in:
Matias Niemelä
Pete Bacon Darwin
parent
cdf75b302f
commit
5bc2836a0d
3 changed files with 114 additions and 98 deletions
|
|
@ -2,41 +2,42 @@
|
||||||
@name Tutorial
|
@name Tutorial
|
||||||
@description
|
@description
|
||||||
|
|
||||||
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
|
<div class="tutorial-page tutorial-page-no-nav">
|
||||||
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
|
A great way to get introduced to AngularJS is to work through this tutorial, which walks you through
|
||||||
of Android devices, lets you filter the list to see only devices that interest you, and then view
|
the construction of an AngularJS web app. The app you will build is a catalog that displays a list
|
||||||
details for any device.
|
of Android devices, lets you filter the list to see only devices that interest you, and then view
|
||||||
|
details for any device.
|
||||||
|
|
||||||
<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
|
<img class="diagram" src="img/tutorial/catalog_screen.png" width="488" height="413">
|
||||||
|
|
||||||
Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
|
Work through the tutorial to see how Angular makes browsers smarter — without the use of extensions
|
||||||
or plug-ins. As you work through the tutorial, you will:
|
or plug-ins. As you work through the tutorial, you will:
|
||||||
|
|
||||||
* See examples of how to use client-side data binding and dependency injection to build dynamic
|
* See examples of how to use client-side data binding and dependency injection to build dynamic
|
||||||
views of data that change immediately in response to user actions.
|
views of data that change immediately in response to user actions.
|
||||||
* See how Angular creates listeners on your data without the need for DOM manipulation.
|
* See how Angular creates listeners on your data without the need for DOM manipulation.
|
||||||
* Learn a better, easier way to test your web apps.
|
* Learn a better, easier way to test your web apps.
|
||||||
* Learn how to use Angular services to make common web tasks, such as getting data into your app,
|
* Learn how to use Angular services to make common web tasks, such as getting data into your app,
|
||||||
easier.
|
easier.
|
||||||
|
|
||||||
And all of this works in any browser without modification to the browser!
|
And all of this works in any browser without modification to the browser!
|
||||||
|
|
||||||
When you finish the tutorial you will be able to:
|
When you finish the tutorial you will be able to:
|
||||||
|
|
||||||
* Create a dynamic application that works in any browser.
|
* Create a dynamic application that works in any browser.
|
||||||
* Define the differences between Angular and common JavaScript frameworks.
|
* Define the differences between Angular and common JavaScript frameworks.
|
||||||
* Understand how data binding works in AngularJS.
|
* Understand how data binding works in AngularJS.
|
||||||
* Use the angular-seed project to quickly boot-strap your own projects.
|
* Use the angular-seed project to quickly boot-strap your own projects.
|
||||||
* Create and run tests.
|
* Create and run tests.
|
||||||
* Identify resources for learning more about AngularJS.
|
* Identify resources for learning more about AngularJS.
|
||||||
|
|
||||||
The tutorial guides you through the entire process of building a simple application, including
|
The tutorial guides you through the entire process of building a simple application, including
|
||||||
writing and running unit and end-to-end tests. Experiments at the end of each step provide
|
writing and running unit and end-to-end tests. Experiments at the end of each step provide
|
||||||
suggestions for you to learn more about AngularJS and the application you are building.
|
suggestions for you to learn more about AngularJS and the application you are building.
|
||||||
|
|
||||||
You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
|
You can go through the whole tutorial in a couple of hours or you may want to spend a pleasant day
|
||||||
really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
|
really digging into it. If you're looking for a shorter introduction to AngularJS, check out the
|
||||||
{@link misc/started Getting Started} document.
|
{@link misc/started Getting Started} document.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -44,72 +45,73 @@ really digging into it. If you're looking for a shorter introduction to AngularJ
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Working with the code
|
# Working with the code
|
||||||
|
|
||||||
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
|
You can follow this tutorial and hack on the code in either the Mac/Linux or the Windows
|
||||||
environment. The tutorial relies on the use of Git versioning system for source code management.
|
environment. The tutorial relies on the use of Git versioning system for source code management.
|
||||||
You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
|
You don't need to know anything about Git to follow the tutorial. Select one of the tabs below
|
||||||
and follow the instructions for setting up your computer.
|
and follow the instructions for setting up your computer.
|
||||||
|
|
||||||
<div class="tabbable" show="true">
|
<div class="tabbable" show="true">
|
||||||
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
|
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux">
|
||||||
<ol>
|
<ol>
|
||||||
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
|
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
|
||||||
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
|
|
||||||
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
|
|
||||||
command in a terminal window:</p>
|
|
||||||
<pre>node --version</pre>
|
|
||||||
<p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
|
|
||||||
don't have it already:</p>
|
|
||||||
<pre>npm install -g karma</pre>
|
|
||||||
<li><p>You'll also need Git, which you can get from
|
|
||||||
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
|
|
||||||
<li><p>Clone the angular-phonecat repository located at <a
|
|
||||||
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
|
|
||||||
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
|
|
||||||
<p>This command creates the <code>angular-phonecat</code> directory in your current
|
|
||||||
directory.</p></li>
|
|
||||||
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
|
|
||||||
<pre>cd angular-phonecat</pre>
|
|
||||||
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
|
|
||||||
directory.</p></li>
|
|
||||||
<li><p>You will need an http server running on your system. Mac and Linux machines typically
|
|
||||||
have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
|
|
||||||
to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-pane well" id="git-win" title="Git on Windows">
|
|
||||||
<ol>
|
|
||||||
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
|
|
||||||
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
|
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
|
||||||
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
|
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
|
||||||
command in a terminal window:</p>
|
command in a terminal window:</p>
|
||||||
<pre>node --version</pre>
|
<pre>node --version</pre>
|
||||||
<p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
|
<p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
|
||||||
don't have it already:</p>
|
don't have it already:</p>
|
||||||
<pre>npm install -g karma</pre>
|
<pre>npm install -g karma</pre>
|
||||||
</li>
|
<li><p>You'll also need Git, which you can get from
|
||||||
<li><p>You'll also need Git, which you can get from
|
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
|
||||||
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
|
<li><p>Clone the angular-phonecat repository located at <a
|
||||||
<li><p>Clone the angular-phonecat repository located at <a
|
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
|
||||||
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
|
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
|
||||||
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
|
<p>This command creates the <code>angular-phonecat</code> directory in your current
|
||||||
<p>This command creates the angular-phonecat directory in your current directory.</p></li>
|
directory.</p></li>
|
||||||
<li><p>Change your current directory to angular-phonecat.</p>
|
<li><p>Change your current directory to <code>angular-phonecat</code>:</p>
|
||||||
<pre>cd angular-phonecat</pre>
|
<pre>cd angular-phonecat</pre>
|
||||||
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
|
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
|
||||||
directory.</p>
|
directory.</p></li>
|
||||||
<p>You should run all <code>git</code> commands from Git bash.</p>
|
<li><p>You will need an http server running on your system. Mac and Linux machines typically
|
||||||
<p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
|
have Apache pre-installed, but If you don't already have one installed, you can use <code>node</code>
|
||||||
executed from the Windows command line.</li>
|
to run <code>scripts/web-server.js</code>, a simple bundled http server.</p></li>
|
||||||
<li><p>You need an http server running on your system, but if you don't already have one
|
</ol>
|
||||||
already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
|
</div>
|
||||||
bundled http server.</p></li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
The last thing to do is to make sure your computer has a web browser and a good text editor
|
<div class="tab-pane well" id="git-win" title="Git on Windows">
|
||||||
installed. Now, let's get some cool stuff done!
|
<ol>
|
||||||
|
<li><p>You will need Node.js and Karma to run unit tests, so please verify that you have
|
||||||
|
<a href="http://nodejs.org/">Node.js</a> v0.8 or better installed
|
||||||
|
and that the <code>node</code> executable is on your <code>PATH</code> by running the following
|
||||||
|
command in a terminal window:</p>
|
||||||
|
<pre>node --version</pre>
|
||||||
|
<p>Additionally install <a href="http://karma-runner.github.io/">Karma</a> if you
|
||||||
|
don't have it already:</p>
|
||||||
|
<pre>npm install -g karma</pre>
|
||||||
|
</li>
|
||||||
|
<li><p>You'll also need Git, which you can get from
|
||||||
|
<a href="http://git-scm.com/download">the Git site</a>.</p></li>
|
||||||
|
<li><p>Clone the angular-phonecat repository located at <a
|
||||||
|
href="https://github.com/angular/angular-phonecat">Github</a> by running the following command:</p>
|
||||||
|
<pre>git clone git://github.com/angular/angular-phonecat.git</pre>
|
||||||
|
<p>This command creates the angular-phonecat directory in your current directory.</p></li>
|
||||||
|
<li><p>Change your current directory to angular-phonecat.</p>
|
||||||
|
<pre>cd angular-phonecat</pre>
|
||||||
|
<p>The tutorial instructions assume you are running all commands from the angular-phonecat
|
||||||
|
directory.</p>
|
||||||
|
<p>You should run all <code>git</code> commands from Git bash.</p>
|
||||||
|
<p>Other commands like <code>test.bat</code> or <code>e2e-test.bat</code> should be
|
||||||
|
executed from the Windows command line.</li>
|
||||||
|
<li><p>You need an http server running on your system, but if you don't already have one
|
||||||
|
already installed, you can use <code>node</code> to run <code>scripts\web-server.js</code>, a simple
|
||||||
|
bundled http server.</p></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
{@link step_00 <span class="btn btn-primary">Get Started!</span>}
|
The last thing to do is to make sure your computer has a web browser and a good text editor
|
||||||
|
installed. Now, let's get some cool stuff done!
|
||||||
|
|
||||||
|
{@link step_00 <span class="btn btn-primary">Get Started!</span>}
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,22 @@
|
||||||
@name Tutorial: The End
|
@name Tutorial: The End
|
||||||
@description
|
@description
|
||||||
|
|
||||||
Our application is now complete. Feel free to experiment with the code further, and jump back to
|
<div class="tutorial-page tutorial-page-no-nav">
|
||||||
previous steps using the `git checkout` command.
|
Our application is now complete. Feel free to experiment with the code further, and jump back to
|
||||||
|
previous steps using the `git checkout` command.
|
||||||
|
|
||||||
For more details and examples of the Angular concepts we touched on in this tutorial, see the
|
For more details and examples of the Angular concepts we touched on in this tutorial, see the
|
||||||
{@link guide/ Developer Guide}.
|
{@link guide/ Developer Guide}.
|
||||||
|
|
||||||
For several more examples of code, see the {@link cookbook/ Cookbook}.
|
For several more examples of code, see the {@link cookbook/ Cookbook}.
|
||||||
|
|
||||||
When you are ready to start developing a project using Angular, we recommend that you bootstrap
|
When you are ready to start developing a project using Angular, we recommend that you bootstrap
|
||||||
your development with the {@link https://github.com/angular/angular-seed angular-seed} project.
|
your development with the {@link https://github.com/angular/angular-seed angular-seed} project.
|
||||||
|
|
||||||
We hope this tutorial was useful to you and that you learned enough about Angular to make you want
|
We hope this tutorial was useful to you and that you learned enough about Angular to make you want
|
||||||
to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
|
to learn more. We especially hope you are inspired to go out and develop Angular web apps of your
|
||||||
own, and that you might be interested in {@link misc/contribute contributing} to Angular.
|
own, and that you might be interested in {@link misc/contribute contributing} to Angular.
|
||||||
|
|
||||||
If you have questions or feedback or just want to say "hi", please post a message at {@link
|
If you have questions or feedback or just want to say "hi", please post a message at {@link
|
||||||
https://groups.google.com/forum/#!forum/angular}.
|
https://groups.google.com/forum/#!forum/angular}.
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -296,3 +296,15 @@ ul.events > li > h3 {
|
||||||
position:relative;
|
position:relative;
|
||||||
z-index:1031;
|
z-index:1031;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tutorial-page {
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
.tutorial-page-no-nav {
|
||||||
|
padding-top:50px;
|
||||||
|
}
|
||||||
|
.tutorial-page-no-nav .improve-docs {
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
right:0;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue