Of Stack

Introduction to AngularJS tutorial (zero) : bootstrap

  • 2020-03-30 04:31:58
  • OfStack

We are now ready to write an AngularJS application, phonecat. In this step (step 0), you will familiarize yourself with important source code files, learn to launch the development environment containing the AngularJS seed project, and run the application on the browser side.

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



git checkout -f step-0

This command resets 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 your learning step, and the command clears any changes you make in the working directory.

Run the following command: 



node scripts/web-server.js

To start the Server, after starting the command line terminal will prompt the Http Server running at http://localhost:8000, please do not close the terminal, close the terminal to close the Server. Type http://localhost:8000/app/index.html in your browser to access our phonecat application.

By now, you should have seen our initial application in the browser, which is simple, but indicates that our project is ready to run.

"Nothing here yet!" in the application It is built from the following HTML code that contains the key elements of AngularJS that we need to learn.

App/index. HTML 



<!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 instructions: 



<html lang="en" ng-app>

The ng-app directive marks the scope of the AngularJS script in < Html> To add ng-app attribute in the whole < Html> Both are AngularJS script scope. Developers can also locally use ng-app commands such as < Div ng - app> , then the AngularJS script is only in that < Div> In the running.

AngularJS script tag: 



<script src="lib/angular/angular.js"></script>

This line of code loads the angular. Js script, when the browser loads the entire HTML page, the angular. Js script will be executed.

Expression bound by double braces: 



<p>Nothing here {{'yet' + '!'}}</p>

This line of code demonstrates the core functionality of the AngularJS template -- the binding, which consists of double braces {{}}} and the expression 'yet' + '! '.

This binding tells AngularJS to evaluate the expression and insert the result into the DOM, and as we'll see in the next step, the DOM can be updated in real time as the result of the expression is changed.

AngularJS Angular expression is a javascript-like snippet of code that runs only in the scope of AngularJS, not in the entire DOM.

Boot the AngularJS application

Automatically booting an AngularJS application with the ngApp directive is a neat way to do it in most cases. In advanced development, such as scripting an application, you can also manually boot an AngularJS application using bootstrap.

There are three important points in the application boot process of AngularJS:

1. 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 the DOM in the root scope, starting with 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 for HTML trigger events in the browser, such as mouse click events, key events, HTTP incoming responses, and other events that change the DOM model. Once this kind of event occurs, AngularJS will automatically detect the change and make the corresponding processing and update.

The structure of the above application is very simple. The template package contains only one instruction and one static binding, and the model is also empty. Next we try a slightly more complicated application!

What are these files in my working directory for?

The above application comes from the AngularJS seed project, which is usually used 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 needed 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 phone image 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 math to index.html: 



<p>1 + 2 = {{ 1 + 2 }}</p>

conclusion

Now let's go to step 1 and add something to the web application.

Related articles: