поэтому в целом я хочу создать одностраничное приложение с AngularJS, и я хочу, чтобы на моей странице был разный контент для общедоступных и зарегистрированных пользователей, поэтому я помещаю свою панель навигации, контент и нижний колонтитул в разные представления. Структура выглядит следующим образом:
- index.html
- script.js
- navbar.html
- содержание.html
- нижний колонтитул.html
- uirouter.html
Вот код для uirouter.html
<div ng-include="home.navbar"></div>
<div ng-include="home.content"></div>
<div ng-include="home.footer"></div>
А вот код для script.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
controller: 'RouteCtrl',
templateUrl: 'uirouter.html'
});
});
myApp.controller('RouteCtrl', function($scope) {
$scope.home = {
"navbar": "navbar.html"
"content": "content.html",
"footer": "footer.html"
}
});
И поместите ng-app, ng-controller и ng-view здесь, в index.html.
...
<body ng-app="myApp" ng-controller="RouteCtrl" id="home" data-spy="scroll" data-target=".navbar-collapse" data-offset="100">
<div ng-view=""></div>
...
Все представления загружаются хорошо, но проблема в том, что когда я нажимаю ссылки на панели навигации, такие как «Функции» и «Цены», которые должны относиться к каждому элементу в представлении, это не работает. Вот как выглядит navbar.html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <img src="images/logo.png" alt="logo"></a> </div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#pricing">Pricing</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Таким образом, «Функции» и «Цены» должны относиться к этим элементам в content.html.
...
<div id="containerfeatures" class="container">
<div class="row mainFeatures" id="features">
...
<div class="row PageHead" id="pricing">
...
Страница перенаправляется вместо ссылки на элементы, вот URL
http://localhost/app/#/pricing
которые думают, что это должно быть упомянуто об этом ..
http://localhost/app/#pricing
Я все еще новичок в AngularJS, поэтому я все еще блуждаю по пути туда и сюда. Это руководство, которому я следую при этом: Использовать несколько ng-просмотр одной страницы
Кто-нибудь, пожалуйста, помогите указать на мои ошибки или что я должен сделать, чтобы заставить их работать? Любая помощь будет очень признательна, большое спасибо.
