0

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>
Improve this question

2 Answers 2

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Makes sense, checking out the route options now. Both examples worked. Marking yours as answer because of the route examples.
1

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

Improve this answer

1 Comment

how to do this using javascript instead defining in html?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.