Home > Developer > Web Develop
Because the need to start to learn Ng, before listening to the great God when the introduction of NG said the hole how big, learned a while (in fact, three days), feel ng do a lot of, in the right situation you can completely use NG to fix everything. This can be seen from the chicken like jqlite. So it makes a lot of NG.
More largely, NG organizes the code in a completely different way of thinking, which is Model-view-viewmodel (MVVM).
The structure of this article is probably 1. MVVM and two-way binding 2. A simple example of the calculation of the amount of the purchase (transferred from Miaov Video). If you have any questions, please treatise the spectators. ^_^
1.MVVM and Bidirectional bindingThe last picture (and I looked for it from somewhere else)
I am not very clear about the few members of the mv* architecture model. Angular, at first glance, looks a lot like a template engine. In the past, most of the content was written in HTML, but doing so would pose some problems for pages that require frequent changes to the content:
1. Every possible part of the change may require a set of logic, and similarly, if a user is required to transfer information frequently (events, text, etc.) through the page, it will require a lot of code.
2. In the past, when using JQ or JS to write code, it is the DOM operation as the core: Use the selector to find the DOM, and then let it do what. Once the HTML structure changes, the code will be rewritten.
And Ng has a big advantage in this area.
(1) MVVM in angularThe role of MVVM, in summary, is to achieve performance and data separation
Model (M): Data, arrays, objects, JSON, stores the contents.
View (V): Views, what the user sees, what the user can manipulate, maybe that's what the front end needs to do (HTML+CSS)
ViewModel (VM): It takes some logic to show the data to the user, and this layer is used to handle the logic.
In fact, encountered those who can not write dead on the page, the need for JS control of things (such as Ajax information), in fact, a bit of performance and data separation meaning. But angular to do this thing quite thoroughly. More importantly, it can be automatically updated without you having to write the listening code.
In MVVM, M and V cannot communicate directly, neither one-way or both, and all require the intermediary of the VM. Why is this intermediary called a VM? In my opinion, the VM itself is a mapping of M in JS:
Ng-controller corresponds to $scope each label corresponds to a ng-model scope nested relationship is much like Dom tree (of course, I think in Ng still more on the scope of the fuss, less use DOM to find elements). Each of the two objects that are automatically updated by Ng is the ng-model corresponding variable in the VM and the label in V
(2) About bidirectional updatesNg-model can certainly do two-way binding. But not all mappings are bidirectional, such as {{}} and Ng-bind only VMs to V, and events such as Ng-click are obviously only V-to-VM.
2. Example: Calculation of purchase Amount<!DOCTYPE HTML><HTMLNg-app><Head> <MetaCharSet= "UTF-8"> <title>Title</title></Head><Body><DivNg-controller= "Aaa"> <P>Price:<inputtype= "text"Ng-model= "Price"></P> <P>Number:<inputtype= "text"Ng-model= "num"></P> <P>Cost:<span>{{fee () |currency: ' ￥ '}}</span></P> <P>Shipping:<span>{{post|currency: ' ￥ '}}</span></P> <P>Total:<span>{{fee () +post|currency: ' ￥ '}}</span></P></Div></Body><Scriptsrc= "Angular.min.js"></Script><Script> functionAaa ($scope) {$scope. price=5; $scope. Num=1; $scope. Fee=function(){ return$scope. Price*$scope. Num; $scope. $watch ($scope. Fee,function(newval,oldval) {$scope. Post=(newval>= -)?0:Ten; }); }</Script></HTML>
As mentioned above, because input needs to transfer data to the VM, use Ng-model. The three items in the span tag only require a VM to V, so the double braces are used.
It involves the syntax of NG what is not said, $scope will be detailed in the future. A little mention of $watch, it seems to me like an event that is triggered when the specified variable/method executes. It can connect two variables (ng-model). Let one ng-model change with the other.
Of course, this change is one-way, I guess if two variables to write each other $watch words will happen more horrible things, have time to try ~
At the end of the first part, the next step is to write a form validation-related example that mentions ng-repeat and filter.
Angularjs Learning Notes (i) about MVVM and two-way 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
