Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 15:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
angular.js/docs/content/tutorial/step_00.ngdoc

208 lines
8.2 KiB
Text
Raw Normal View History

chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
@ngdoc overview
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
@name Tutorial: 0 - Bootstrapping
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
@description
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
<ul doc-tutorial-nav="0"></ul>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
You are now ready to build the AngularJS phonecat app. In this step, you will become familiar
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
with the most important source code files, learn how to start the development servers bundled with
angular-seed, and run the application in the browser.
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
<div class="tabbable" show="true" ng-model="$cookies.platformPreference">
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux" value="gitUnix">
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
<ol>
docs(tutorial): add missing 'node' command and <code> tags
2013-06-14 18:40:56 +00:00
<li><p>In <code>angular-phonecat</code> directory, run this command:</p>
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
<pre>git checkout -f step-0</pre>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
<p>This resets your workspace to step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
docs(tutorial): fix links in step 00
2013-08-21 09:17:52 +00:00
<li>In a <i>separate</i> terminal tab or window, run <code>node ./scripts/web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a
Update step_00.ngdoc the <a> is incorrect. there is no space between "a" and "href"
2013-08-20 16:23:42 +00:00
href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
docs(tutorial): fix links in step 00
2013-08-21 09:17:52 +00:00
<li>Configure the server to serve the files in the <code>angular-phonecat</code> directory.</li>
<li>Navigate in your browser to <code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
</ol>
</li>
</ul>
</li>
</ol>
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
</div>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
<div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
<ol>
docs(tutorial): add missing 'node' command and <code> tags
2013-06-14 18:40:56 +00:00
<li><p>Open Git bash and run this command (in <code>angular-phonecat</code> directory):</p>
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
<pre>git checkout -f step-0</pre>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
<p>This resets your workspace to step 0 of the tutorial app.</p>
<p>You must repeat this for every future step in the tutorial and change the number to
the number of the step you are on. This will cause any changes you made within
your working directory to be lost.</p></li>
<li>To see the app running in a browser, do one of the following:
<ul>
<li><b>For node.js users:</b>
<ol>
docs(tutorial): fix links in step 00
2013-08-21 09:17:52 +00:00
<li>In a <i>separate</i> terminal tab or window, run <code>node scripts\web-server.js</code> to start the web server.</li>
<li>Open a browser window for the app and navigate to <a href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html</a></li>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
</ol>
</li>
<li><b>For other http servers:</b>
<ol>
docs(tutorial): fix links in step 00
2013-08-21 09:17:52 +00:00
<li>Configure the server to serve the files in the <code>angular-phonecat</code> directory.</li>
<li>Navigate in your browser to <code>http://localhost:[port-number]/[context-path]/app/index.html</code>.</li>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
</ol>
</li>
</ul>
</li>
</ol>
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
</div>
</div>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
You can now see the page in your browser. It's not very exciting, but that's OK.
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below.
The code contains some key Angular elements that we will need going forward.
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
__`app/index.html`:__
<pre>
<!doctype html>
docs(tutorial): update all the remaining steps I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
2012-04-27 22:18:54 +00:00
<html lang="en" ng-app>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
<head>
<meta charset="utf-8">
docs(tutorial): update all the remaining steps I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
2012-04-27 22:18:54 +00:00
<title>My HTML File</title>
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
<link rel="stylesheet" href="css/app.css">
docs(tutorial): update all the remaining steps I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
2012-04-27 22:18:54 +00:00
<link rel="stylesheet" href="css/bootstrap.css">
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
<script src="lib/angular/angular.js"></script>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
</head>
<body>
docs(tutorial): update all the remaining steps I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
2012-04-27 22:18:54 +00:00
<p>Nothing here {{'yet' + '!'}}</p>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
</body>
</html>
</pre>
## What is the code doing?
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
* `ng-app` directive:
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
<html ng-app>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
docs(tutorial): update step_00.ngdoc Clarify the little snippet on dash vs camelCase html to directive naming pattern Closes #3550
2013-08-12 14:51:55 +00:00
The `ng-app` attribute represents an Angular directive named `ngApp` (Angular uses
`name-with-dashes` for its custom attributes and `camelCase` for the corresponding directives
that implements them).
This directive is used to flag the html element that Angular should consider to be the root element
of our application.
doc(misc) Mention how attribute names map to directive names.
2012-07-18 18:55:52 +00:00
This gives application developers the freedom to tell Angular if the entire html page or only a
portion of it should be treated as the Angular application.
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
* AngularJS script tag:
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
<script src="lib/angular/angular.js">
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
This code downloads the `angular.js` script and registers a callback that will be executed by the
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
docs(*): simplify doc urls we now have two types of namespaces: - true namespace: angular.* - used for all global apis - virtual namespace: ng.*, ngMock.*, ... - used for all DI modules the virual namespaces have services under the second namespace level (e.g. ng.) and filters and directives prefixed with filter: and directive: respectively (e.g. ng.filter:orderBy, ng.directive:ngRepeat) this simplifies urls and makes them a lot shorter while still avoiding name collisions
2012-06-12 06:49:24 +00:00
looks for the {@link api/ng.directive:ngApp ngApp} directive. If
fix(docs): change all directive references to use the normalized names
2012-04-06 23:35:17 +00:00
Angular finds the directive, it will bootstrap the application with the root of the application DOM
being the element on which the `ngApp` directive was defined.
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
* Double-curly binding with an expression:
docs(tutorial): remove extra back-tick character
2013-01-30 21:22:36 +00:00
Nothing here {{'yet' + '!'}}
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
This line demonstrates the core feature of Angular's templating capabilities – a binding, denoted
by double-curlies `{{ }}` as well as a simple expression `'yet' + '!'` used in this binding.
docs(tutorial): fix typo in step_00 Just removed an extra comma. No big deal.
2012-08-23 08:02:28 +00:00
The binding tells Angular that it should evaluate an expression and insert the result into the
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
DOM in place of the binding. Rather than a one-time insert, as we'll see in the next steps, a
binding will result in efficient continuous updates whenever the result of the expression
evaluation changes.
doc(guide): clean up broken links
2012-05-24 21:49:47 +00:00
{@link guide/expression Angular expression} is a JavaScript-like code snippet that is
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
evaluated by Angular in the context of the current model scope, rather than within the scope of
the global context (`window`).
docs(guide): correct couple of typos
2012-04-25 17:33:04 +00:00
As expected, once this template is processed by Angular, the html page contains the text:
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
"Nothing here yet!".
## Bootstrapping AngularJS apps
fix(docs): change all directive references to use the normalized names
2012-04-06 23:35:17 +00:00
Bootstrapping AngularJS apps automatically using the `ngApp` directive is very easy and suitable
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
for most cases. In advanced cases, such as when using script loaders, you can use
doc(guide): clean up broken links
2012-05-24 21:49:47 +00:00
{@link guide/bootstrap imperative / manual way} to bootstrap the app.
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
There are 3 important things that happen during the app bootstrap:
docs(*): simplify doc urls we now have two types of namespaces: - true namespace: angular.* - used for all global apis - virtual namespace: ng.*, ngMock.*, ... - used for all DI modules the virual namespaces have services under the second namespace level (e.g. ng.) and filters and directives prefixed with filter: and directive: respectively (e.g. ng.filter:orderBy, ng.directive:ngRepeat) this simplifies urls and makes them a lot shorter while still avoiding name collisions
2012-06-12 06:49:24 +00:00
1. The {@link api/AUTO.$injector injector} that will be used for dependency injection
docs(tutorial/step0): fix minor typo Closes #4154
2013-09-25 12:39:40 +00:00
when this app is created.
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
docs(*): simplify doc urls we now have two types of namespaces: - true namespace: angular.* - used for all global apis - virtual namespace: ng.*, ngMock.*, ... - used for all DI modules the virual namespaces have services under the second namespace level (e.g. ng.) and filters and directives prefixed with filter: and directive: respectively (e.g. ng.filter:orderBy, ng.directive:ngRepeat) this simplifies urls and makes them a lot shorter while still avoiding name collisions
2012-06-12 06:49:24 +00:00
2. The injector will then create the {@link api/ng.$rootScope root scope} that will
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
become the context for the model of our application.
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
fix(docs): change all directive references to use the normalized names
2012-04-06 23:35:17 +00:00
3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
directives and bindings found along the way.
Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
docs(guide): correct couple of typos
2012-04-25 17:33:04 +00:00
click, key press or incoming HTTP response) that might change the model. Once such an event occurs,
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
Angular detects if it caused any model changes and if changes are found, Angular will reflect them
in the view by updating all of the affected bindings.
The structure of our application is currently very simple. The template contains just one directive
and one static binding, and our model is empty. That will soon change!
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
<img class="diagram" src="img/tutorial/tutorial_00.png">
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
## What are all these files in my working directory?
Most of the files in your working directory come from the {@link
https://github.com/angular/angular-seed angular-seed project} which is typically used to bootstrap
new Angular projects. The seed project includes the latest Angular libraries, test libraries,
scripts and a simple example app, all pre-configured for developing a typical web app.
For the purposes of this tutorial, we modified the angular-seed with the following changes:
* Removed the example app
docs(tutorial): update all the remaining steps I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
2012-04-27 22:18:54 +00:00
* Added phone images to `app/img/phones/`
* Added phone data files (JSON) to `app/phones/`
* Added [Bootstrap](http://twitter.github.com/bootstrap/) files to `app/css/` and `app/img/`
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
# Experiments
* Try adding a new expression to the `index.html` that will do some math:
<p>1 + 2 = {{ 1 + 2 }}</p>
chore(docs): restore old tutorial ngdoc files
2012-03-30 21:02:26 +00:00
# Summary
Now let's go to {@link step_01 step 1} and add some content to the web app.
chore(docs): re-skin main documentation
2012-04-29 05:45:28 +00:00
<ul doc-tutorial-nav="0"></ul>
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
docs(tutorial): update all the remaining steps I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
2012-04-27 22:18:54 +00:00
<div style="display: none">
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
Note: During the bootstrap the injector and the root scope will then be associated with the
fix(docs): change all directive references to use the normalized names
2012-04-06 23:35:17 +00:00
element on which the `ngApp` directive was declared, so when debugging the app you can retrieve
them from browser console via `angular.element(rootElement).scope()` and
docs(tutorial): update tutorial intro + steps 0-3 also contains all kinds of fixes that I had to make in the docs app to get the tutorial to render correctly
2012-04-02 15:32:30 +00:00
`angular.element(rootElement).injector()`.
docs(tutorial): update all the remaining steps I made some diagrams and portions of the text that are stil stale invisible. We'll fix these in the next relese.
2012-04-27 22:18:54 +00:00
</div>
Reference in a new issue Copy permalink