Bootstrapping the AngularJS Phonecat Project
Verify that the development environment matches the requirements outlined in the setup documentation before proceeding. All necessary dependencies must be installed to ensure compatibility.
Navigate too the angular-phonecat directory and reset the workspace to the initial tutorial state using Git:
git checkout -f step-0
This command reverts the local workspace to the baseline configuration for the first step. Note that any uncommitted changes in the working directory will be discarded. In subsequent sections, repeat this process using the corresponding step number.
Install project dependencies if they are not already present:
npm install
Launch the local development server in a separate terminal window:
npm start
Access the application by navigating to http://localhost:8000/index.html in a web browser. If the server was previously running on a different branch, perform a hard refresh to ensure the latest assets are loaded.
The initial view displays a simple message generated by AngularJS. Examine the core structure in app/index.html:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Angular Phonecat App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<p>Application State: {{'status' + ': ok'}}</p>
</body>
</html>
Core Components
The ng-app Directive
The ng-app attribute identifies the root element of the application. AngularJS uses this directive to determine which portion of the DOM it should manage. This allows developers to embed Angular applications within specific sections of a page or control the entire document.
Script Inclusion
Including the Angular library script triggers the initialization process. Once the DOM is ready, the script searches for the ng-app directive. Upon discovery, it bootstraps the application using the designated element as the root.
Data Binding The template demonstrates binding via double curly braces:
{{'status' + ': ok'}}
This syntax evaluates expressions within the current model scope rather than the global window context. The result is inserted into the DOM. Bindings are dynamic; if the underlying model data changes, the view updates automatically. After processing, the browser renders:
Application State: status: ok
Bootstrap Process
While ng-app provides automatic initialization suitable for most scenarios, manual bootstrapping is available for complex loading conditions. The automatic bootstrap sequence performs three primary actions:
- Creates the injector for dependency injection.
- Establishes the root scope as the model container.
- Compiles the DOM starting from the
ng-appelement, processing directives and bindings.
Once initialized, the application listens for browser events such as user interactions or HTTP responses. When a event modifies the model, AngularJS detects the change and updates the view accordingly.
Project Structure
The file structure derives from the angular-seed project, configured to support AngularJS development and testing. Modifications for this tutorial include:
- Removal of default example applications.
- Elimination of unnecessary dependencies.
- Addition of phone images in
app/img/phones/. - Inclusion of phone data JSON files in
app/phones/. - Addition of Bootstrap CSS via
bower.json.
