I am currently working on a Sails.js + Angular.js project with a single layout. However, I have come across different HTML files that have a completely different layout compared to the one I am using.
The layout file I am currently using is the default layout.ejs located at views/layout.ejs. In this file, the header and footer are reusable throughout the project, while the body contains <div ng-view></div>, which is where Angular.js comes into play for the dynamic content. Here is an example of the Angular app configuration:
function config($routeProvider) {
$routeProvider.when('/movie', {
templateUrl: '/templates/movie-list.html',
controller: 'MovieCtrl'
}).when('/movie/:id', {
templateUrl: '/templates/movie-detail.html',
controller: 'MovieCtrl'
})
}
Now, I have 3 new HTML files with unique layouts that I want to incorporate as template files within the existing structure. The challenge is how to separate these layouts and integrate them seamlessly into the current setup. Any suggestions on how to achieve this?