用户界面奇怪的问题V4.0.2

这是我从http://ui-grid.info/复制的示例，并使用thymeleaf模板当我链接本地文件（ui-grid.min.js & ui-grid.min.css，this两个文件从ui-grid.info下载），浏览器（Chrome 57.0.2987.98）控制台将抛出错误：用户界面奇怪的问题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

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

来源

2017-03-20 A_Wen

目前你正在尝试在网页加载angular.js文件之前加载ui-grid.min.js。为ui-grid.js内部使用angular对象创建模块，组件等

你必须加载<script th:src="@{/js/ui-grid.min.js}"></script>文件angular.js文件加载得到了之后，这是造成错误。只需将/js/ui-grid.min.js脚本参考向下移动anglar.js脚本参考

来源

2017-03-20 03:38:03

谢谢您的回复。只是解决它 –

用户界面奇怪的问题V4.0.2

回答

相关问题