[Reprint] AngularJS getting started tutorial 00: Pilot Program, angularjs getting started tutorial
Now we are preparing to write AngularJS applications --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.
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
<!doctype html>What is the code doing?
ng-appCommand:
ng-appThe directive marks the scope of the AngularJS script.Addng-appAttribute indicates the entireAll are AngularJS script scopes. You can also useng-appCommands, such<div ng-app>The AngularJS script is only in<div>.AngularJS script Tag:<script src="lib/angular/angular.js"></script>This line of code is loaded into the angular. js script. After the browser loads the entire HTML page, the angular. js script is executed.
Expression bound with double braces:ng-appCommand HTML tag, which defines the scope of AngularJS applications.<p>Nothing here {{'yet' + '!'}}</p>This line of code demonstrates the core function of the AngularJS template-binding, which consists of double braces
{{}}And expressions'yet' + '!'.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 applicationsUsing 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:
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:
ExerciseTry to copy the new expression related to the mathematical model to index.html:
<p>1 + 2 = {{ 1 + 2 }}</p>SummaryNow let's go to step 1 and add some content to the web application.
Original article: http://www.angularjs.cn/A003
What is the core idea of AngularJS? What types of applications are applicable? How to get started?The type idea is MVC, that is, Model-> Controler-> View. Model, control the view through the Controller
Replace the traditional data object mode with the direct operation data model and then change the page DOM mode.
Single-page APP for highly complex object models
Establish an AngularJS EnvironmentPay attention to the following key areas,
1. Add ng-app
2. Introduce angularjs.
See angularjs.org/here for details.
<! Doctype html>
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
