This directive has the task of creating the complete menu and also provides a generated sitemap.

To ensure the functionality, it is necessary to fill the internal object 'naviList' before the menu is created. This can be achieved by firing an event that the process is waiting for after the corresponding JSON file has been successfully loaded. Or you fill the object in the JavaScript code yourself. Within my application I read all JSON files with the "eaLoadJson" directive. This fires the event "LoadJsonFile-naviList" after the file has been successfully loaded. The parameters used are stored in the naviList.json file with the following structure: { {"id":"navStart", "label": "Home", "href": "#!/home", "url": "html/home.html", "imgKey": "", "subm": []}, {"id":"navDir", "label": "Directives", "href": "#!/dirc", "url": "html/dirAll.html", "imgKey": "", "subm": [ {"label": "eaMaskCode", "href": "#!/dirc/mc", "url": "html/dirMaskCode.html", "imgKey": ""}, {"label": "eaAccording", "href": "#!/dirc/ac", "url": "html/dirAcc.html", "imgKey": ""}, {"label": "eaPathLink", "href": "#!/dirc/pl", "url": "html/dirPathLink.html", "imgKey": ""}, {"label": "eaNavi", "href": "#!/dirc/nv", "url": "html/dirNavi.html", "imgKey": ""}, {"label": "eaAddHtml", "href": "#!/dirc/ah", "url": "html/dirAddHtml.html", "imgKey": ""}, {"label": "eaLoadJson", "href": "#!/dirc/lj", "url": "html/dirLoadJson.html", "imgKey": ""}, {"label": "eaImgBox", "href": "#!/dirc/ib", "url": "html/dirImgBox.html", "imgKey": ""}]}, {"id":"navService", "label": "Service", "href": "#!/srv", "url": "html/service.html", "imgKey": "", "subm": [ {"label": "SiteMap", "href": "#!/srv/smap", "url": "app/template/siteMap2.html", "imgKey": ""}, {"label": "Cookie Richtlinie", "href": "#!/srv/cookies", "url": "html/CookiesNotRequired.html", "imgKey": ""}, {"label": "Impressum", "href": "#!/srv/imp", "url": "html/impressum.html", "imgKey": ""}, {"label": "Datenschutz", "href": "#!/srv/ds", "url": "html/datenschutz2.html", "imgKey": ""}, {"label": "Software-Lizenzen", "href": "#!/srv/license", "url": "app/../LICENSE.html", "imgKey": ""} ]}}

The initialization of the menu or the sitemap is triggered with the following call.

<ea-navi data-nav-logo="pictures/navLogo.jpg" data-nav-mode="menu"></ea-navi> <ea-navi data-nav-mode="sitemap"></ea-navi> In order to fully parameterize the menu, it was necessary to generalize the Angular routing. For this I use the routing provider with parameters, a fixed controller and a computed templateURL "computed.html".
eaNavConfig.js var eaNavConfig = function ($routeProvider) { $routeProvider .when('/:folder', { templateUrl: 'app/template/computed.html', controller: 'eaNaviController', resolve: 'folder' }) .when('/:folder/:id', { templateUrl: 'app/template/computed.html', controller: 'eaNaviController' }) .when('/:folder/:id/:id2', { templateUrl: 'app/template/computed.html', controller: 'eaNaviController' }) .otherwise({redirectTo: '/home', templateUrl: 'app/template/computed.html', controller: 'eaNaviController', resolve: 'home' }); return $routeProvider; };

and the "eaAddHtml" directive inner "computed.html".

computed.html
<ea-path-link></ea-path-link>
<div ea-add-html = "⟨{url}}"></div>

Annotation: The provider is prepared for displaying menus with a maximum of three levels. However, this only affects the href component of the menu item, not the used structure depth of the menu.
All routing processes are directed to a fixed HTML page (computed.html), which loads the desired HTML page from server by the parameters from naviList.json.
The following css file is used to display the menu and the siteMap. /* EA - SiteMap*/ .sitemap, .sitemap-item a { text-decoration: none; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; } /* EA dynamic menu*/ /* original Bootstrap 767px */ /*https://bootstrap-menu.com/detail-basic-hover.html 992px*/ @media (max-width: 767px) { .navbar .nav-item:hover > ul { display: block; } } .navbar .nav-item:hover > ul { display: block; top: 28px; left: 10px;} ul:hover > li {position: relative;} .hoverdown-item:hover > ul { display: block; } .hoverdown-menu { list-style: none; display: none; position: absolute; top: 20px; left: 30px; z-index: 1001; float: left; min-width: 150px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .hoverdown-menu > li > a { display: block; padding: 3px 12px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; } .hoverdown-menu > li > a:hover, .hoverdown-menu > li > a:focus { color: #262626; text-decoration: none; background-color: #f5f5f5; } .hoverdown-item, .hoverdown-link { font-size: 14px; text-align: left; text-decoration: none; background-color: #fff; }
The sitemap is generated automatically using the following link. "siteMap" The link points to the following page:
"siteMap2.html" <div class="eaContent">

SiteMap

<ea-navi data-nav-mode="sitemap"></ea-navi> </div> A button can also be seen in the coding, which is initially not displayed. This button calls up an export function for the two sitemap files "sitemap.xml" and "sitemapimages.xml". These two files are intended to support searches from all search engines.
The button can be made visible with the following link: SiteMap with export
In order to tell the search engines which files contain the required information, the robots.txt file and the two sitemap files must be added to the root directory of the web application.
Example of robots.txt # www.robotstxt.org/ # Allow crawling of all content User-agent: * Disallow: Sitemap: https://aleksander.de/sitemap.xml Sitemap: https://aleksander.de/sitemapimages.xml