Issue with nested angular ui-routes
Question
I have created homepage angular js template, but I am not confident that the approach I prefer is it proper or not, else the way is proper or not.
I used angular-ui for routing.
My strategy to code for homepage is that header and footer are reusable for all templates, So I manage it common section in ui-router.
I can achieve that but in every state I required to define header-footer under each view. If it's about 2-3 state then it's ok but if we think that there are hunderend of states and every views of each states required to define header/footer it's too lengthy and as a programmer perspective, it's wrong. So I required kind suggestion that how could I improve this template coding.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="AppAquireConsole" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="MobileOptimized" content="320" />
<meta name="description" content="AquireConsole" />
<meta http-equiv="Cache-control" content="public"/>
<link type="text/css" rel="stylesheet" href="/css/angular-csp.css"/>
<link type="text/css" rel="stylesheet" href="/css/font-awesome.css"/>
<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="/css/ngNotificationsBar.min.css"/>
<link type="text/css" rel="stylesheet" href="/css/font.css"/>
<link type="text/css" rel="stylesheet" href="/css/style.css"/>
<link type="text/css" rel="stylesheet" href="/css/custom.css"/>
<link type="text/css" rel="stylesheet" href="/css/magnific-popup.css"/>
<link type="text/css" rel="stylesheet" href="/css/responsive-layout.css"/>
<link type="text/css" rel="stylesheet" href="/css/mgmenu.css"/>
<link type="text/css" rel="stylesheet" href="/css/langdd.css"/>
<title>Welcome to AquireConsole</title>
</head>
<body>
<div><notifications-bar class="notifications"></notifications-bar></div>
<header id="ccr-header" ui-view="globalHeaderLine1"></header>
<section id="ccr-site-title" ui-view="globalHeaderLine2"></section>
<div class="clear"></div>
<div ui-view></div>
<footer ui-view="footer"></footer>
<!-- Javascript Dependencies -->
<!-- Application -->
<script type="text/javascript" src="/vendor/utils/modernizr.custom.js"></script>
<script type="text/javascript" src="/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="/vendor/angular/angular.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-resource.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-route.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-ui-router.js"></script>
<script type="text/javascript" src="/vendor/angular/ngNotificationsBar.min.js"></script>
<script type="text/javascript" src="/vendor/angular/angular-re-captcha.js"></script>
<!-- Application boostrap -->
<script type="text/javascript" src="/client/app.js"></script>
<script type="text/javascript" src="/services/UserService.js"></script>
<!-- Application Components -->
<script type="text/javascript" src="/modules/home/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="/modules/home/controllers/ContactusCtrl.js"></script>
<script type="text/javascript" src="/modules/auth/controllers/auth.js"></script>
<script type = "text/javascript" src = "/modules/auth/directives/authPopupDirective.js" ></script>
<script type="text/javascript" src="/client/app.routes.js"></script>
<script type="text/javascript" src="/vendor/custom/auth.js"></script>
</body>
</html>
app.js
'use strict';
angular.
module('AppWhizbite', [
'ngResource', 'ngRoute', 'ui.router', 'ngNotificationsBar', 'reCAPTCHA'
]);
app.route.js
/*
* @Author: user11
* @Date: 2016-03-15 16:59:03
* @Last Modified by: user11
* @Last Modified time: 2016-03-18 12:27:17
* @Purpose: Appliction default route
*/
(function () {
function authInterceptor($window) {
return{
request: function (config) {
if ($window.localStorage['hz-token']) {
config.headers.Authorization = 'Bearer ' + $window.localStorage['hz-token'];
}
return config;
}
}
}
/*
* Default Route of application
* @param {$stateProvider} Object
* @param {$routeProvider} Object
* @return
*/
function config($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/home');
$httpProvider.interceptors.push('authInterceptor');
$stateProvider
.state('app', {
url: '/home',
views: {
'globalHeaderLine1': {
templateUrl: '/partials/headerLine1.html',
controller: 'SigninCtrl',
controllerAs: 'Signin'
},
'globalHeaderLine2': {
templateUrl: '/partials/headerLine2.html'
},
'globalHeaderLine3@app': {
templateUrl: '/partials/headerLine3.html'
},
'globalHeaderLine4@app': {
templateUrl: '/partials/headerLine4.html'
},
'globalHeaderLine5@app': {
templateUrl: '/partials/headerLine5.html'
},
'globalHeaderLine6@app': {
templateUrl: '/partials/headerLine6.html'
},
'globalHeaderLine7@app': {
templateUrl: '/partials/headerLine7.html'
},
'': {
templateUrl: '/views/home/home.html',
controller: 'HomeCtrl',
controllerAs: 'Home'
},
'footer': {
templateUrl: '/partials/footer.html'
}
}
})
.state("resetpassword", {
url: "/resetpassword",
views: {
'globalHeaderLine1': {
templateUrl: '/partials/headerLine1.html',
controller: 'SigninCtrl',
controllerAs: 'Signin'
},
'globalHeaderLine2': {
templateUrl: '/partials/headerLine2.html'
},
'': {
templateUrl: '/views/auth/resetpassword.html',
controller: 'ResetPasswordCtrl',
controllerAs: 'ResetPassword'
},
'footer': {
templateUrl: '/partials/footer.html'
}
}
})
.state('contactus', {
url: '/contactus',
views: {
'': {
templateUrl: '/views/home/contactus.html',
controller: 'ContactusCtrl',
controllerAs: 'Contact'
}
}
})
}
angular
.module('AppAquireConsole')
.factory('authInterceptor', ['$window', authInterceptor])
.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', config])
.run(function ($rootScope, $http, notifications, $location, UserService) {
if ($location.path() === '/resetpassword' && ('' !== $location.search().q)) {
$http({
method: "GET",
url: '/api/user/resetPassword?forgotPasswordToken=' + $location.search().q
}).success(function (data) {
if (data.status === 0) {
$location.path("#/");
notifications.showSuccess({
message: 'This token has been expired',
hideDelay: 3000, //miliseconds
hide: true // boolean
});
}
});
}
});
}());
Headerline1.html
<!-- Header row 1 -->
<section class="fullwidth" id="ccr-nav-top">
<div class="">
<div class="container">
<div class="top-menu-out-row">
<nav class="top-menu">
<ul class="left-top-menu">
<li class="s" ng-show="!isAuth">
<a id="sign_in_link" class="popup-modal" href="#signup-modal" data-selector="user">Sign in</a>
</li>
</ul>
<ul class="left-top-menu z1" ng-show="isAuth">
<li class="icons heading_icon1 i4">
<a href="/"></a>
<div id="comment_bubble3">28</div>
</li>
</ul>
<div class="right-top-menu" ng-controller='SignoutCtrl'>
<!--<div class="help" ng-show="isAuth">
<a href="javascript:void(0)" ng-click='doLogout()'>Sign out</a>
</div>-->
<div id="mgmenu1" class="mgmenu_fixed" hz-mg-menu>
<!-- Begin Mega Menu Container -->
<ul class="mgmenu" ng-show="isAuth">
<!-- Begin Mega Menu -->
<li class="username-menu">
<a href="#">
<div class="user_img_div"><img src="/images/review-of-the-day-img.png" alt="" /></div>
</a>
<!-- Begin Item -->
<div class="dropdown_container user_menu_list_div dropdown_right">
<!-- Begin Item Container -->
<ul>
<li><a href="#"><i class="fa fa-user"></i>Profile</a></li>
<li><a href="#"><i class="fa fa-cog"></i>Settings</a></li>
<!--
<li><a href="#">Dashboard</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Ads</a></li>
<li><a href="#">Go Pro</a></li>
-->
<li><a href="#"><i class="fa fa-info"></i>help</a></li>
<li>
<a href="javascript:void(0)" ng-click='doLogout()'><i class="fa fa-sign-out"></i>Sign out</a>
</li>
</ul>
</div>
<!-- End Item Container -->
</li>
</ul>
<!-- End Mega Menu -->
</div>
<!-- Country Dropdown -->
<div id="country-select" class="country-select" ng-show='isAuth'>
<select id="country" class="lang" name="lang" hz-country>
<option data-image="/images/01260a4075c6211b85c238bca9da530c0082ad57.png" id="cn" value="cn">中国</option>
<option data-image="/images/118bfcf23d08303ac780159a88e4fe08e1a5486c.png" id="us" value="us">United States</option>
<option data-image="/images/1f3187b21407a166ca4be416239d651773ff16f7.png" id="fr" value="fr">France</option>
<option data-image="/images/212ecb1ec871853889b99415d892ff146e298572.png" id="es" value="es">España</option>
<option data-image="/images/4f01294423da719620ec085fdcb296aae770b9b8.png" id="ja" value="ja">日本</option>
<option data-image="/images/5418615051e7c75c739b37410a3880b2d446de49.png" id="de" value="de">Deutschland</option>
<option data-image="/images/5b0fdd9f3c689d5513f14a573f337f3ed8ff0b90.png" id="se" value="se">Sverige</option>
<option data-image="/images/6562d12469d881ade4e601271c8bc9611de26c47.png" id="nl" value="nl">Nederland</option>
<option data-image="/images/65d695205c65a59c11bb6b0e648f8b0762c93f23.png" id="no" value="no">Norge</option>
<option data-image="/images/8083ba7d7bef31ea102f103eb6de2fe91fa499a9.png" id="pt" value="pt">Portugal </option>
<option data-image="/images/96b92c16a40f014348697954e0a6392d46436711.png" id="ru" value="ru">Росси́я</option>
<option data-image="/images/ac84a0fd7788953be215d0c39e0f6475c5e02708.png" id="uk" value="uk">United Kingdom</option>
<option data-image="/images/c1ab60a593e63abaf097f80c6da3c3b73977465f.png" id="it" value="it">Italiana</option>
<option data-image="/images/d6c81a98d767f6da1b0df6a3433253b3a1c6d92c.png" id="gr" value="gr">Ελλάδα</option>
</select>
</div>
<!-- Help -->
<div class="help" ng-show="!isAuth">
<a href="/">Help</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</section>
<div class="clear"></div>
Headerline2.html
<!-- Header row 2 -->
<div class="container">
<div class="site-logo">
<a class="navbar-brand" href="/">
<img alt="AquireConsole" src="/images/AquireConsole-header-logo.png" />
</a>
<div class="clear"></div>
</div>
<!-- Global search -->
<div class="site-logo-search-bar">
<div class="nav-submit-button">
<input type="submit" value="Go" class="nav-submit-input"/>
</div>
<div class="site-logo-search-bar-first">
<input type="text" placeholder="where (show the nearest place to local search)" class="search-bar-input-text search-bar-input-text-first"/>
</div>
<div class="site-logo-search-bar-second">
<input type="text" placeholder="find cuisine / food" class="search-bar-input-text search-bar-input-text-second">
</div>
<div class="clear"></div>
</div>
</div>
Headerline3.html
<!-- Header row 3 -->
<div class="p1-hero-wrapper shift-with-hiw">
<div id="hero" data-native-currency="INR">
<video class="fillWidth" loop autoplay muted>
<source src="/home_video/3c1da09f38a9b452b62859c4cef223adfd590216.mp4" data-src="home_video/3c1da09f38a9b452b62859c4cef223adfd590216.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
Homepage.html
I have used ui-view to get globalheaderline3 for homepage only. Any other page there is not required to use globalheaderline3.
<div class="container_video" ui-view="globalHeaderLine3"></div>
<div class="container">
<div class="datas-menu-card-row">
<div class="datas-menu-box datas-menu-box-right">
<div class="datas-menu-box-titel">
<div class="datas-menu-box-blue-titel">
Telepizza
</div>
<div class="datas-menu-box-black-titel">Barcelona, Spain</div>
<div class="clear"></div>
</div>
<div class="datas-menu-box-menu-out"> <img src="/images/menu-card-3.png" alt=""/> </div>
<div class="datas-menu-box-ratings-out">
<div class="datas-menu-box-ratings-clo"> <span class="icon_img icon_img1 sr_right_raw2"></span> 445 </div>
<div class="datas-menu-box-ratings-clo"> <span class="icon_img icon_img2 sr_right_raw2"></span> 445 </div>
<div class="clear"></div>
</div>
<div class="datas-menu-box-details">
<div class="datas-menu-box-details-left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem... </div>
<div class="datas-menu-box-details-right">
<div class="datas-menu-box-details-menu">
<ul>
<li><a href="#"><span class="icon_img1 heading_icon1"> </span><span>order online</span></a></li>
<li><a href="#"><span class="icon_img2 heading_icon1"> </span><span>chat</span></a></li>
<li><a href="#"><span class="icon_img3 heading_icon1"> </span><span>reserve</span></a></li>
<li><a href="#"><span class="icon_img4 heading_icon1"> </span><span>photo</span></a></li>
<li><a href="#"><span class="icon_img5 heading_icon1"> </span><span>videos</span></a></li>
<li><a href="#"><span class="icon_img6 heading_icon1"> </span><span>go to data</span></a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="latest-review-titel">Latest Review</div>
<div class="latest-review-details">
<div class="latest-review-left-div">
<div class="latest-review-left-img"><img src="/images/latest-review-img.png" alt=""/></div>
<div class="latest-review-left-name">
<div class="latest-review-left-flage"><img src="/images/flag-img.png" alt=""/></div>
John Smith
</div>
</div>
<div class="latest-review-right-div">
What a hidden foodie haven! The ambiance is a relaxed with chic decor and healthy atmosphere. The music set the tone with everything from Rolling Stones to Sublime coming through the speakers. The music set the tone with everything from Rolling Stones to Sublime coming through the speakers.
<div class="latest-review-right-row">
<div class="latest-review-redmore"><a href="#">Read more...</a></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="datas-menu-box datas-menu-box-left">
<div class="datas-menu-box-titel">
<div class="datas-menu-box-blue-titel">
DE Jong Vis Specialist
</div>
<div class="datas-menu-box-black-titel">Barcelona, Spain</div>
<div class="clear"></div>
</div>
<div class="datas-menu-box-menu-out"> <img src="/images/new-menu-img-2.png" alt=""/> </div>
<div class="datas-menu-box-details">
<div class="datas-menu-box-details-left"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem... </div>
<div class="datas-menu-box-details-right">
<div class="datas-menu-box-details-menu">
<ul>
<li><a href="#"><span class="icon_img1 heading_icon1"> </span><span>order online</span></a></li>
<li><a href="#"><span class="icon_img2 heading_icon1"> </span><span>chat</span></a></li>
<li><a href="#"><span class="icon_img3 heading_icon1"> </span><span>reserve</span></a></li>
<li><a href="#"><span class="icon_img4 heading_icon1"> </span><span>photo</span></a></li>
<li><a href="#"><span class="icon_img5 heading_icon1"> </span><span>videos</span></a></li>
<li><a href="#"><span class="icon_img6 heading_icon1"> </span><span>go to data</span></a></li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="latest-review-titel">Latest Review</div>
<div class="latest-review-details">
<div class="latest-review-left-div">
<div class="latest-review-left-img"><img src="/images/latest-review-img.png" alt=""/></div>
<div class="latest-review-left-name">
<div class="latest-review-left-flage"><img src="/images/flag-img.png" alt=""/></div>
John Smith
</div>
</div>
<div class="latest-review-right-div">
What a hidden foodie haven! The ambiance is a relaxed with chic decor and healthy atmosphere. The music set the tone with everything from Rolling Stones to Sublime coming through the speakers. The music set the tone with everything from Rolling Stones to Sublime coming through the speakers.
<div class="latest-review-right-row">
<div class="latest-review-redmore"><a href="#">Read more...</a></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="resturant-box-row-line"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
Footer.html
<!-- Footer content row 1 -->
<span id="footer_height">
<aside id="ccr-footer-sidebar-five">
<div class="container">
<div class="bottom-dro-img">
<img alt="" src="/images/footer-img.png"> </div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</aside>
<footer id="ccr-footer">
<div class="container">
<div class="copyright">
Copyright © 2016 AquireConsole™. All rights reserved.</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</footer>
</span>
2 answers
solution1
1 ACCPTED 2016-04-12 13:15:33
Your using ui-router. Use views in the root state like this :
<section id="header"><div ui-view="header"></div></section>
<section id="content"><div ui-view></div></section>
<section id="footer"><div ui-view="footer"></div></section>
$stateProvider
.state('home', {
url:'/home',
views:{
'header':{
templateUrl: 'template/header.html',
controller:'HeaderCtrl'
},'footer':{
templateUrl: 'template/footer.html'
}
}
})
Not that because of views each direct children will need to be defined as this even if they don't use views :
.state('home.main', {
url:'/main',
views:{
'@':{templateUrl: 'template/main.html',
controller: 'MainCtrl'
}
}
})
For the 3rd level states, you can go back to the normal states declaration without views.
EDIT : here is a working code from the punklr i made :
<html>
<head>
<script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular.js@<2" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script>
angular.module('test', ['ui.router']);
angular.module('test').config(function config($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('/home/contacts');
// $httpProvider.interceptors.push('authInterceptor');
$stateProvider
.state('app', {
url: '/home',
views: {
'globalHeaderLine1': {
template: 'HEADER LINE 1',
// controller: 'SigninCtrl',
// controllerAs: 'Signin'
},
'globalHeaderLine2': {
template: 'HEADER LINE 2'
},
'footer': {
template: 'FOOTER'
}
}
})
.state("app.resetpassword", {
url: "/resetpassword",
views: {
'@': {
template: 'RESET PASSWORD',
},
}
})
.state('app.contacts', {
url: '/contacts',
views:{
'@':{template:'CONTACTS <button ui-sref="app.resetpassword">RESET</button>'}
}
})
});
</script>
</head>
<body ng-app="test">
<div>
<div ui-view="globalHeaderLine1"></div>
<div ui-view="globalHeaderLine2"></div>
</div>
<div>
<div ui-view></div>
</div>
<div>
<div ui-view="footer"></div>
</div>
</body>
</html>
solution2
0 2016-04-12 15:04:54
Walfrat has given me good guidelines and support and thank you very much again. I have put all stub which is required to resolve nested url routing and resolve a bug of global header and footer.
I required to show header and footer globally and from globalheaderline3 to 7 I put in home so it displays only for home page.
index.html
<body>
<!-- Site Template -->
<div><notifications-bar class="notifications"></notifications-bar></div>
<!-- Header section -->
<header id="ccr-header" ui-view="globalHeaderLine1"></header>
<section id="ccr-site-title" ui-view="globalHeaderLine2"></section>
<div class="clear"></div>
<div ui-view="content"></div>
<footer ui-view="footer"></footer>
<!-- Javascript Dependencies -->
</body>
Home.html
<div class="container_video" ui-view="globalHeaderLine3"></div>
<div class='fake-container' ui-view='globalHeaderLine4'></div>
<div class="container" ui-view="globalHeaderLine5"></div>
<div class="container" ui-view="globalHeaderLine6"></div>
<div class="container" ui-view="globalHeaderLine7"></div>
<div class="container">
<-- Dynamic content area -->
</div>
app.js
(function () {
function authInterceptor($window) {
return{
request: function (config) {
if ($window.localStorage['hz-token']) {
config.headers.Authorization = 'Bearer ' + $window.localStorage['hz-token'];
}
return config;
}
}
}
function config($stateProvider, $urlRouterProvider, $httpProvider) {
$urlRouterProvider.otherwise('index');
$httpProvider.interceptors.push('authInterceptor');
$stateProvider
.state('app', {
url: '/',
views: {
'globalHeaderLine1': {
templateUrl: '/partials/headerLine1.html',
controller: 'SigninCtrl',
controllerAs: 'Signin'
},
'globalHeaderLine2': {
templateUrl: '/partials/headerLine2.html'
},
'footer': {
templateUrl: '/partials/footer.html'
}
}
})
.state('app.index', {
url: 'index',
views: {
'globalHeaderLine3@': {
templateUrl: '/partials/headerLine3.html'
},
'globalHeaderLine4@': {
templateUrl: '/partials/headerLine4.html'
},
'globalHeaderLine5@': {
templateUrl: '/partials/headerLine5.html'
},
'globalHeaderLine6@': {
templateUrl: '/partials/headerLine6.html'
},
'globalHeaderLine7@': {
templateUrl: '/partials/headerLine7.html'
},
'content@': {
templateUrl: '/views/home/home.html',
controller: 'HomeCtrl',
controllerAs: 'Home'
}
}
})
.state("app.resetpassword", {
url: "resetpassword",
views: {
'content@': {
templateUrl: '/views/auth/resetpassword.html',
controller: 'ResetPasswordCtrl',
controllerAs: 'ResetPassword'
}
}
})
.state('app.contactus', {
url: 'contactus',
views: {
'content@': {
templateUrl: '/views/home/contactus.html',
controller: 'ContactusCtrl',
controllerAs: 'Contactus'
}
}
})
.state('app.useractivation', {
url: 'useractivation',
views: {
'content@': {
templateUrl: '/views/auth/useractivation.html',
controller: 'UserActivationCtrl',
controllerAs: 'UserActivation'
}
}
})
}
}());
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Django urls and Angular ui-routes
How to render ui-routes?
Transition to grandfather state in ui-routes
Angular ui.router. Deep nested routes
Is there a cleaner way to use angular ui nested routes with ui-router?
Angular UI Router - nested routes does not work on templates with nested state
Three level nested routes in angular-ui-router
Angular ui-router not calling child controller in nested routes
Issue with Nested State in Angular UI-Router
Angular 2 Nested Routes using @Routes
Related Tags