All geek questions in one place

How to handle headers and footers with AngularJs

I am very sorry if I do not explain myself very well, here too. I basically had problems trying to solve this problem. I am using Yeoman to create my angular project. I have a header and footer, the footer will be static, and the header needs its own controller. The problem I am facing is that I do not want the header to be outside of other controllers. Maybe I'm wrong, and in fact the problem and best practice would obviously be to have the title outside the ng-view ? This is what I have so far:

  <head> <!-- head stuff here --> </head> <body ng-app="dscover.me"> <div ng-include src="'partials/header.html'"></div> <div ng-view=""> </div> <div ng-include src="'partials/footer.html'"></div> </body>

Is it right to include headers and footers outside of MainCtrl ? Does this make sense to me just because if I were to create a new controller / page, would I still have access to the controllers outside it? The problem again is that I want to refrain from using rootScope and, unfortunately, is this the only way when the header goes beyond MainCtrl ?

I apologize for the terrible explanation, but I hope you guys understand. If there is a better way to do this, please let me know. Any help would be appreciated!

+6
source share
1 answer

First of all, I will try to rely on this AngularJS functionality as much as possible. There are three ways to implement the header and footer in the application:

The reason you would like to use this is because simplicity and less code. From the docs:

Defines, compiles, and includes an external HTML fragment

This way it just includes an external html snippet.

  1. ng-view

This is the default router in Angular (prior to 2.0), and there is a better ui-router option.

UI-Router is a routing framework for AngularJS created by the AngularUI team. It offers a different approach than ngRoute, in that it changes the presentation of applications based on the state of the application, and not just the route URL.

It supports features such as nested views, etc. The main reason for its use would be the separation of controllers and areas of these representations. In terms of headers and footers, if you want to have a completely separate logic inside, then follow it.

  1. custom directive

This option should be used if you have a logical overlap in the main content area and in the header / footer. Also you get additional benefits with it, like reuse, etc.

So, your choice is to choose one, but do not be lazy to search and read ( here , here , here or here ) before writing.

+3
source

Source: https://habr.com/ru/post/958631/

More articles:


All Articles