Странные проблемы с ui-grid V4.0.2

Это пример, который я скопировал с http://ui-grid.info/ и использую шаблон thymeleaf при ссылке на локальный файл (ui-grid.min.js & ui-grid.min.css, эти два файла загружаются с пользовательского интерфейса). -grid.info), консоль браузера (chrome 57.0.2987.98) выдаст ошибку:

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

но когда я связываю 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>

Браузер Успешный просмотр.

вот демонстрационный код:

<!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>
Источник

1 ответ

Решение

В настоящее время вы пытаетесь загрузить ui-grid.min.js перед загрузкой angular.js файл на странице. Что вызывает ошибку как ui-grid.js внутренне использует angular объект для создания модуля, компонентов и т. д.

Вы должны загрузить <script th:src="@{/js/ui-grid.min.js}"></script> файл сразу после angular.js файл загружен. Просто двигайся /js/ui-grid.min.js ссылка на скрипт ниже anglar.js ссылка на скрипт

Источник
Другие вопросы по тегам