mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-17 15:40:22 +00:00
212 lines
8.1 KiB
Text
212 lines
8.1 KiB
Text
@ngdoc overview
|
||
@name Tutorial: 0 - Bootstrapping
|
||
@description
|
||
|
||
<ul doc-tutorial-nav="0"></ul>
|
||
|
||
|
||
You are now ready to build the AngularJS phonecat app. In this step, you will become familiar
|
||
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.
|
||
|
||
|
||
<div class="tabbable" show="true" ng-model="$cookies.platformPreference">
|
||
<div class="tab-pane well" id="git-mac" title="Git on Mac/Linux" value="gitUnix">
|
||
<ol>
|
||
<li><p>In angular-phonecat directory, run this command:</p>
|
||
<pre>git checkout -f step-0</pre>
|
||
<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>
|
||
<li>In a <i>separate</i> terminal tab or window, run
|
||
<code>./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>
|
||
</ol>
|
||
</li>
|
||
<li><b>For other http servers:</b>
|
||
<ol>
|
||
<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>
|
||
</ol>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
|
||
<div class="tab-pane well" id="git-win" title="Git on Windows" value="gitWin">
|
||
<ol>
|
||
<li><p>Open Git bash and run this command (in angular-phonecat directory):</p>
|
||
<pre>git checkout -f step-0</pre>
|
||
<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>
|
||
<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>
|
||
</ol>
|
||
</li>
|
||
<li><b>For other http servers:</b>
|
||
<ol>
|
||
<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>
|
||
</ol>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
You can now see the page in your browser. It's not very exciting, but that's OK.
|
||
|
||
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.
|
||
|
||
__`app/index.html`:__
|
||
<pre>
|
||
<!doctype html>
|
||
<html lang="en" ng-app>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>My HTML File</title>
|
||
<link rel="stylesheet" href="css/app.css">
|
||
<link rel="stylesheet" href="css/bootstrap.css">
|
||
<script src="lib/angular/angular.js"></script>
|
||
</head>
|
||
<body>
|
||
|
||
<p>Nothing here {{'yet' + '!'}}</p>
|
||
|
||
</body>
|
||
</html>
|
||
</pre>
|
||
|
||
|
||
|
||
## What is the code doing?
|
||
|
||
* `ng-app` directive:
|
||
|
||
<html ng-app>
|
||
|
||
The `ng-app` attribute represents an Angular directive (named `ngApp`; Angular uses
|
||
`name-with-dashes` for attribute names and `camelCase` for the corresponding directive name)
|
||
used to flag an element which Angular should consider to be the root element of our application.
|
||
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.
|
||
|
||
* AngularJS script tag:
|
||
|
||
<script src="lib/angular/angular.js">
|
||
|
||
This code downloads the `angular.js` script and registers a callback that will be executed by the
|
||
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
|
||
looks for the {@link api/ng.directive:ngApp ngApp} directive. If
|
||
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.
|
||
|
||
* Double-curly binding with an expression:
|
||
|
||
Nothing here {{'yet' + '!'}}`
|
||
|
||
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.
|
||
|
||
The binding tells Angular that it should evaluate an expression and insert the result into the
|
||
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.
|
||
|
||
{@link guide/expression Angular expression} is a JavaScript-like code snippet that is
|
||
evaluated by Angular in the context of the current model scope, rather than within the scope of
|
||
the global context (`window`).
|
||
|
||
As expected, once this template is processed by Angular, the html page contains the text:
|
||
"Nothing here yet!".
|
||
|
||
## Bootstrapping AngularJS apps
|
||
|
||
Bootstrapping AngularJS apps automatically using the `ngApp` directive is very easy and suitable
|
||
for most cases. In advanced cases, such as when using script loaders, you can use
|
||
{@link guide/bootstrap imperative / manual way} to bootstrap the app.
|
||
|
||
There are 3 important things that happen during the app bootstrap:
|
||
|
||
1. The {@link api/AUTO.$injector injector} that will be used for dependency injection
|
||
within this app is created.
|
||
|
||
2. The injector will then create the {@link api/ng.$rootScope root scope} that will
|
||
become the context for the model of our application.
|
||
|
||
3. Angular will then "compile" the DOM starting at the `ngApp` root element, processing any
|
||
directives and bindings found along the way.
|
||
|
||
|
||
Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
|
||
click, key press or incoming HTTP response) that might change the model. Once such an event occurs,
|
||
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!
|
||
|
||
<img class="diagram" src="img/tutorial/tutorial_00.png">
|
||
|
||
|
||
## 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
|
||
* 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/`
|
||
|
||
|
||
|
||
# Experiments
|
||
|
||
* Try adding a new expression to the `index.html` that will do some math:
|
||
|
||
<p>1 + 2 = {{ 1 + 2 }}</p>
|
||
|
||
|
||
|
||
# Summary
|
||
|
||
Now let's go to {@link step_01 step 1} and add some content to the web app.
|
||
|
||
|
||
<ul doc-tutorial-nav="0"></ul>
|
||
|
||
<div style="display: none">
|
||
Note: During the bootstrap the injector and the root scope will then be associated with the
|
||
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
|
||
`angular.element(rootElement).injector()`.
|
||
</div>
|