Я пытаюсь добавить шаблоны к ссылкам, которые работают, однако мне было интересно, есть ли возможность добавить к нему верхний и нижний колонтитулы, теперь я копирую свой верхний и нижний колонтитулы для каждой страницы.
здесь мои 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>
Также у меня разные страницы с различными опциями меню.
Вы можете попробовать использовать ng-view в качестве места для включения ваших шаблонов. Ваш нижний колонтитул и заголовок будут находиться за пределами этого ng-view. Вы также можете отображать свое меню прямо в html. Просто разместите карту своих меню и ссылки где-нибудь и сделайте это в html.