Pourquoi mon interface utilisateur grille ne peut pas charger la grille

Here is my runnable plunker Pourquoi mon interface utilisateur grille ne peut pas charger la grille

J'ai suivi le tutoriel en UI Grid official tutorial. Je ne sais pas pourquoi je ne peux pas charger la grille. Je n'ai trouvé aucune erreur de syntaxe.

Voici une partie des erreurs de la console:

URL visité/ rédacteur 1.2.0.js: 2 URL vues/p = catalogue emmet.js Impossible de charger la ressource: le serveur a répondu avec un statut de 404 (introuvable) editor-1.2.0.js: 7 AUTH Objet editor-1.2.0.js: 2 Événement suivi Plunk Beautify Toolbar undefined undefined editor-1.2.0.js: 2 Événement suivi Plunk Save Barre d'outils undefined undefined editor-1.2.0.js: 2 URL visitée/oXEt5IfdrpkkPSxysncy? P = catalogue editor-1.2.0.js: 2 Événement suivi Multipane Show Previ ew Barre d'outils undefined undefined editor-1.2.0.js: 2 URL visitée/oXEt5IfdrpkkPSxysncy? p = aperçu run.plnkr.co/:1 Contenu mixte: La page 'https://plnkr.co/edit/oXEt5IfdrpkkPSxysncy?p=preview' a été chargée via HTTPS, mais a demandé un script non sécurisé 'http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js'. Cette requête a été bloquée. le contenu doit être servi via HTTPS.

<!DOCTYPE html> 
<html ng-app="app"> 

<head> 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
</head> 

<body> 
    <h1>Hello Plunker!</h1> 

    <div ng-controller="MainCtrl"> 
     <div ui-grid="{ data: myData }" class="myGrid"></div> 
    </div> 

    <script> 
     var app = angular.module('app', ['ui.grid']); 
     app.controller('MainCtrl', ['$scope', function($scope) { 
      $scope.myData = [{ 
        "firstName": "Cox", 
        "lastName": "Carney", 
        "company": "Enoromo", 
        "employed": true 
       }, { 
        "firstName": "Lorraine", 
        "lastName": "Wise", 
        "company": "Comveyer", 
        "employed": false 
       }, { 
        "firstName": "Nancy", 
        "lastName": "Waters", 
        "company": "Fuelton", 
        "employed": false 
       } 
      ]; 
     }]) 
    </script> 

    <style> 
     .myGrid { 
      width: 500 px; 
      height: 250 px; 
     } 
    </style> 
</body> 

</html>

Source

2017-07-08 EntryLeveDeveloper

Votre cdn pour grille-ui n'a pas été correcte. Et tout votre src devrait pointer vers une url sécurisée avec https. La raison en est que vous essayez d'accéder à un script non sécurisé à partir d'un site sécurisé. Ce sera bloqué puisque le contenu peut être servi uniquement sur HTTPS.

<head> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.css" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.js"></script> 
    </head>

travail Plunkr: https://plnkr.co/edit/I87wgFzlqmtl6dcPem6F?p=preview

Source

2017-07-08 18:40:12 Vivz

Mais, vous pouvez le vérifier plunker officiel, ne pas utiliser https, etc http://plnkr.co/edit/?p=preview – EntryLeveDeveloper

https: //plnkr.co/edit/?p=catalogue. Vérifiez à nouveau le plunker officiel, alors que vous ajoutez des paakages populaires, il pointe sur https plutôt que sur un serveur http non sécurisé. – Vivz

Et si vous parlez de script.js et de style.css, c'est parce que c'est la même structure de plunkr, donc ils n'ont pas besoin d'utiliser https, ils peuvent directement le référencer. – Vivz

Pourquoi mon interface utilisateur grille ne peut pas charger la grille

Répondre

Questions connexes