We are now starting to prepare ANGULARJS application--phonecat. This step (step 0) will familiarize you with the important source code files, learn to start the development environment that contains 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, and it is recommended that you run this command at each learning step and change the number in the command to the number that corresponds to your learning step, which clears any changes you make in the working directory.
Run the following command:
Node Scripts/web-server.js
To start the server, the command line terminal will prompt HTTP server running at http://localhost:8000 when it is started, please do not close the terminal, shut down the terminal and shut down the server. Enter http://localhost:8000/app/index.html in the browser to access our Phonecat application.
Now, in the browser you should have seen our initial application, very simple, but it shows that our project is ready to run.
"Nothing here yet!" shown in the application is built from the following HTML code, which contains the key elements of angularjs that we need to learn.
App/index.html
<!doctype html>
What is the code doing?
NG-APP directive:
The NG-APP directive marks the scope of the Angularjs script, and adding the Ng-app attribute in
Angularjs Script Tags:
<script src= "Lib/angular/angular.js" ></script>
This line of code loads the Angular.js script, and when the browser finishes loading the entire HTML page, it executes the angular.js script, and the angular.js script then looks for an HTML tag that contains the NG-APP directive, which defines the scope of the ANGULARJS application.
An expression that is bound by two curly braces:
<p>nothing here {' yet ' + '! '}} </p>
This line of code demonstrates the core functionality of the Angularjs template-binding, which consists of a double brace {}} and an expression ' yet ' + '! ' Composition
This binding tells ANGULARJS to compute the expression and insert the result into the DOM, and the next step we'll see is that the DOM can be updated in real time as the result of an expression operation changes.
The ANGULARJS expression angular expression is a JavaScript-like code fragment, and Angularjs expressions run only in the scope of the ANGULARJS, not across the DOM.
Guide ANGULARJS Application
It is a neat way to automatically guide Angularjs applications via Ngapp directives, which is suitable for most situations. In advanced development, such as using script mount applications, you can also use bootstrap to manually guide ANGULARJS applications.
The ANGULARJS application boot process has 3 important points:
1. The injector (injector) will be used to create the dependency injection (Dependency injection) for this application;
2. The injector will create the root scope as the range of our application model;
3.AngularJS will link the DOM in the root scope, starting with the HTML tag with the Ngapp tag, and gradually processing the instructions and bindings in the DOM.
Once the ANGULARJS application is booted, it will continue to listen for browser-triggered events such as mouse click events, keystroke events, HTTP incoming responses, and so on to 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 instruction and one static binding, and the model is empty. Next we try a slightly more complex application!
What are the files in my working directory?
The above application comes from the Angularjs seed project, and we can usually use the Angularjs seed project to create a new project. The seed project includes the latest ANGULARJS code base, test library, scripts, and a simple application sample 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:
Delete the sample application;
Practice
Try adding new expressions about mathematical operations to index.html:
<p>1 + 2 = {1 + 2}}</p>
Summarize
Now let's go to step 1 and add some content to the Web application.
above is the ANGULARJS guidance program of data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
