Question

这是我从http://ui-grid.info/复制并使用百日咳模板的示例当我链接本地文件（ui-grid.min.js＆amp; 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

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

目前，您正在尝试在页面上加载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脚本参考

ui-grid V4.0.2的奇怪问题

1 个答案: