In angular service, there are some services you have to understand, because he can be said to be the core of Ng, and today, I want to introduce two core services Ng, $parse and $compile. In fact, these two services have a lot of people, but 100 readers have 100 Hamlet, I am here to talk about their understanding of their two services.
You may doubt, $eval, actually he is not a service, he is a method within scope, and it can not calculate the service, and it is also based on parse, so can only be regarded as a $parse another way, we look at the $eval definition of NG source code is how to know
$eval: function (expr, locals) {return
$parse (expr) (this, locals);
Believe that after reading the source code you will understand it, OK, now start the two core services of the explanation, if I feel that the wrong words, welcome in the comments area or private chat points, so as to avoid the scourge of other readers.
When we talk about these two services, I'll start with a concept in this post: context
I believe that a lot of people have heard this "context," but it may be a little vague, and I'll explain to you here why we don't accept it.
Remember the angular data binding? For example: I now have a controller called Testctrl, his content is as follows:
. Controller (' Testctrl ', function ($scope) {
$scope. test = "Boo!!!"
})
And in HTML, our code is like this.
<body ng-controller= "Testctrl" >
{{test}}
</body>
Well, you don't have to think about the results, and the page will definitely show Boo!!! The words.
But what if I erase Ng-controller's instructions? That is, I do not have the HTML declaration controller, you directly bind {{test}}} what?
The result is only one, and that is the page has nothing (PS: Because you affirm the Ng-app). Do you understand this?
The controller is the same as the container of a context, the real context is actually $scope, when the page binding test, if the controller is declared, the current context is the controller inside the $scope,ng will go look for the context of your controller $scope there is no test, if there is, Of course he shows up, but you don't declare the controller? His contextual container is Ng-app, and his real context is $rootscope, and this time he will be looking for $rootscope without test.
Well, the concept of the context has been finished, but it's quite easy to understand, and basically it's very similar to this.
So, let's start with $parse, and first we're going to look at Ng's API documentation.
var getter = $parse (' User.Name ');
var setter = getter.assign;
var context = {user:{name: ' angular '}};
var locals = {user:{name: ' Local '}};
Expect (getter (context)). Toequal (' angular ');
Setter (context, ' newvalue ');
Expect (Context.user.name). Toequal (' newvalue ');
Expect (getter (context, locals)). Toequal (' local ');
What you see is the most cost-effective line of code for $parse services in the NG document,
Getter and setter are known as the Get methods and set methods, and context and locals are just JSON objects to simulate contextual relationships
You see the following four statements can eventually pass the test, now we analyze, analysis before I want to explain what is called $parse
$parse service is actually a function of parsing expressions, just like ng-model= "test", you write this in HTML who knows you ng-model= "test" in fact you want to bind the current controller (context container) in scope (context) The value in test inside, Ng is through the $parse service to help you parse the expression, so when invoking the $parse service you need to pass the context object so that Ng knows where you are going to go to the scope (context) to find you this test.
So we see that the first line of test code is this:
Getter (context)). Toequal (' angular ')//is actually $parse (' user.name ') (context)
In this context, which is contextual, the principle that he can return the string "angular" is through these three steps:
1. Get the current expression User.Name
2. Get the current context object {user:{name: ' Angular '}}
3. Search for expressions in the top and bottom questions, and finally get the "angular" character creation
So this test code is successful.
Let's look at the second method setter method
Setter (context, ' newvalue ');/is actually $parse (' User.Name '). Assign (context, ' newvalue ')
expect (context.user.name) . Toequal (' newvalue ');/whether the value of the test data context is changed
The setter method here is actually changing the way it's worth
1. Get the current expression User.Name
2. Get the current context object {user:{name: ' Angular '}}
3. Change the value in an expression to program the context object {user:{name: ' NewValue '}}
So the context object changes, and when the Getter method is used to get the expression, the context is already from {user:{name: ' angular '}}--> {user:{name: ' NewValue '}}, and the last-obtained expression is naturally " NewValue ", so the test code is also passed.
Expect (getter (context, locals)). Toequal ("local");//is actually $parse (' user.name ') (context, locals)
This is actually a contextual substitution function.
In the getter method we can not only select the first context, but if we pass the second argument, the first context is overwritten by the second context, and the attention is overwritten.
1. Get the current expression User.Name
2. Get the current context object {user:{name: ' Angular '}}
3. Overwrite current context {user:{name: ' Local '}}
4. Get the value of an expression after parsing
Back to $eval this place, we look at the $eval source can see that $eval only get function, and no set function, but sometimes we can choose to pass the second context, to achieve the effect of modification.
Here the $parse service will be finished, and the next is $compile.
--------------------------------------------------
If you understand the concept of $parse, I think $compile also almost understand, in fact, and $parse very similar. But he is parsing a section of HTML code, his function is to turn dead template into a live template, but also the core service of instructions.
For example, you have a section of HTML code <H1>{{TEST}}</H1>, if you put this code directly in the HTML code, what it presents the content of what I do not say that we should understand. This is the dead template, and the so-called live template, is that the data inside all the data binding {{Test}} will automatically find the current context to bind the data. The final display is a live template, which is a data-bound template.
$compile (' Dead template ') (the context object), so that the dead template is programmed into a live template, you can do the live HTML code exercises, such as adding to the current node, and so on.
But in the instructions, she returns two functions Pre-Link and Post-link.
The first execution is Pre-Link, which is the traversal order of the same instruction from the parent node to the child node traversal, at this stage, the DOM node has not stabilized, can not do some binding event operations, but we can do some initialization of data processing.
The second execution is post-link, the link function we often call, which is traversed from the child node to the parent node, at which point the DOM node has stabilized and we typically do a lot of work here.
The above is a small series for you to bring the important instructions based on angular ($eval, $parse and $compile) all the content, I hope that we support cloud-Habitat Community ~
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
