Martin Staffa
189 lines
6.6 KiB
Plaintext
189 lines
6.6 KiB
Plaintext
@ngdoc tutorial
|
|
@name 0 - Bootstrapping
|
|
@step 0
|
|
@description
|
|
|
|
<ul doc-tutorial-nav="0"></ul>
|
|
|
|
In this step of the tutorial, you will become familiar with the most important source code files of
|
|
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.
|
|
|
|
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.
|
|
|
|
In the `angular-phonecat` directory, run this command:
|
|
|
|
```
|
|
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.
|
|
|
|
If you haven't already done so, you need to install the dependencies by running:
|
|
|
|
```
|
|
npm install
|
|
```
|
|
|
|
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.
|
|
|
|
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.
|
|
|
|
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 AngularJS elements that we will need as we progress.
|
|
|
|
**`app/index.html`:**
|
|
|
|
```html
|
|
<!doctype html>
|
|
<html lang="en" ng-app>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>My HTML File</title>
|
|
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
|
|
<script src="bower_components/angular/angular.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<p>Nothing here {{'yet' + '!'}}</p>
|
|
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
|
|
## What is the code doing?
|
|
|
|
<br />
|
|
**`ng-app` attribute:**
|
|
|
|
```html
|
|
<html ng-app>
|
|
```
|
|
|
|
The `ng-app` attribute represents an AngularJS directive, named `ngApp` (AngularJS uses `kebab-case` for
|
|
its custom attributes and `camelCase` for the corresponding directives which implement them). This
|
|
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
|
|
page or only a portion of it should be treated as the AngularJS application.
|
|
|
|
For more info on `ngApp`, check out the {@link ngApp API Reference}.
|
|
|
|
<br />
|
|
**`angular.js` script tag:**
|
|
|
|
```html
|
|
<script src="bower_components/angular/angular.js"></script>
|
|
```
|
|
|
|
This code downloads the `angular.js` script which registers a callback that will be executed by the
|
|
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
|
|
application with the root of the application DOM being the element on which the `ngApp` directive
|
|
was defined.
|
|
|
|
For more info on bootstrapping your app, checkout the [Bootstrap](guide/bootstrap) section of the
|
|
Developer Guide.
|
|
|
|
<br />
|
|
**Double-curly binding with an expression:**
|
|
|
|
```html
|
|
Nothing here {{'yet' + '!'}}
|
|
```
|
|
|
|
This line demonstrates two core features of AngularJS's templating capabilities:
|
|
|
|
* A binding, denoted by double-curlies: `{{ }}`
|
|
* A simple expression used in this binding: `'yet' + '!'`
|
|
|
|
The binding tells AngularJS that it should evaluate an expression and insert the result into the DOM
|
|
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.
|
|
|
|
{@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
|
|
context (`window`).
|
|
|
|
As expected, once this template is processed by AngularJS, the HTML page contains the text:
|
|
|
|
```
|
|
Nothing here yet!
|
|
```
|
|
|
|
## Bootstrapping AngularJS Applications
|
|
|
|
Bootstrapping AngularJS applications 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 the
|
|
{@link guide/bootstrap#manual-initialization imperative/manual way} to bootstrap the application.
|
|
|
|
There are 3 important things that happen during the bootstrap phase:
|
|
|
|
1. The {@link auto.$injector injector} that will be used for dependency injection is created.
|
|
|
|
2. The injector will then create the {@link ng.$rootScope root scope} that will become the context
|
|
for the model of our application.
|
|
|
|
3. AngularJS 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
|
|
clicks, key presses or incoming HTTP responses) that might change the model. Once such an event
|
|
occurs, AngularJS detects if it caused any model changes and if changes are found, AngularJS 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 [angular-seed project][angular-seed],
|
|
which is typically used to bootstrap new AngularJS projects. The seed project is pre-configured to
|
|
install the AngularJS framework (via `bower` into the `app/bower_components/` directory) and tools
|
|
for developing and testing a typical web application (via `npm`).
|
|
|
|
For the purposes of this tutorial, we modified the angular-seed with the following changes:
|
|
|
|
* Removed the example app.
|
|
* Removed unused dependencies.
|
|
* Added phone images to `app/img/phones/`.
|
|
* Added phone data files (JSON) to `app/phones/`.
|
|
* Added a dependency on [Bootstrap](http://getbootstrap.com) in the `bower.json` file.
|
|
|
|
|
|
## Experiments
|
|
|
|
<div></div>
|
|
|
|
* Try adding a new expression to `index.html` that will do some math:
|
|
|
|
```html
|
|
<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>
|
|
|
|
|
|
[angular-seed]: https://github.com/angular/angular-seed
|