I am new in angularjs.
I tried to load multiple page because login page is different design(without left menu, header,footer, nav bar) but other pages are have inculde header, footer, navbar like this.
For example, I have index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="vendor/theme_files/js/jquery.min.js"></script>
</head>
<body class="nav-md" ng-app="myApp" >
<div class="container body">
<div class="main_container">
<!-- left menu -->
<div left-menu></div>
<!-- /left menu -->
<!-- top navigation -->
<div top-navigation></div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" >
<!-- page content -->
<div id="right-content" ng-view=""></div>
<!--<div ng-view=""></div>-->
<!-- footer content -->
<div footer-content></div>
<!-- /footer content -->
<!-- /page content -->
</div>
</div>
</div>
<script src="vendor/angular/angular.js"></script>
<script src="vendor/angular-resource/angular-resource.js"></script>
<script src="vendor/files/angular-route.js"></script>
<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js:
var app = angular.module('myApp', ['ngRoute', 'ngStorage', 'lbServices', 'ui.router']);
app.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.when('/login', {
templateUrl : 'views/login.html',
controller : 'userController'
}).when('/register', {
templateUrl : 'views/register.html',
controller : 'userController'
}).when('/offerletter', {
templateUrl : 'views/offerLetter.html',
controller : 'offerLetterController'
}).otherwise({
redirectTo : '/login'
});
$httpProvider.interceptors.push(['$q', '$location', '$localStorage',
function($q, $location, $localStorage) {
return {
'request' : function(config) {
config.headers = config.headers || {};
if ($localStorage.token) {
config.headers.Authorization = $localStorage.token;
}
return config;
},
'responseError' : function(response) {
if (response.status === 401 || response.status === 403) {
$location.path('/signin');
}
return $q.reject(response);
}
};
}]);
}]);
app.directive('leftMenu', function() {
return {
restrict : 'A',
templateUrl : "views/pages/left-menu.html",
replace : true
};
//
});
app.directive('topNavigation', function() {
return {
restrict : 'A',
replace : true,
templateUrl : "views/pages/top-navigation.html",
scope : {
user : '='
}
};
});
app.directive('rightContent', function() {
return {
restrict : 'A',
replace : true,
templateUrl : "views/pages/content.html"
};
});
app.directive('footerContent', function() {
return {
restrict : 'A',
replace : true,
templateUrl : "views/pages/footer.html"
};
});
Now I need login.html which is totally different from index.html (don't need index's header, footer, sidebar) . How to combine login.html?
don't style your page in the index. Keep index.html as just a blank container. then style your login and other pages in their respective html pages. Use the ionic tabs app as an example of how the structure should be done.