Okay, I need to be able to stop ng-view from wiping the content away, I need to have the ng-view there since it's the only place it goes where it doesn't (and can't) nuke the whole application.

I have a scroller inside of it but the contents change when a person does a search (the whole point of the app is to search) but just loading the page up Angular empties the ng-view.

Any way to stop that default behaviour?

Okay, I need to be able to stop ng-view from wiping the content away, I need to have the ng-view there since it's the only place it goes where it doesn't (and can't) nuke the whole application.

I have a scroller inside of it but the contents change when a person does a search (the whole point of the app is to search) but just loading the page up Angular empties the ng-view.

Any way to stop that default behaviour?

• javascript
• angularjs

• A view is a place to render content, so if you have default content the normal approach would be to render it there using a template. – towr Commented Dec 16, 2013 at 18:58

4 Answers 4

A different (and perhaps nicer*) approach is to use a directive to take the content of the ng-view and store it as a template before it's piled (and cleared).

angular.module('myApp', ['ngRoute'])
.directive('foo', ['$templateCache', function($templateCache)
{
    return {
        restrict: 'A',
        pile:  function (element)
        {
            $templateCache.put('bar.html', element.html());
        }
    };
}])
.config(function($routeProvider, $locationProvider) 
{
    $routeProvider.when('/', { templateUrl: 'bar.html' });
});

This way you don't need to wrap the content of the ng-view in script tags.

<div ng-app="myApp">    
    <div foo ng-view>
        <ul>
            <li> test1 </li>
            <li> test2 </li>
            <li> test3 </li>
            <li> test4 </li>
        </ul>
    </div>
</div>

http://jsfiddle/3Dmv4/

*) I'm fairly new at angular myself, so I'm not deep enough in the angular mindset to know if it entirely "proper" to do these things.

Here is one option, wrap your default content with <script type="text/ng-template">, then load that template into the ng-view via the default route.

html

<div ng-app="myApp">
    <div ng-view>
        <script id="bar.html" type="text/ng-template">
           <ul>
             <li> test1 </li>
             <li> test2 </li>
             <li> test3 </li>
             <li> test4 </li>
            </ul>
        </script>
    </div>
</div>

js

angular.module('myApp', ['ngRoute'], function($routeProvider, $locationProvider) 
{
    $routeProvider.when('/', { templateUrl: 'bar.html' });
});

There may be a nicer solution, but I'll need to work on that a bit more.

It will be a better solution bining the solutions of @towr and Answer to another question

angular.module('myApp', ['ngRoute'])
.directive('viewWithContent', ['$templateCache', function($templateCache)
{
    return {
        restrict: 'A',
        pile:  function (element)
        {
            $templateCache.put('initial-view.html', element.html());
        }
    };
}])
.config(function($routeProvider, $locationProvider) 
{
    var initialized = false;
    $routeProvider.when('/', {
        templateUrl: function(){
            if(initialized){ 
                return './views/route-url.html';
            }

            initialized = true;

            return 'initial-view.html';
        },
        controller: 'someController'
    });
});

don't forget to put priority more than 400 on the directive, because ng-view is executed with priority:400

example:

.directive('foo', ['$templateCache', function($templateCache){
return {
    restrict: 'A', 
    priority:500,
    pile:  function (element)
    {
        $templateCache.put('bar.html', element.html());
    }
};}])