Home > Developer > Web Develop
who said that test work is relatively easy, recently familiar with a few case, almost not crazy. Recently it is intermittent to see my angularjs, always feel that they are still not getting started, it may be that they owe the front end of things too much, can not see a few lines of code there are several commonly used functions unfamiliar. I have seen the video of the desert, and I know some good features of Angularjs. Later prepared to devote to "angularjs authoritative course", followed it away, but one may not own daoxing enough, and secondly, personally think this book translation of some blunt and some flaws, such as:
(1) Section 9.2: Application of the self-scope in directives
(2) Section 9.2: Application of the self-scope in directives
Of course, the above are some flaws, I hope the author of the translation will not be offended ha ^_^!
So, in swallowed to see the tenth chapter, I feel that the first shelve this, go to Ngnice look. Perhaps I still need some conceptual input, such as two-way data binding, expressions, directives, and so on.
Text: today mainly introduces ANGULARJS bidirectional data binding
1. Introduction to Theory
What is bidirectional data binding? since the so-called two-way data binding, the focus is definitely in the "two-way" on, obviously, there must be two-way, there is no difference between the two, first look at the following two pictures:
: One-way binding
They combine templates and data to add to the view, as shown in the table. Once the merge is complete, the flow direction shows that any changes to the data model or related content will not automatically be reflected in the view . And any changes that users make to the view are not automatically synchronized to the data model . This means that developers need to write code to keep the view in sync with templates, templates, and views , which undoubtedly increases the amount of development effort.
So there is no framework that can automatically implement this bidirectional mechanism, yes, see:
: Two-way binding
Angularjs data binding is the automatic synchronization of the data model with view components. The implementation of angular allows you to think of models in your application as a single source of data. The view is always a form of presentation of the data model. When the model changes, the view can reflect this change, and vice versa.
2. Code Demo
Html:
<!doctype html>Js:
var mymodule = angular.module (' MyModule ', []) MyModule. Controller (' Helloangular ', [' $scope ', $scope. Greeting = { text: ' Hello ' };]);Running result:hello,angular
Interpretation: "{{}}" here is equivalent to "ng-model" directive, is actually a kind of binding, but only from this example, can not say that the implementation of two-way data binding. This is to bind the value of the ANGULARJS data model to the view, if the HTML file is not introduced
<script src= "Helloangular_mvc.js" ></script>by running the Discovery interface, the following is true: {{Greeting.text}},angular
This means that the model values in the scope of ANGULARJS are not bound to the foreground interface HTML. Conversely, the introduction of helloangular_mvc.js, the implementation of the front-end interface to map to the data model data.
The above is not considered two-way data binding, the following leads to the real two-way binding, then two-way data binding what is the application scenario, what needs the data model and the view can be mapped to each other, it may be you do not realize, now a lot of sites can see this idea brings great convenience, such as forms, When filling out or submitting a form, the interface will be based on the user's actions in a timely manner, which is a two-way data binding the most powerful application scenario.
Html:
<!doctype html>JS (or JS in the example above):
var mymodule = angular.module (' MyModule ', []) MyModule. Controller (' Helloangular ', [' $scope ', $scope. Greeting = { C1/>text: ' Hello ' };]);Operation Result:
Note: This example is a good illustration of what a two-way binding is.
First, two tags are declared in HTML: an input box <input> and a paragraph mark <p>.
There are obviously two ways of binding: {{}} and Ng-model, but the function is data binding, which is bound to the Greeting.Text in the controller in the JS file . So, the assignment of Greeting.Text in JS will make the foreground HTML input and P simultaneously display "Hello"
This step is completed in the ANGULARJS scope of the data model bound in the foreground view, then the foreground data changes will affect the data model, by changing the value in input, we get the result:
Any input in the input box will be reflected in the following paragraph, which also shows that changing the data in HTML will be mapped to the backend data model in a timely manner, and the real implementation of two-way data binding.
In this article, I would like to introduce the expression of ANGULARJS, limited to time and space, stay in the next chapter, if you feel useful, remember to praise, at the same time this article will be pushed to the public number:Jackiezheng, welcome attention to Kazakhstan ^_^
This article link: "Angularjs Getting Started experience 2--what is two-way data binding"
If you feel that reading this article is helpful to you, please click " recommend " button, your "recommendation" will be my biggest writing motivation! If you want to keep an eye on my article, please scan the QR code, follow Jackiezheng's public number, I will push my article to you and share with you the high-quality articles I have read every day.
Angularjs Getting Started experience 2--what is bidirectional data binding
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
