ui-grid V4.0.2的奇怪问题

Question

这是我从 http://ui-grid.info/ 复制并使用 thymeleaf 模板的示例当我 link 本地文件(ui-grid.min.js & ui-grid.min.css, 这两个文件从 ui-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

但是当我 link 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>

Answer 1

当前您正在尝试在页面上加载 angular.js 文件之前加载 ui-grid.min.js。这是导致错误的原因，因为 ui-grid.js 在内部使用 angular 对象来创建模块、组件等。

您必须在加载 angular.js 文件后立即加载 <script th:src="@{/js/ui-grid.min.js}"></script> 文件。只需将 /js/ui-grid.min.js 脚本参考向下移动到 anglar.js 脚本参考

下方

ui-grid V4.0.2的奇怪问题

The strange problems with ui-grid V4.0.2

angularjs

ui-grid