Home > Developer > JavaScript
AngularJS getting started tutorial (0): Pilot Program, angularjs getting started tutorial
Now we are preparing to compile the AngularJS application phonecat. In this step (Step 0), you will be familiar with important source code files, learn to start the development environment that contains the AngularJS seed project, and run the application on the browser side.
Go to the angular-phonecat directory and run the following command:
Copy codeThe Code is as follows:
Git checkout-f step-0
This command resets the working directory of the phonecat project. We recommend that you run this command in each Learning step to change the number in the command to the number corresponding to your learning step, this command will clear any changes you make in the working directory.
Run the following command:
Copy codeThe Code is as follows:
Node scripts/web-server.js
The command line terminal will prompt the Http Server running at http: // localhost: 8000. Do not close the terminal. 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 indicates that our project is ready to run.
"Nothing here yet!" displayed in the Application !" It is constructed from the following HTML code. The Code contains the key elements of AngularJS, which we need to learn.
App/index.html
Copy codeThe Code 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. js"> </script>
</Head>
<Body>
<P> Nothing here {'yun' + '! '}}</P>
</Body>
</Html>
What is the code doing?
Ng-app command:
Copy codeThe Code is as follows:
<Html lang = "en" ng-app>
The ng-app directive marks the scope of AngularJS scripts. Adding the ng-app attribute to
AngularJS script Tag:
Copy codeThe Code is as follows:
<Script src = "lib/angular. js"> </script>
This line of code is loaded into angular. js script. This angular will be executed after the browser loads the entire HTML page. js script, angular. after running the js script, you will find the HTML Tag containing the ng-app command, which defines the scope of AngularJS applications.
Expression bound with double braces:
Copy codeThe Code is as follows:
<P> Nothing here {'yun' + '! '}}</P>
This line of code demonstrates the core function of the AngularJS template-binding, which consists of the double braces {{}} and the expression 'yun' + '! .
This binding tells AngularJS to calculate the expression and insert the result into the DOM. We will see that the DOM can be updated in real time as the result of the expression operation changes.
AngularJS expression Angular expression is a code snippet similar to JavaScript. AngularJS expressions only run in AngularJS scope, rather than in the entire DOM.
Guide AngularJS applications
Using ngApp commands to automatically guide AngularJS applications is a simple method and is suitable for most cases. In advanced development, for example, using scripts to load applications, you can also use bootstrap to manually guide AngularJS applications.
The AngularJS app guiding process has three important points:
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 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 AngularJS application boot is complete, it will continue to listen to HTML triggering events of the browser, such as mouse clicking events, button events, HTTP incoming responses, and other events that change the DOM model. Once such events occur, AngularJS will automatically detect changes and make corresponding processing and updates.
The above application structure is very simple. The template package contains only one instruction and one static binding, and the model is empty. Next we will try a more complex application!
What are these files in my working directory?
The above application comes from the AngularJS seed project. We can usually use the AngularJS seed project to create a new project. The seed project includes the latest AngularJS code library, Test Library, script, and a simple application example. It contains the basic configurations required to develop a typical web application.
For this tutorial, we have made the following changes to the AngularJS seed project:
1. Delete the sample application;
2. Add the mobile phone image to app/img/phones /;
3. Add the mobile phone data file (JSON) to app/phones /;
4. Add the Twitter Bootstrap file to app/css/and app/img /.
Exercise
Try to copy the new expression related to the mathematical model to index.html:
Copy codeThe Code is as follows:
<P> 1 + 2 ={{ 1 + 2 }}</p>
Summary
Now 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
