Angular JS and partials

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)

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/>"
        }
    }    
})