ui-router loggin page without menu - angularjs

Question

I'm a begginer with angular 1.6 and I would like to do the next:
Loggin, register & remember password without menu.
After loggin: Menu, nav bar and footer appears.
Up to now I have the next:
Index.html
<ui-view></ui-view>
Loggin: Works fine.
authenticationService.Login(vm.email, vm.password, function (result) {
if (result === true) {
$location.path('/main');
} else {
vm.error = 'Username or password is incorrect.';
vm.loading = false;
}
});
};
If I have logged I go to main, here my problems appear..
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
<div ng-include="'../views/partials/main-navigation.html'"></div>
<!-- Page wraper -->
<div id="page-wrapper">
<!-- Topnavbar -->
<div ng-include="'../views/partials/main-topnavbar.html'"></div>
hola mundo
<!-- Main view -->
<div ui-view>aqui tengo que meter todas las vistas</div>
<!-- Footer -->
<div ng-include="'../views/partials/main-footer.html'"></div>
</div>
<!-- End page wrapper-->
Now I would like to put the rest of my web pages inside the main
<div ui-view>All pages here</div>
How Can I do this?
I have read several pages https://ui-router.github.io/ and some more, but It is not clear for me.
I think I have to do some in my app.js but I don't now what...
(function () {
'use strict';
angular.module('frontEndApp', [
'ui.router',
'ngMessages',
'ngStorage',
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngStorage',
'ngResource',
'pascalprecht.translate']).config(config).run(run);
function config ($stateProvider, $translateProvider, $urlRouterProvider) { // default route
$urlRouterProvider.otherwise('/login');// app routes
var states = [
{ name: 'main', url: '/main', templateUrl: 'views/main/main.html' },
{ name: 'login', url: '/login', templateUrl: 'views/login/login.html', controller: 'loginController', controllerAs: 'vm' },
{ name: 'department', url: '/department', templateUrl: 'views/department/department.html', controller: 'departmentController', controllerAs: 'vm' }
];
// Loop over the state definitions and register them
states.forEach(function (state) {
$stateProvider.state(state);
});
/**
* Translation of the web page with angular-Translate
*/
$translateProvider.useStaticFilesLoader({
files: [{
prefix: '../config/languages/locale-',
suffix: '.json'
}]
});
$translateProvider.preferredLanguage('en');
$translateProvider.useSanitizeValueStrategy('escapeParameters');
}
function run ($rootScope, $http, $location, $localStorage) { // keep user logged in after page refresh
if ($localStorage.currentUser) {
$http.defaults.headers.common.Authorization = 'Bearer ' + $localStorage.currentUser.token;
}
// redirect to login page if not logged in and trying to access a restricted page
$rootScope.$on('$locationChangeStart', function (event, next, current) {
var publicPages = ['/login'];
var restrictedPage = publicPages.indexOf($location.path()) === -1;
if (restrictedPage && !$localStorage.currentUser) {
$location.path('/login');
}
});
}
})();
Thanks in advance for your help.

Answer 1

Simply:
{ name: 'main', url: '/main', templateUrl: 'views/main/main.html' },
{ name: 'login', url: '/login', templateUrl: 'views/login/login.html',
controller: 'loginController', controllerAs: 'vm' },
{ name: 'main.department', url: '/department', templateUrl:
'views/department/department.html', controller: 'departmentController',
controllerAs: 'vm' }
If department belongs to main then call it: 'main.department'