Die seltsamen Probleme mit ui-Grid V4.0.2

Dies ist ein Beispiel, das ich aus http://ui-grid.info/ kopiert und thymeleaf Vorlage verwenden, wenn ich die lokale Datei verknüpfen (ui-grid.min.js & ui-grid.min.css, diese zwei Dateien herunterladen von ui-grid.info), Browser (chrome 57.0.2987.98) Konsole wirft Fehler:Die seltsamen Probleme mit ui-Grid V4.0.2

Uncaught ReferenceError: angular is not defined 
    at ui-grid.min.js:6 
    at ui-grid.min.js:6 
(anonymous) @ ui-grid.min.js:6 
(anonymous) @ ui-grid.min.js:6 
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.11/$injector/modulerr?p0=app&p1=Error%3A%20…%3A%2F%2Fcdn.bootcss.com%2Fangular.js%2F1.5.11%2Fangular.min.js%3A21%3A332) 
    at angular.js:38 
    at angular.js:4692 
    at q (angular.js:325) 
    at g (angular.js:4653) 
    at fb (angular.js:4575) 
    at c (angular.js:1809) 
    at Gc (angular.js:1830) 
    at se (angular.js:1715) 
    at angular.js:32616 
    at HTMLDocument.b (angular.js:3257) 
(anonymous) @ angular.js:38 
(anonymous) @ angular.js:4692 
q @ angular.js:325 
g @ angular.js:4653 
fb @ angular.js:4575 
c @ angular.js:1809 
Gc @ angular.js:1830 
se @ angular.js:1715 
(anonymous) @ angular.js:32616 
b @ angular.js:3257 
eg @ angular.js:3546 
d @ angular.js:3534

aber wenn ich verbinden die CDN:

<link th:href="@{//cdn.bootcss.com/angular-ui-grid/4.0.2/ui-grid.min.css}" rel="stylesheet"> 
<script th:src="@{http://cdn.bootcss.com/angular-ui-grid/4.0.2/ui-grid.min.js}"></script>

Browser Erfolgreiche Vorschau.

hier ist der Demo-Code:

<!doctype html> 
<html xmlns:th="http://www.thymeleaf.org" ng-app="app"> 

<head> 
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> 
    <link th:href="@{/css/ui-grid.min.css}" rel="stylesheet"> 
    <!-- <link th:href="@{//cdn.bootcss.com/angular-ui-grid/4.0.2/ui-grid.min.css}" rel="stylesheet"> --> 

    <!-- <script th:src="@{/js/angular.min.js}"></script> --> 
    <!-- <script th:src="@{/js/angular-animate.min.js}"></script> --> 
    <!-- <script th:src="@{/js/angular-sanitize.min.js}"></script> --> 
    <script th:src="@{/js/ui-grid.min.js}"></script> 
    <script th:src="@{http://cdn.bootcss.com/angular.js/1.5.11/angular.min.js}"></script> 
    <script th:src="@{http://cdn.bootcss.com/angular.js/1.5.11/angular-animate.min.js}"></script> 
    <script th:src="@{http://cdn.bootcss.com/angular.js/1.5.11/angular-sanitize.min.js}"></script> 
    <script th:src="@{/js/ui-bootstrap-tpls-2.5.0.min.js}"></script> 
    <!-- <script th:src="@{http://cdn.bootcss.com/angular-ui-grid/4.0.2/ui-grid.min.js}"></script> --> 
</head> 

<body> 
    <div ng-controller="MainCtrl"> 
     <div id="grid1" ui-grid="{ data: myData }" class="grid"></div> 
    </div> 
</body> 

<script> 

    var app = angular.module('app', [ 'ui.grid']); 

    app.controller('MainCtrl', function ($scope) { 

     $scope.myData = [ 
     { 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
    }, 
    { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
    }, 
    { 
     "firstName": "Nancy", 
     "lastName": "Waters", 
     "company": "Fuelton", 
     "employed": false 
    }] 
}); 

</script> 
</html>

Quelle

2017-03-20 A_Wen

Derzeit versuchen Sie ui-grid.min.js vor dem Laden angular.js-Datei auf der Seite zu laden. Welche verursacht einen Fehler als ui-grid.js intern verwendet angular Objektmodul zu erstellen, Komponenten, usw.

Sie haben Recht <script th:src="@{/js/ui-grid.min.js}"></script>-Datei zu laden, nachdem angular.js Datei geladen wurde. Bewegen Sie einfach /js/ui-grid.min.js Skript-Referenz unter anglar.js Skript-Referenz

Quelle

2017-03-20 03:38:03

Vielen Dank für Ihre Antwort. Löse es einfach –

Die seltsamen Probleme mit ui-Grid V4.0.2

Antwort

Verwandte Themen