Home > Developer > Web Develop
We are now ready to write the ANGULARJS application--phonecat. This step (step 0), you will be familiar with the important source code files, learn to launch the development environment containing the ANGULARJS seed project, and run the app on the browser side.
Enter the Angular-phonecat directory and run the following command:
git checkout -f step-0This command resets the working directory of the Phonecat project, and it is recommended that you run this command at each learning step to 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.jsTo start the server, the command line terminal will be prompted Http Server running at http://localhost:8000 after startup, please do not close the terminal, shut down the terminal is shut down the server. Enter http://localhost:8000/app/index.html in the browser to access our Phonecat app.
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 app is built from the following HTML code, which contains the key elements of Angularjs, which is what we need to learn.
App/index.html
<!doctype html> Lang="EN" Ng-app> <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><body><p>nothing here {' yet ' + '! '}} </p></body></HTML> ng-applang="en" ng-app>
ng-appThe directive marks the scope of the Angularjs script, and adding the attribute in it means that the ng-app entire angularjs script scope. Developers can also use directives locally ng-app , such as the <div ng-app> Angularjs script to run only in that <div> .
Angularjs Script Tags:<script src="lib/angular/angular.js"></script>
This line of code loads the Angular.js script, and when the browser loads the entire HTML page, the Angular.js script will be executed, and the Angular.js script will look for ng-app HTML tags that contain instructions after it is run. The tag defines the scope of the Angularjs app.
Expression for double curly braces binding:<p>Nothing here {{‘yet‘ + ‘!‘}}</p>
This line of code demonstrates the core functionality of the Angularjs template-binding, which consists of double curly braces {{}} and expressions ‘yet‘ + ‘!‘ .
This binding tells Angularjs to need to operate 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 the expression operation changes.
Angularjs expressions angular expression is a JavaScript-like code fragment that Angularjs expressions run only in the scope of ANGULARJS, not throughout the DOM.
Guided ANGULARJS applicationsUsing the Ngapp directive to automatically guide the ANGULARJS application is a neat way to fit most situations. In advanced development, such as using a script to load an app, you can also use bootstrap to manually boot the Angularjs app.
The ANGULARJS application boot process has 3 important points:
- The injector (injector) will be used to create a dependency injection (dependency injection) for this application;
- The injector will create the root scope as the scope of our application model;
- Angularjs will link the DOM in the root scope, starting with the HTML tag tagged with Ngapp, and gradually processing the instructions and bindings in the DOM.
Once the Angularjs app is booted, it will continue to listen for browser HTML-triggered events, such as mouse click events, keystroke events, HTTP incoming responses, and other changes to the DOM model. Once such incidents occur, ANGULARJS will automatically detect changes and make corresponding processing and updates.
The structure of the application above 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 app 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 libraries, 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:
- Remove the sample application;
- Add phone images to app/img/phones/;
- Add mobile data Files (JSON) to app/phones/;
- Add Twitter bootstrap files to app/css/and app/img/.
PracticeTry adding new expressions about mathematical operations to index.html:
<p>1 + 2 = {{ 1 + 2 }}</p>
SummarizeNow let's go to step 1 and add some content to the Web application.
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
