Adding navigation and footer to every page using AngularJS
In case your navbar is also static like footer, you can exclude it from ng-view
Your html structure can be something like :
<html><head>...</head><body> <div mynav></div> <div ng-view></div> <div my-footer></div></body></html>
In this case, the navigation bar will be static too just like your footer. So all your views will be loaded at <div ng-view></div> and mynav and my-footer div will be untouched.
Also,In your directives, you can replace inline template with templateUrl. Create a new HTML, say my-nav.html and use templateUrl: "path/to/my-nav.html",
You dont need a directive for static html.
Usually you have a shell page (main page), in which you put all the parts that should be on all (or most) pages. And then you load you views into that page using angular's ng-view (or ui-view if you use ui-router for routing).
Something like this:
<html ng-app='app'> <head>...</head> <body> <div ng-controller="navbarCtrl as vm"> <div ng-include="'navbar.html'"></div> </div> <!-- Your main view loads here, along with its controller as defined in your routing (check ngRoute or ui-router for more)--> <div ng-view></div> <footer>Your footer comes here (or can be ng-included)</footer> </body></html>
Take a look at custom directives at https://docs.angularjs.org/guide/directive.
And your directive will be like this:
app.directive('name', function() { restrict: 'E', templateUrl: 'page-title'.html}This is a better way, not only more tidy, it's also rendering faster.I learn this at free course on schoolcode that pointed out from angular website.
Note: by rendering time I mean ng-include will be loaded after javascript and html are all loded.