Yes, you can do it using ngInclude directive.
See the docs and example here: http://docs.angularjs.org/api/ng.directive:ngInclude
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
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?
Not sure if I understand that correctly, but isn't this the fundamental difference between server side and client side templating? So if you wanted a solution, to do server side template, which is effectively what you are asking for iiuic, you wouldn't find it inside Angular JS.
When using Angular, nothing prevents you to work with server side templates. But Angular would not ever know about that, since Angular only operates on the client.
It would definitely be possible to use server side templating even on Angular partials if that would ever make any sense. In any case, the server that is responding to the request (main page or partial) would need to render the template before serving it.
@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/>"
}
}
})