Angular JS and partials

Question

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)

Answer 1

Yes, you can do it using ngInclude directive.

See the docs and example here: https://docs.angularjs.org/api/ng/directive/ngInclude

Answer 2

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

Answer 3

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