Is it possible to embed html page in another one in angular js?
If so, how to do it?
Here in their tutorial, the partial is not embedded in the page but it's like different page where you go when you click on one of the items. (see demo)
Add a comment
|
3 Answers
Yes, you can do it using ngInclude directive.
See the docs and example here: https://docs.angularjs.org/api/ng/directive/ngInclude
5 Comments
davidgoli
That's terrible. Is there no way to include a partial without invoking a new request, for example, as a reusable fragment in the initial HTML payload?
RevNoah
Exactly what I needed. Obviously, this should be used sparingly but it worked perfectly to repurpose my login form.
Marcio Cruz
@davidgoli, as far as I know, angular caches loaded templates to avoid subsequent requests.
Joel Cogen
@davidgoli You can define templates in the same page with a script tag, see docs.angularjs.org/api/ng.directive:script
Harmon
@davidgoli, the ngInclude directive will make a request to the backend for a partial, but if it already exists in the $templateCache, it will grab it from there first. You can add strings of HTML into the $templateCache like so: $templateCache.put('templateId.html', '<div>This is the content of the template</div>'); This should allow you to add special markup to your main index.html that contains the HTML you want to use as a template, and when the JS kicks in, you can read those elements, pull them in as strings, and add them to your $templateCache so angular can render them in.
@Wilt is right, but here is a more specific link and a code sample (from https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view )
In your root template:
<div ui-view></div>
<div ui-view="chart"></div>
<div ui-view="data"></div>
And in your app.config function
$stateProvider.state("home", {
views: {
"": {
template: "<h1>Some HTML</h1>"
},
"chart": {
templateUrl: "templates/chart.html"
},
"data": {
template: "<data_thing/>"
}
}
})
Comments
If ng-include is not what you need, you might want to check out the angular-ui-router module. It allows you to do nested and parallel views... It is great, flexible, easy to use and well documented.
https://github.com/angular-ui/ui-router
Comments
