Just beginning with angularjs and diving into a project. Using ui.router for handling various views. Encountering an issue where I have a main page index.html, all my views load in
<div ui-view=""></div><html lang="en" ng-app="leadsangularApp">
<head>
<link href="style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div ui-view=""></div>
</body>
</html>
If trying to achieve this with nested ui-views:
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
// States
$stateProvider
.state('root', {
abstract: true,
templateUrl: 'views/default.html',
})
.state('home', {
parent: "root",
url: "/home",
templateUrl: 'views/main.html',
})
.state('login', {
url: "/login",
templateUrl: 'views/login.html',
});
});
Even though the /login page has a different view, it is still loading the same css and js files. How can I set up the /login page to have a completely different head section and footer section?