Question

我已经创建了主页角度js模板，但我不相信我喜欢的方法是否合适，否则方式是否合适。

我使用angular-ui进行路由。

我的主页代码策略是页眉和页脚可以重复使用所有模板，所以我在ui-router中管理它的常用部分。

我可以实现这一点但是在每个状态下我都需要在每个视图下定义页眉。如果它是关于2-3状态则可以，但是如果我们认为存在状态的持续状态，并且每个状态的每个视图都需要定义页眉/页脚，那么它太冗长而且作为一个状态程序员的观点，这是错误的。所以我需要一些建议，我怎样才能改进这个模板编码。

的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

我使用ui-view仅获取主页的globalheaderline3。任何其他页面都不需要使用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-router。在根状态中使用视图，如下所示：

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

}());

嵌套角度ui路线问题

2 个答案: