angularjs - Load only body on page change -
on website i'm displaying same header on each page , wanted know if there's angularjs / jquery or simple js solution load content of body , not header on page change.
<html ng-app="headerapp" ng-controller="headerctrl"> <head> <!-- here load js , css ... --> <div ng-include="'templates/header.tpl.html'"></div> </head> <body> <div ng-include="'templates/indexbody.tpl.html'"></div> </body> <footer><div ng-include="'templates/footer.tpl.html'"></div> </footer> </html> so html looks have separate template each parts. create html file each pages. think there's way alter ng-include in body.
thanks help !
this kind of thought behind single page applications. angular provides built-in router you, , there popular ui-router plugin.
you alter view to:
<html ng-app="headerapp"> <head ng-controller="headerctrl"> <div ng-include="'templates/header.tpl.html'"></div> </head> <body> <div ng-view></div> </body> <footer><div ng-include="'templates/footer.tpl.html'"></div> </footer> </html> and configure router in app.js:
angular.module('headerapp', ['ngroute']).config(function($routeprovider){ $routeprovider.when('/', { templateurl: 'templates/indexbody.tpl.html', controller: 'indexbodyctrl' }); }); note need include angular-route.js in index.html. more reading here: https://docs.angularjs.org/api/ngroute
angularjs
No comments:
Post a Comment