AngularJs (1.X) Include Partial Template AngularJs (1.X) Include Partial Template angularjs angularjs

AngularJs (1.X) Include Partial Template


One way of including templates/html fragments from external files is to use the ng-include directive (doc).

<ng-include src="'/path/to/the/header.html'"></ng-include>

or

<div ng-include src="'/path/to/the/header.html'"></div>


From Angular 2, ngInclude has been removed and custom directives are preferred. This is the way I come up with

  1. Define the main component for your app, which link to the master page

        @View({        templateUrl:   'client/app/layout/main.html',        directives: [ROUTER_DIRECTIVES, Navigation, Footer]    })    @Component({selector: 'app'})    @RouteConfig(        routerConfig    )    class MainComponent {    }

And this is the main template

<!---- Navigation bar ----><navigation></navigation><!----/ Navigation bar ----><!---- Main Part ----><router-outlet></router-outlet><!----/ Main Part ----><!---- Footer ----><footer></footer><!----/ Footer ---->
  1. Define a base.html, which will contain the body tag and the app tag

<body> <app>Loading ...</app> </body>

  1. Now, final step is defining the components for Navigation and Footer like the MainComponent, which point to your partial templates