AngularJs (1.X) Include Partial Template
From Angular 2
, ngInclude
has been removed and custom directives are preferred. This is the way I come up with
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 ---->
- Define a
base.html
, which will contain the body tag and the app tag
<body> <app>Loading ...</app> </body>
- Now, final step is defining the components for
Navigation
andFooter
like the MainComponent, which point to your partial templates