angular routeprovider 包括页眉、页脚和模板答案

【问题标题】：angular routeprovider include header, footer and templateangular routeprovider 包括页眉、页脚和模板
【发布时间】：2015-11-03 21:54:56
【问题描述】：

我正在尝试将模板添加到链接中，这正在工作，但是我想知道是否有可能将您的页眉和页脚也添加到其中，现在我正在为每个页面复制我的页眉和页脚。

这是我的 js：

  app.config(['$routeProvider', '$locationProvider',
        function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: 'views/startpage.html',
                    controller: 'PageCtrl',
                    controllerAs: 'page'
                })
                .when('/page/test', {
                    templateUrl: 'test.html',
                    controller: 'PageCtrl',
                    controllerAs: 'page'
                })

这是加载它们的模板

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.js"></script>
    <script src="js/angular-animate.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

    <script type="text/javascript">
        angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
    </script>

    <title>SiteEngine Mobile</title>
</head>
<body ng-app="ngViewExample">
    <div class="fixedHeaderApp">
        <div class="headerIconLogo">
            <img src="img/world_icon.png" width="28px" height="28px" />
        </div>
        <span class="blue">Site</span><span class="orange">Engine</span>
    </div>

    <div class="whitespace"></div><div class="whitespace"></div>
    <div class="whitespace"></div><div class="whitespace"></div>
    <div class="whitespace"></div><div class="whitespace"></div>

    <div class="homebackimgWrapper">
        <div class="titleLarge">SiteEngine</div>
        <div class="titleSmall">Mobile</div>
    </div>
    <div class="container">
        <div class="loginLogo">
            <img src="img/loginIcon.png" width="120px" height="120px" />
        </div>

        <form action="views/startpage.html">
            <div class="form-group">
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Ingelogd blijven
                </label>
            </div>
            <button type="submit" class="btn btn-primary btnq-lg btn-block">Inloggen</button>
        </form>

        <div class="whitespace"></div>

        <div ng-controller="HomeController as product">
            <div ng-repeat="product in product.products">
                <h4>{{product.name}}</h4>
                <button ng-show="product.canPurchase">Add to stomach</button>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

我也有不同的页面，有不同的菜单选项。

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您可以尝试使用 ng-view 作为包含您的模板的地方。您的页脚和页眉将在该 ng-view 之外。您也可以直接在 html 中呈现您的菜单。只需将您的菜单和链接的地图放在某处并以 html 呈现。

【讨论】：

我并没有真正遵循解决方案