嵌套 angular ui-路由问题

Question

我已经制作了首页angularjs模板，但我不确定我喜欢的方法是否正确，否则方法是否正确。

我使用 angular-ui 进行路由。

我为主页编写代码的策略是页眉和页脚可重复用于所有模板，因此我在 ui-router 中管理它的公共部分。

我可以做到这一点，但在每个状态下我都要求uired 在每个视图下定义页眉-页脚。如果它是大约 2-3 个状态那么没关系但是如果我们认为有 hunderend 状态并且每个状态的每个视图都需要 uired 来定义 header/footer 它太冗长并且从程序员的角度来看，它是错误的。所以我请求uired 亲切的建议，我该如何改进这个模板编码。

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 &copy; 2016 AquireConsole&trade;. All rights reserved.</div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </footer>
</span>

Answer 1

您正在使用 ui-路由器。像这样在根状态下使用视图：

<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'
        }
    }
  })

不是因为视图，每个直接子级都需要这样定义，即使他们不使用视图也是如此：

 .state('home.main', {
      url:'/main',
      views:{
          '@':{templateUrl: 'template/main.html',
              controller: 'MainCtrl'
          }
      }        
  })

对于第3级状态，您可以返回到没有视图的正常状态声明。

编辑：这是我制作的 punklr 的工作代码：

<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>

Answer 2

Walfrat 给了我很好的指导和支持，再次非常感谢你。我已经放置了解析嵌套 url 路由和解决全局页眉和页脚错误所需的所有存根。

我需要在全局范围内显示页眉和页脚，我将 globalheaderline3 到 7 放在主页中，因此它只显示主页。

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'
                        }
                    }
                })
    }

}());

嵌套 angular ui-路由问题

Issue with nested angular ui-routes

angularjs

angular-ui

angular-ui-router