ui-gridの奇妙な問題

これはhttp://ui-grid.info/からコピーした例で、ローカルファイル（ui-grid.min.js & ui-grid.min.css、これをリンクすると）を使用します。二つのファイル）ui-grid.infoからダウンロードし、ブラウザ（クローム57.0.2987.98）コンソール意志エラースロー：ui-gridの奇妙な問題

<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>

ブラウザ成功プレビュー：私は、CDNをリンクする際

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

をけど。ここ

は、デモコードです：

<!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>

出典

2017-03-20 A_Wen

現在は、ページ上のangular.jsファイルをロードする前ui-grid.min.jsロードしようとしています。 ui-grid.jsが内部などのモジュール、コンポーネント、あなたがangular.jsファイルがロードされてしまった直後<script th:src="@{/js/ui-grid.min.js}"></script>ファイルをロードする必要が

を作成するangularオブジェクトを使用して、エラーの原因となっています。ちょうど/js/ui-grid.min.jsスクリプトリファレンスを下に移動anglar.jsスクリプトリファレンス

出典

2017-03-20 03:38:03

ありがとうございます。ちょうどそれを解決する –

答えて

関連する問題