Я пытаюсь создать общий «Список значений», модал с возможностью поиска с естественным идентификатором и описанием. Мне удалось создать приложение angularjs, которое делает это в SpringBoot, но оно не вызывается как модальное.
Я хочу использовать только angularjs, bootstrap и springboot mvc, я не хочу входить в узел в качестве бэкэнда.
Я попытался следовать инструкциям здесь:
https://www.uibootstrap.net/angular-ui-bootstrap/angular-bootstrap-modal-example-demo/
Но они неполные, фрагменты кода. Я попытался собрать все это вместе и получить следующие три файла:
В этот момент я получаю
Ошибка: [$ инжектор: modulerr] Не удалось создать экземпляр модуля TestApp из-за:
[$ injector: modulerr] Не удалось создать экземпляр модуля ui.bootstrap из-за:
[$ инжектор: номод] Модуль 'ui.bootstrap' недоступен! Вы либо неправильно написали имя модуля, либо забыли загрузить его. При регистрации модуля убедитесь, что вы указали зависимости в качестве второго аргумента.
Я даже не знаю, где это взять ui.bootstrap и инструкции по установке для него говорят использовать npm, я хочу знать, какие файлы используются, и поместить их в мой проект Springboot. Npm и узел не входят в архитектурные планы.
index.html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Model</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script src="./app.js"></script>
</head>
<body>
<div ng-app="TestApp">
<div class="well">
<button type="button" class="btn btn-primary" ng-click="openModal()">Click
to Open Modal Window!</button>
</div>
</div>
</body>
app.js:
var modalInstance = '';
var app = angular.module('TestApp', ['ui.bootstrap']);
app.controller('TestCtrl', function($scope, $http) {
function modalOpenCtrl($scope, payload){
console.log('fgfdfd');
$scope.datas = payload;
console.log($scope.datas);
$scope.closeModal = function(){
$scope.cancelModal();
}
}
$scope.openModal = function(task){
modalInstance = $uibModal.open({
animation: false,
templateUrl: './modal_window.html',
controller: 'modalOpenCtrl',
scope: $scope,
size: 'md',
backdrop: 'static',
resolve: {
payload: function () {
return {
msg_body : 'Hello! I am payload msg',
title : 'Hello! Title',
body_title : 'UiBootstrap.net'
};
}
}
});
}
function modalOpenCtrl($scope, payload){
console.log('fgfdfd');
$scope.datas = payload;
console.log($scope.datas);
$scope.closeModal = function(){
$scope.cancelModal();
}
}
})
modal_window.html:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Model</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<script>
src="./app.js"
</script>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close" ng-click="closeModal()">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title">
<h4>{{datas.title}}</h4>
</div>
</div>
<div class="modal-body log-view">
<div class="clearfix">
<h2>{{datas.body_title}}</h2>
<div>{{datas.msg_body}}</div>
</div>
</div>
<div class="modal-footer model-grey-color">
<div class="clearfix">
<div>
<button class="btn btn-success" ng-click="closeModal()">
<i class="ace-icon fa fa-ok"></i> Ok
</button>
<button class="btn btn-danger" ng-click="closeModal()">
<i class="fa fa-close"></i> Close
</button>
</div>
</div>
</div>
</body>