Angular JS，UI-Bootstrap無法加載模板

Question

我正在嘗試為我的項目使用UI引導模式。 但是加載模板時出現問題。 我看到很多帖子都說我必須包括正確的腳本文件ui-bootstrap-tpls.js，但是，我認為我可能有其他問題，無法找到解決方案。

這是錯誤消息

angular.js:12701 GET http://localhost:63342/project/app/uib/template/modal/window.html 404 (Not Found)

angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
    at angular.js:88
    at angular.js:20203
    at angular.js:17000
    at m.$digest (angular.js:18182)
    at m.$apply (angular.js:18480)
    at l (angular.js:12501)
    at XMLHttpRequest.s.onload (angular.js:12655)
(anonymous) @ angular.js:14642
(anonymous) @ angular.js:11102
(anonymous) @ angular.js:20207
(anonymous) @ angular.js:17000
$digest @ angular.js:18182
$apply @ angular.js:18480
l @ angular.js:12501
s.onload @ angular.js:12655

angular.js:14642 Error: [$compile:tpload] http://errors.angularjs.org/1.6.5/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fwindow.html&p1=404&p2=Not%20Found
    at angular.js:88
    at angular.js:20203
    at angular.js:17000
    at m.$digest (angular.js:18182)
    at m.$apply (angular.js:18480)
    at l (angular.js:12501)
    at XMLHttpRequest.s.onload (angular.js:12655)

這是我的代碼。

app.js

var myApp = angular.module(
    'myApp', 
    ['agGrid','ngMaterial','ngMessages','ui.bootstrap']
);

index.html（此腳本在angular.js加載之后，mainController.js加載之前

<script src="../node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js">
</script>

mainController.js

myApp.controller('mainController',
    function mainController ($scope, $uibModal, $document) {

function myRowClickedHandler(event) {

        var modalInstance = $uibModal.open(
            {

                animation: true,
                ariaLabelledBy: 'modal-title',
                ariaDescribedBy: 'modal-body',
                templateUrl: '../app/myModalContent.html',
                controller: 'ModalInstanceCtrl',
                controllerAs: '$ctrl',
                resolve: {
                    items: function () {
                        return $ctrl.items;
                    }
                }
            });
    }
}

Answer 1

https://plnkr.co/edit/?p=preview

https://angular-ui.github.io/bootstrap/

請參考這個。 您還需要添加這些依賴關系。 請參考標准的矮人鏈接

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">