var app = angular.module("app", ['ngRoute']);
app.directive("ngViewLite", ['$route', '$compile', '$controller', function($route, $compile, $controller){
return {
terminal: true,
priority: 400,
transclude: 'element',
compile : function(element, attr, linker){
return function(scope, $element, attr) {
var currentElement;
scope.$on('$routeChangeSuccess', update);
update();
// update view
function update(){
var locals = $route.current && $route.current.locals,
template = locals && locals.$template;
if(template){
var newScope = scope.$new();
linker(newScope, function(clone){
clone.html(template);
$element.parent().append(clone);
if(currentElement){
currentElement.remove();
}
var link = $compile(clone.contents()),
current = $route.current;
currentElement = clone;
current.scope = newScope;
if (current.controller) {
locals.$scope = newScope;
var controller = $controller(current.controller, locals);
clone.data('$ngControllerController', controller);
clone.children().data('$ngControllerController', controller);
}
link(newScope);
newScope.$emit('$viewContentLoaded');
});
}else{
//cleanup last view
}
}
}
}
}
}]);
app.controller('RootCtrl', ['$scope', function($scope){
$scope.title = "Home Page";
}]);
app.controller('CatsCtrl', ['$scope', function($scope){
$scope.title = "Cats Page";
}]);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
controller : 'RootCtrl',
template : '<h1>{{title}}</h1>'
})
.when('/cats', {
controller : 'CatsCtrl',
template : '<h1>{{title}}</h1>'
})
.otherwise({
redirectTo : '/'
});
}]);
<div ng-app="app">
<a href="#/">Home Page</a> | <a href="#/cats">Cats</a>
<div ng-view-lite></div>
</div>
External resources loaded into this fiddle: