简体   繁体   English

嵌套角度ui路由问题

[英]Issue with nested angular ui-routes

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. 我已经创建了主页angular js模板,但是我不确定我喜欢的方法是否正确,否则方法是否正确。

I used angular-ui for routing. 我使用angular-ui进行路由。

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. 我为首页编写代码的策略是,页眉和页脚可用于所有模板,因此,我在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. 如果大约是2-3个状态,那还可以,但是如果我们认为状态存在危险,并且定义页眉/页脚所需的每个状态的每个视图都太冗长,并且从程序员的角度来看,这是错误的。 So I required kind suggestion that how could I improve this template coding. 因此,我需要种种建议,那就是如何改善此模板编码。

主页布局

index.html 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 app.js

   'use strict';    
angular.
        module('AppWhizbite', [
            'ngResource', 'ngRoute', 'ui.router', 'ngNotificationsBar', 'reCAPTCHA'
        ]);

app.route.js 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 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 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 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 Homepage.html

I have used ui-view to get globalheaderline3 for homepage only. 我已经使用ui-view来获取globalheaderline3仅用于主页。 Any other page there is not required to use 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.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>

Your using ui-router. 您使用的ui路由器。 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. 对于第3级状态,您可以返回没有视图的正常状态声明。

EDIT : here is a working code from the punklr i made : 编辑:这是我制作的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>

Walfrat has given me good guidelines and support and thank you very much again. Walfrat给了我很好的指导和支持,再次非常感谢您。 I have put all stub which is required to resolve nested url routing and resolve a bug of global header and footer. 我已经放入了解决嵌套的url路由并解决全局页眉和页脚的bug所需的所有存根。

I required to show header and footer globally and from globalheaderline3 to 7 I put in home so it displays only for home page. 我需要全局显示页眉和页脚,并在首页中显示从globalheaderline3到7的所有页眉和页脚,因此仅显示首页。

index.html 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 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 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'
                        }
                    }
                })
    }

}());

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM