Question

我正在尝试向链接添加模板，这是有效的，但我想知道是否有可能添加页眉和页脚，现在我正在为每个页面复制我的页眉和页脚。

这是我的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>

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

Answer 1

您可以尝试使用ng-view作为包含您的模板的地方。您的页脚和标题将位于ng-view之外。您也可以直接在html中渲染菜单。只需将你的地图菜单和链接放在某处，然后用html渲染它。

angular routeprovider包括页眉，页脚和模板

1 个答案: