Angular. Why do not embedded nested

This is not an article - rather a note. And yes, it is for Angular newbies.

Frequently asked question - why do nested inlodes not work in Angular? Work. Just Angular is not php.

Planning a layout, we usually present something like this:

• Menu on top,
• The menu on the left,
• Content in the center
• Footer

The first thing we are trying to do is add ngView to the main template, and add ngInclude to the lower level templates. We try, we fail, we go to read StackOverFlow (let's be honest - first StackOverFlow, then, maybe, if there is no lazy, - documentation).
And there we are told something in the spirit, “dude, use an angular ui-router ”, or “check it out, what kind of a centerpiece I’ve put together!”.

But let's think for a moment. Menu and footer - what's this? That's right - these are elements that are used repeatedly. You could say these are widgets. You are no doubt aware of what Angular offers to this effect - directives.
')
In other words, embedded enclosures in Angular work, just need to wrap them in directives. To some it may seem difficult. But in fact, it is much easier and more useful than, for example, to delve into the angular ui-router .

Here is a state and all.
For those who doubt, a couple of advantages of this approach :.

First, readability will improve - instead of abstract <ng-include />, there will be more clear tags like <top-menu /> (or) and so on. If you do not like it, then why do you need angular?

Secondly, directives have quite a few parameters, many of which are very useful. More, for example here , or here .

Thirdly, the experience of directives will come in handy later on when working with Angular, with other libraries, such as ui-bootstrap.

Well, perhaps the most important thing is that you will not have to tie in with third-party modules like the ui-router and spend time studying them, implementing them, etc.

UPD : Minimum required code for directive:

.directive('topMenu', function () { return { restrict: 'EA', templateUrl: 'path/to/topmenu.html', controller: function ($scope) { // Your code here } }; }) 

We have here exactly the same controller, everything is as usual and the way to the template. Is it difficult? I do not think.

Using:

 <top-menu></top-menu> 

or

 <div top-menu></div> 

UPD2 : For those who do not understand why :
I suggest using directives in the places where you used ngInclude. Everything. Point. I do not offer anything else.
If your menu on every page is inclusive, and it happens, then yes - use a directive instead.
If you just have to keep the menu, footer, etc. off the page, in the top-level template, it means you have no problem with the embedded ones.