We are now preparing to write AngularJS application - phonecat. In this step (step 0), you will become familiar with important source code files, learn to start a development environment containing AngularJS seed projects, and run the application on the browser side.
Enter the angular-phonecat directory and run the following command:
The code copy is as follows:
git checkout -f step-0
This command will reset the working directory of the phonecat project. It is recommended that you run this command at each learning step, change the number in the command to the number corresponding to the learning step, and the command will clear any changes you made in the working directory.
Run the following command:
The code copy is as follows:
node scripts/web-server.js
To start the server, the command line terminal will prompt Http Server running at http://localhost:8000. Please do not close the terminal. Close the terminal will close the server. Enter http://localhost:8000/app/index.html into your browser to access our phonecat application.
Now, in the browser you should have seen our initial application, which is simple, but it means that our project is ready to run.
The "Nothing here yet!" displayed in the application is constructed from the following HTML code, which contains the key elements of AngularJS, which is exactly what we need to learn.
app/index.html
The code copy is as follows:
<!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>
What is the code doing?
ng-app directive:
The code copy is as follows:
<html lang="en" ng-app>
The ng-app directive marks the scope of AngularJS script. Adding the ng-app attribute in <html> means that the entire <html> is the scope of AngularJS script. Developers can also use ng-app directives locally, such as <div ng-app>, and AngularJS scripts are only run in that <div>.
AngularJS script tag:
The code copy is as follows:
<script src="lib/angular/angular.js"></script>
This line of code is loaded into the angular.js script. When the browser loads the entire HTML page, the angular.js script will be executed. After the angular.js script is run, it will look for an HTML tag containing the ng-app directive. This tag defines the scope of the AngularJS application.
Double braces bound expression:
The code copy is as follows:
<p>Nothing here {{'yet' + '!'}}</p>
This line of code demonstrates the core function of AngularJS template - binding, which consists of double braces {{}} and the expression 'yet' + '!'.
This binding tells AngularJS that it needs to compute the expressions and insert the result into the DOM. In the next steps, we will see that the DOM can be updated in real time as the expression operation results change.
AngularJS expression Angular expression is a JavaScript-like snippet, AngularJS expressions only run in the scope of AngularJS, not in the entire DOM.
Boot the AngularJS application
Automatically booting AngularJS applications through ngApp directives is a concise way to suit most situations. In advanced development, such as using scripts to load an app, you can also use bootstrap to manually boot AngularJS applications.
There are three important points in the AngularJS application boot process:
1. The injector will use to create dependency injection for this application;
2. The injector will create the root scope as the scope of our application model;
3. AngularJS will link the DOM in the root scope, starting with HTML tags marked with ngApp, and gradually dealing with directives and bindings in the DOM.
Once the AngularJS application is booted, it will continue to listen to the browser's HTML triggering events, such as mouse click events, key press events, HTTP incoming responses, etc. that change the DOM model. Once such events occur, AngularJS will automatically detect changes and make corresponding processing and updates.
The structure of the above application is very simple. The template package contains only one directive and one static binding, and the model is also empty. Next, let's try a slightly more complex application!
What do these files in my working directory do?
The above application comes from AngularJS seed project, we can usually use AngularJS seed project to create new projects. The seed project includes the latest AngularJS code base, test library, scripts, and a simple application example that contains the basic configuration required to develop a typical web application.
For this tutorial, we made the following changes to the AngularJS seed project:
1. Delete the sample application;
2. Add mobile phone images to app/img/phones/;
3. Add mobile phone data file (JSON) to app/phones/;
4. Add Twitter Bootstrap files to app/css/ and app/img/.
practise
Try adding a new expression about mathematical operations to index.html:
The code copy is as follows:
<p>1 + 2 = {{ 1 + 2 }}</p>
Summarize
Now let's go to step 1 and add some content to the web application.