Loading a partial view into a Div AngularJS

Question

I'm relatively new to angular and mostly just toying around with a simple SPA, most of my experience comes from VS and MVC 5, so I know something like this can be done with partial views. But I can't seem to figure it out with angular.

In this plunkr, I have an example:

http://plnkr.co/edit/H4yyrNvWlTiSoahYHVXA?p=preview

Basically, I would like the dynamic list of links to point to a different view, for now I just have home.

However I can't even seem to get the view to load when hardcoded.

I think I should be using ng-include:

<div class="col-lg-12" ng-include ng-src="Home.html">

</div> 

Answer 1

I don't recommend you use ng-include for this kind of logic. The Angular Router , the Angular New Router , and ui-Router all have this functionality, and have many features built in.

However, to address your concern with this specific code snippet, ng-include expects a value to be passed to it. The value passed should be a model property that evaluates to a string, or a string constant. In the case of a string constant, it should be included in a single quote ' . So, try this:

<div class="col-lg-12" data-ng-include="'home.html'" >
</div>

Answer 2

You should specify the template url in ng-include directive, and if it's constant (eg home.html), need to put it in single quote:

<div class="col-lg-12" data-ng-include="'home.html'" >
</div>

Alternatively, you can put the template url in controller scope variable and bind it to ng-include