Ng-view не отображается после добавления ui.bootstrap
Я добавил ui.bootstrap в свой контроллер:
angular.module('myApp', ['ui.bootstrap']).controller('ClientController', function($scope, $uibModal, ClientService) {});
Я также добавил bootstrap-tpls в свой файл index.html.
Внутри index.html есть панель навигации с кнопкой. При нажатии должен отображаться .html, связанный с вышеупомянутым контроллером, который скрыт внутри <div ng-view></div>.
Тем не менее, при нажатии ничего не происходит - не отображается ни одна html-страница. Кроме того, он не отображает html-страницу, относящуюся к другому контроллеру, а не к ClientController.
Удаление ['ui.bootstrap'] и оставление только angular.module('myApp') делает ng-view видимым, но выдает (как и ожидалось, я полагаю) ошибку:
"Unknown provider: $uibModalProvider <- $uibModal <- ClientController".
Почему ng-view не работает с ui.bootstrap, указанным в таблице модулей?
Редактировать:
Навбар:
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">App</a>
</div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#/">Main</a></li>
<li><a href = "#/client">Client</a></li>
<li><a href = "#/admin">Admin</a></li>
</ul>
</div>
</nav>
<div style = "
margin-bottom: 30%;
margin-right: 20%;
margin-left: 20%;
margin-top: 10%;"
ng-view></div>
app.js:
'use strict';
var app = angular.module("myApp", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/client", {
templateUrl : "client",
controller : "ClientController as cCtrl"
})
.when("/admin", {
templateUrl : "admin",
controller : "AdminController as aCtrl"
})
}]);
Изменить 2:
Перемещение ui.bootstrap в app.js и использование переменной приложения при создании контроллера не решило проблему - возникла ошибка:
Unknown provider: $uibModalProvider <- $uibModal <- ClientController
Теперь код выглядит так:
app.js:
var app = angular.module ("myApp", ['ngRoute', 'ui.bootstrap']);
ClientController:
app.controller('ClientController', function($scope, $uibModal, ClientService) {})
Изменить 3:
Теги скрипта:
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "static/js/app.js"></script>
<script src = "static/js/controller/AdminCtrl.js"></script>
<script src = "static/js/service/AdminService.js"></script>
<script src = "static/js/controller/ClientCtrl.js"></script>
<script src = "static/js/service/ClientService.js"></script>
<link rel = "stylesheet" href = "static/css/styles.css">
<meta charset = "UTF-8">
</head>
@AlekseySolovey Я обновил свой пост кодом app.js и index.html. Я вижу, откуда у меня вторая ошибка. Но я не могу понять первую проблему - почему здесь ничего не происходит. В консоли тоже нет ошибки.
Проблема в том, что вы можете создать новый модуль, подобный синтаксису: angular.module ('myapp', []), в то время как вы получаете доступ к тому же модулю, используя этот синтаксис angular.module ('myapp'), то есть без квадратных скобок. Но когда вы создаете контроллер, вы снова определяете свой модуль, который вы используете в качестве модуля начальной загрузки. Вместо добавления ui.bootstrap во время создания контроллера добавьте его как еще одну зависимость в app.js var app = angular.module ("myApp", ['ngRoute', 'ui.bootstrap']); затем используйте эту переменную приложения для создания контроллера как app.controller ();
@GauravSingh, это не помогло. Теперь есть: «Неизвестный провайдер: $ uibModalProvider <- $ uibModal <- ClientController». См. Мой отредактированный пост выше
версия ui-bootstrap-tpls? и не могли бы вы добавить index.html с порядком тегов скрипта ..?
@GauravSingh, пожалуйста, смотрите выше. Собственно, это файл index.jsp. Я не думаю, что JSP имеет значение. Как упоминалось ранее, добавление ui.bootstrap делает ng-view неработающим (хотя я вижу в URL-адресе, что он попадает в свой маршрут)
в этой версии нет uibmodal add cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/… и вызывает любой angular.js или angular.min.js, и то же самое касается ui-bootstrap.
Ответы 1
Сделайте свой index.jsp таким
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src = "static/js/app.js"></script>
<script src = "static/js/controller/AdminCtrl.js"></script>
<script src = "static/js/service/AdminService.js"></script>
<script src = "static/js/controller/ClientCtrl.js"></script>
<script src = "static/js/service/ClientService.js"></script>
<link rel = "stylesheet" href = "static/css/styles.css">
<meta charset = "UTF-8">
</head>
Вторая ошибка связана с тем, что вы вводите
$uibModalв свой контроллер, который является частью модуляui.bootstrap. Удалив его, он не сможет найти введенную услугу / поставщика. Что касается первой проблемы, вам нужно опубликовать свой код с помощью панели навигации. Обычно у них есть якорные ссылки, которые изменяют URL-адрес, перенаправляют вас и изменяют контент вng-view.