2014-02-06 13:33:42 +00:00
|
|
|
@ngdoc tutorial
|
|
|
|
|
@name 0 - Bootstrapping
|
|
|
|
|
@step 0
|
2012-03-30 14:02:26 -07:00
|
|
|
@description
|
|
|
|
|
|
2012-04-28 22:45:28 -07:00
|
|
|
<ul doc-tutorial-nav="0"></ul>
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2015-11-02 20:40:53 +01:00
|
|
|
In this step of the tutorial, you will become familiar with the most important source code files of
|
2016-03-27 21:32:36 +03:00
|
|
|
the AngularJS Phonecat App. You will also learn how to start the development servers bundled with
|
|
|
|
|
[angular-seed][angular-seed], and run the application in the browser.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
Before you continue, make sure you have set up your development environment and installed all
|
|
|
|
|
necessary dependencies, as described in the {@link tutorial/#environment-setup Environment Setup}
|
|
|
|
|
section.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2015-11-02 20:40:53 +01:00
|
|
|
In the `angular-phonecat` directory, run this command:
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2014-04-02 21:07:54 +01:00
|
|
|
```
|
|
|
|
|
git checkout -f step-0
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
This resets your workspace to step 0 of the tutorial app.
|
|
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
If you haven't already done so, you need to install the dependencies by running:
|
2014-04-02 21:07:54 +01:00
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm install
|
|
|
|
|
```
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
To see the app running in a browser, open a _separate_ terminal/command line tab or window, then run
|
|
|
|
|
`npm start` to start the web server. Now, open a browser window for the app and navigate to
|
|
|
|
|
http://localhost:8000/index.html.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
Note that if you already ran the master branch app prior to checking out step-0, you may see the
|
|
|
|
|
cached master version of the app in your browser window at this point. Just hit refresh to re-load
|
|
|
|
|
the page.
|
2015-01-01 18:14:26 +08:00
|
|
|
|
2012-03-30 14:02:26 -07:00
|
|
|
You can now see the page in your browser. It's not very exciting, but that's OK.
|
|
|
|
|
|
2012-04-02 08:32:30 -07:00
|
|
|
The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below.
|
2017-01-24 17:23:54 +00:00
|
|
|
The code contains some key AngularJS elements that we will need as we progress.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
**`app/index.html`:**
|
2014-02-06 14:02:18 +00:00
|
|
|
|
|
|
|
|
```html
|
2012-03-30 14:02:26 -07:00
|
|
|
<!doctype html>
|
2012-04-27 15:18:54 -07:00
|
|
|
<html lang="en" ng-app>
|
2016-03-27 21:32:36 +03:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>My HTML File</title>
|
2018-11-02 16:41:12 +02:00
|
|
|
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />
|
|
|
|
|
<script src="lib/angular/angular.js"></script>
|
2016-03-27 21:32:36 +03:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<p>Nothing here {{'yet' + '!'}}</p>
|
|
|
|
|
|
|
|
|
|
</body>
|
2012-03-30 14:02:26 -07:00
|
|
|
</html>
|
2014-02-06 14:02:18 +00:00
|
|
|
```
|
2012-03-30 14:02:26 -07:00
|
|
|
|
|
|
|
|
|
|
|
|
|
## What is the code doing?
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
<br />
|
|
|
|
|
**`ng-app` attribute:**
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
```html
|
|
|
|
|
<html ng-app>
|
|
|
|
|
```
|
|
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
The `ng-app` attribute represents an AngularJS directive, named `ngApp` (AngularJS uses `kebab-case` for
|
2016-03-27 21:32:36 +03:00
|
|
|
its custom attributes and `camelCase` for the corresponding directives which implement them). This
|
2017-01-24 17:23:54 +00:00
|
|
|
directive is used to flag the HTML element that AngularJS should consider to be the root element of
|
|
|
|
|
our application. This gives application developers the freedom to tell AngularJS if the entire HTML
|
2016-03-27 21:32:36 +03:00
|
|
|
page or only a portion of it should be treated as the AngularJS application.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
For more info on `ngApp`, check out the {@link ngApp API Reference}.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
<br />
|
|
|
|
|
**`angular.js` script tag:**
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
```html
|
2018-11-02 16:41:12 +02:00
|
|
|
<script src="lib/angular/angular.js"></script>
|
2016-03-27 21:32:36 +03:00
|
|
|
```
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
This code downloads the `angular.js` script which registers a callback that will be executed by the
|
2017-01-24 17:23:54 +00:00
|
|
|
browser when the containing HTML page is fully downloaded. When the callback is executed, AngularJS
|
|
|
|
|
looks for the {@link ngApp ngApp} directive. If AngularJS finds the directive, it will bootstrap the
|
2016-03-27 21:32:36 +03:00
|
|
|
application with the root of the application DOM being the element on which the `ngApp` directive
|
|
|
|
|
was defined.
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
For more info on bootstrapping your app, checkout the [Bootstrap](guide/bootstrap) section of the
|
|
|
|
|
Developer Guide.
|
|
|
|
|
|
|
|
|
|
<br />
|
2015-03-08 13:21:32 +01:00
|
|
|
**Double-curly binding with an expression:**
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
```html
|
|
|
|
|
Nothing here {{'yet' + '!'}}
|
|
|
|
|
```
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
This line demonstrates two core features of AngularJS's templating capabilities:
|
2014-07-03 12:49:22 +01:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
* A binding, denoted by double-curlies: `{{ }}`
|
|
|
|
|
* A simple expression used in this binding: `'yet' + '!'`
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
The binding tells AngularJS that it should evaluate an expression and insert the result into the DOM
|
2016-03-27 21:32:36 +03:00
|
|
|
in place of the binding. As we will see in the next steps, rather than a one-time insert, a binding
|
|
|
|
|
will result in efficient continuous updates whenever the result of the expression evaluation
|
|
|
|
|
changes.
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
{@link guide/expression AngularJS expressions} are JavaScript-like code snippets that are evaluated by
|
|
|
|
|
AngularJS in the context of the current model scope, rather than within the scope of the global
|
2016-03-27 21:32:36 +03:00
|
|
|
context (`window`).
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
As expected, once this template is processed by AngularJS, the HTML page contains the text:
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
```
|
|
|
|
|
Nothing here yet!
|
|
|
|
|
```
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
## Bootstrapping AngularJS Applications
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
Bootstrapping AngularJS applications automatically using the `ngApp` directive is very easy and
|
2016-03-27 21:32:36 +03:00
|
|
|
suitable for most cases. In advanced cases, such as when using script loaders, you can use the
|
|
|
|
|
{@link guide/bootstrap#manual-initialization imperative/manual way} to bootstrap the application.
|
|
|
|
|
|
|
|
|
|
There are 3 important things that happen during the bootstrap phase:
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2014-02-12 22:47:42 +00:00
|
|
|
1. The {@link auto.$injector injector} that will be used for dependency injection is created.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
2. The injector will then create the {@link ng.$rootScope root scope} that will become the context
|
|
|
|
|
for the model of our application.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
2017-01-24 17:23:54 +00:00
|
|
|
3. AngularJS will then "compile" the DOM starting at the `ngApp` root element, processing any
|
2012-04-02 08:32:30 -07:00
|
|
|
directives and bindings found along the way.
|
|
|
|
|
|
|
|
|
|
Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
|
2016-03-27 21:32:36 +03:00
|
|
|
clicks, key presses or incoming HTTP responses) that might change the model. Once such an event
|
2017-01-24 17:23:54 +00:00
|
|
|
occurs, AngularJS detects if it caused any model changes and if changes are found, AngularJS will
|
2016-03-27 21:32:36 +03:00
|
|
|
reflect them in the view by updating all of the affected bindings.
|
2012-04-02 08:32:30 -07:00
|
|
|
|
|
|
|
|
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!
|
|
|
|
|
|
2012-04-28 22:45:28 -07:00
|
|
|
<img class="diagram" src="img/tutorial/tutorial_00.png">
|
2012-03-30 14:02:26 -07:00
|
|
|
|
|
|
|
|
|
|
|
|
|
## What are all these files in my working directory?
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
Most of the files in your working directory come from the [angular-seed project][angular-seed],
|
|
|
|
|
which is typically used to bootstrap new AngularJS projects. The seed project is pre-configured to
|
2018-11-02 16:41:12 +02:00
|
|
|
install the AngularJS framework (via `npm` into the `app/lib/` directory) and tools for developing
|
|
|
|
|
and testing a typical web application (via `npm`).
|
2012-03-30 14:02:26 -07:00
|
|
|
|
|
|
|
|
For the purposes of this tutorial, we modified the angular-seed with the following changes:
|
|
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
* Removed the example app.
|
|
|
|
|
* Removed unused dependencies.
|
|
|
|
|
* Added phone images to `app/img/phones/`.
|
|
|
|
|
* Added phone data files (JSON) to `app/phones/`.
|
2018-11-02 16:41:12 +02:00
|
|
|
* Added a dependency on [Bootstrap][bootstrap-3.3] in the `package.json` file.
|
2012-03-30 14:02:26 -07:00
|
|
|
|
|
|
|
|
|
2018-02-27 17:33:42 +01:00
|
|
|
## Experiments
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
<div></div>
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
* Try adding a new expression to `index.html` that will do some math:
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2016-03-27 21:32:36 +03:00
|
|
|
```html
|
|
|
|
|
<p>1 + 2 = {{1 + 2}}</p>
|
|
|
|
|
```
|
2012-04-02 08:32:30 -07:00
|
|
|
|
|
|
|
|
|
2018-02-27 17:33:42 +01:00
|
|
|
## Summary
|
2012-03-30 14:02:26 -07:00
|
|
|
|
|
|
|
|
Now let's go to {@link step_01 step 1} and add some content to the web app.
|
|
|
|
|
|
|
|
|
|
|
2012-04-28 22:45:28 -07:00
|
|
|
<ul doc-tutorial-nav="0"></ul>
|
2012-04-02 08:32:30 -07:00
|
|
|
|
2014-04-02 21:07:54 +01:00
|
|
|
|
|
|
|
|
[angular-seed]: https://github.com/angular/angular-seed
|
2018-11-02 16:38:46 +02:00
|
|
|
[bootstrap-3.3]: https://getbootstrap.com/docs/3.3
|
