(1) Hello World posted on AngularJS

(1) Hello World posted on AngularJS

Previous projects used JQuery and original javascript. Recently, a project used AngularJS, RequireJS, and other popular frameworks. Here I write some blogs to record my learning process. Although the original name is used, it is actually based on some online materials, and some of my own practices and understandings. Before getting familiar with AngularJS, it is estimated that there are no high-quality articles, which can only be used as study notes and memos. The exercise version is the latest stable version 1.2.25.

The sample code is as follows:

   
    Hello,World!   <script src="angular1.2.25.js"></script>        Hello, {{yourName}}

Open the webpage in a browser and enter it in the text box. The page is automatically displayed in real time. If javascript or jquery is used to complete such a small function, we need to register the listening event, obtain the value of the text control, and then insert the value into the display. What we need to do with AngularJS is: Add ng-app, add ng-model, and use {yourName} for display. Obviously, using AngularJS is much simpler and the code is more compact. Let's take a brief look at the meanings of the three things:

1. ng-app: It can be placed on any dom node, representing that the node and all its subnodes are within the management scope of AngularJS. If this flag is removed, it is found that the AngularJS framework does not work.

   
    Hello,World!   <script src="angular1.2.25.js"></script>Hello, {{yourName}}Hello, {{yourName}}

This time, we put ng-app on, and we can see that the input data inside the div can be displayed in real time, but the external data has no effect. As you can see, an html page can be handed over to AngularJS for management, or you can only allow AngularJS to manage a part of the page. we can add the dom node where the ng-app is located as needed.

2. ng-model: This is the bidirectional binding feature of AngularJS data. Easy to understand: Tell AngularJS that this is a data model. You can save it to the memory for me. The data is modified on the interface, and the data in the memory is automatically modified. The variable value in the memory is also changed on the Interface display. This feature is obviously very convenient and can maintain data consistency, so that we do not need to add code to complete this function.

3. {yourName}: This is the expression syntax provided by the Framework. It can display the value of the data model in the memory. This is the same as that of struts2. , Similarly, it is used to display data. This is just the syntax format defined by AngularJS. It is similar to the EL expression on the JSP page and the OGNL of struts2. It is a data acquisition mechanism.