Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular JS - How to handle duplicated HTML code like headers/footers?

Tags:

I just read the introduction to Angular JS but I didn't see anything about a way to code up your HTML header code and footer code just once and have it included in all of your pages.

Is there an official/reccomended way to do this?

like image 826
Greg Avatar asked Aug 29 '12 17:08

Greg


People also ask

What is $Index in AngularJS?

Stay on the bleeding edge of your favorite technologies. $index is a way to show which iteration of a loop you're in. If we set up an ng-repeat to repeat over the letters in 'somewords', like so: <div ng-app="app"> <div ng-repeat="item in 'somewords'.split('')"> {{$index + 1}}.

What is Ng-repeat in AngularJS?

AngularJS ng-repeat Directive The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.

Between which tags can an AngularJS file be added to an HTML page?

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.


1 Answers

If you are creating a single-page web application (say, with bookmarkable views/pages using $routeProvider), you can put your header and footer directly into index.html (or use ng-include) and then use ng-view to switch between views/pages:

<html ng-app>
<head>
   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
   ... header here, or use ng-include ...
   <div ng-view></div>
   ... footer here, or use ng-include ...
</body>
</html>
like image 67
Mark Rajcok Avatar answered Oct 16 '22 14:10

Mark Rajcok