CODEWITHSUNDEEP
javascriptangularjs
Mitchell Hamann
Mitchell Hamann

Reputation: 313

Loading a partial view into a Div AngularJS

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>

Upvotes: 0

Views: 1873

Answers (2)

Claies
Claies

Reputation: 22323

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>

Upvotes: 2

Phuong Nguyen
Phuong Nguyen

Reputation: 3070

You should specify the template url in ng-include directive, and if it's constant (e.g. 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

Upvotes: 1

Related Questions