Using partials in views


#1

I want to add a search form in all views, and instead of duplicating the code, I want just to call the template file.

I created template file called: search-form.html

and defined the following views on the app.js on the routes:

 .state('home', {
      url: "/",
      views: {
        'mainContent' :{
            controller: 'CategoriesController',
            templateUrl: "templates/categories.html",
        },
        'leftSideMenu': {
            templateUrl : "templates/sidemenu.html",
        },
        'searchForm': {
            templateUrl : "templates/search-form.html",
        }
      }
    })

and when I try to call: inside the main templates, it renders nothing.


#2

Can you post a sample codepen of this? Where is the outlet for this view?


#3

Thank you @mhartington, here is a very basic code sample:


#4

Just use ng-include. e.g.

<div ng-include src="'templates/foo.html'" ng-repeat="foo in foos"></div>