How to use multiple templates with defined template hierarchy in angularjs?

Question

JavaScript

Hello. I'm new to angularjs development, so I'm asking for help from developers with experience.
Angular has a great $routeProvider service that binds our html templates.
There is also a $stateProvider service that also binds and can break apart our templates.

The question is which service to use and how to use them correctly so that the interaction of templates is performed, well, if, for example, according to this principle:

index - view
->header.html
->content.html
->leftBlock.html -> login.html
->footer .html

i.e. To make it easier to understand what is needed, I need all these templates to be linked in index.html, and when you click on the login, a modal window is loaded that will load another template.

Please show an example of a working code where one template loads another.

var mainApp = angular.module('mainApp', [
'ngRoute',
'mainControllers'
]);

mainApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/main', {
templateUrl: '../resources/templates/mainContent.html',
controller: 'mainContentCtrl'
}).
when('/main/:itemId', {
templateUrl: '../resources/templates/mainDetails.html',
controller: 'mainDetailCtrl'
}.
otherwise({
redirectTo: '/main'
});
}]);

Here is the code that loads one template, which displays a lot of items, I go one by one, a separate item is loaded, well, here it’s like news with the “more” button. The difficulty is how to load the login.html template into my Index.html so that I can display it in a modal window on click?

Answer 1

uiRouter

Answer 2

Perhaps you need to make sure that login.html is simply wrapped in a div that is displayed modally?

Answer 3

uiRouter + ngModal completely solve your problems

Answer 4

angular-route-segment.com