AngularJS Getting Started Tutorial (Zero): Bootstrap_AngularJS

We are now ready to write the AngularJS application - phonecat. In this step (Step 0), you will become familiar with the important source code files, learn to start the development environment containing the AngularJS seed project, and run the application in the browser.

Enter the angular-phonecat directory and run the following command:

Copy code The code 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 and change the number in the command to the number corresponding to your learning step. This command will clear the changes you made in the working directory. any changes.

Run the following command:

Copy code The code is as follows:

node scripts/web-server.js

to start the server. After starting, the command line terminal will prompt Http Server running at http://localhost:8000. Please do not close the terminal. Closing the terminal will shut down the server. Enter http://localhost:8000/app/index.html in the browser to access our phonecat application.

Now, you should have seen our initial application in the browser, it is very simple, but it shows that our project is ready to run.

The "Nothing here yet!" displayed in the application is constructed from the following HTML code. The code contains the key elements of AngularJS, which is what we need to learn.

app/index.html

Copy code The code is as follows:

Nothing here {{'yet' '!'}}

What is the code doing?

ng-app directive:

Copy code The code is as follows:

The

ng-app directive marks the scope of the AngularJS script. Adding the ng-app attribute to means that the entire is the scope of the AngularJS script. Developers can also use the ng-app directive locally, such as

, and the AngularJS script will only run in that

.

AngularJS script tag:

Copy code The code is as follows:

This line of code loads the angular.js script. When the browser completes loading the entire HTML page, it will execute the angular.js script. After the angular.js script is run, it will look for the HTML tag containing the ng-app directive. , this tag defines the scope of the AngularJS application.

Expression bound by double braces:

Copy code The code is as follows:

Nothing here {{'yet' '!'}}

This line of code demonstrates the core function of AngularJS templates - binding. This binding consists of double curly brackets {{}} and the expression 'yet' '!'.

This binding tells AngularJS that it needs to evaluate the expression 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 result changes.

AngularJS expression Angular expression is a code snippet similar to JavaScript. AngularJS expression only runs in the scope of AngularJS instead of running in the entire DOM.

Bootstrap AngularJS application

Automatically booting AngularJS applications through the ngApp directive is a concise way and suitable for most situations. In advanced development, such as using scripts to load applications, you can also use bootstrap to manually bootstrap AngularJS applications.

There are three important points in the AngularJS application bootstrapping process:

1. The injector will be used 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 to the DOM in the root scope, starting from the HTML tag marked with ngApp, and gradually process the instructions and bindings in the DOM.

Once the AngularJS application is booted, it will continue to listen to the browser's HTML-triggered events, such as mouse click events, key events, HTTP incoming responses and other events that change the DOM model. Once such an event occurs, AngularJS will automatically detect the change and handle and update it accordingly.

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 we try a slightly more complex application!

What are these files in my working directory for?

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 libraries, scripts and a simple application example, which 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/.

Practice

Try adding new expressions about mathematical operations to index.html:

Copy code The code is as follows:

1 2 = {{ 1 2 }}

Summary

Now let’s move to step 1 and add some content to the web application.