угловой маршрутный провайдер включает верхний и нижний колонтитулы и шаблон

0

Я пытаюсь добавить шаблоны к ссылкам, которые работают, однако мне было интересно, есть ли возможность добавить к нему верхний и нижний колонтитулы, теперь я копирую свой верхний и нижний колонтитулы для каждой страницы.

здесь мои 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'
                })

и здесь шаблон im загружает их в

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

Также у меня разные страницы с различными опциями меню.

1 ответ

0

Вы можете попробовать использовать ng-view в качестве места для включения ваших шаблонов. Ваш нижний колонтитул и заголовок будут находиться за пределами этого ng-view. Вы также можете отображать свое меню прямо в html. Просто разместите карту своих меню и ссылки где-нибудь и сделайте это в html.

  • 0
    Я не очень следую решению

Ещё вопросы

Сообщество Overcoder
Наверх
Меню