3

I read document from AngualrJS : https://docs.angularjs.org/guide/component
And when I am reading to "Example of a component tree" section, I got confused about how a component tree's loading works, because there is nowhere to find the loading order.

How angular find the root directive and nested directive (may be in a template)? and Which component should start work first? I mean, If a nested component() is called earlier than its directive's appearance, will it be called later when its directive appears? How angular knows the appropriate component to call when a directive/template load? Or just iterate all components method? Or load all components first, then according index.html to form a component hierarchy, then call it properly?

Is there anybody kindly explain? thanks a lot!

Eddy
  • 3,623
  • 37
  • 44
  • I can't tell what you're asking. The root component is specified in index.html, the nested components are specified in other components' templates. Is there more to your question than that? When you ask which component should start work first, what work are you referring to? –  Aug 07 '16 at 09:55
  • 1
    From top to bottom. This is how compilation works, these are the basics that are covered by the guide. See more here https://docs.angularjs.org/guide/compiler#how-directives-are-compiled – Estus Flask Aug 07 '16 at 13:07
  • 2
    Possible duplicate of [AngularJS : How does the HTML compiler arrange the order for compiling?](http://stackoverflow.com/questions/14988631/angularjs-how-does-the-html-compiler-arrange-the-order-for-compiling) – Estus Flask Aug 07 '16 at 13:08

1 Answers1

1

Thanks estus!, your anwser is really helpful! According to AngularJS : How does the HTML compiler arrange the order for compiling? and Pete Bacon Darwin's example :

Just in my opinion:
Angular call all components comiple() method first to complete whole template loading, then call their controller() methods regard to directives hierarchy.

And this comes from : How directives are compiled

It's important to note that Angular operates on DOM nodes rather than strings. Usually, you don't notice this restriction because when a page loads, the web browser parses HTML into the DOM automatically.

HTML compilation happens in three phases:

  1. $compile traverses the DOM and matches directives.
    If the compiler finds that an element matches a directive, then the directive is added to the list of directives that match the DOM element. A single element may match multiple directives.
  2. Once all directives matching a DOM element have been identified, the compiler sorts the directives by their priority.
    Each directive's compile functions are executed. Each compile function has a chance to modify the DOM. Each compile function returns a link function. These functions are composed into a "combined" link function, which invokes each directive's returned link function.
  3. $compile links the template with the scope by calling the combined linking function from the previous step. This in turn will call the linking function of the individual directives, registering listeners on the elements and setting up $watchs with the scope as each directive is configured to do.
Community
  • 1
  • 1
Eddy
  • 3,623
  • 37
  • 44