2016-07-14 13 views
0

Ich habe eine leere Seite mit dieser kleinen Probe, die ich in angularjs machen möchte, um Angular zu lernen.Leere Seite angularjs

Ich habe keine Fehler in der Konsole, nur eine leere Seite

 <!DOCTYPE html> 
<html lang="fr"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Parc Automobile</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
     <link rel="stylesheet" href="style.css" media="screen" charset="utf-8"> 
     <script src="app/app.js"/> 
    </head> 
    <body ng-app="parcAutoApp" ng-controller="autoCtrl"> 
     <div class="container-fluid"> 
      <div class="row section"> 
       <div class="col-md-4 col-md-offset-4"> 
        <form> 
         <div class="form-group"> 
          <label for="no_vehicule">N° du véhicule</label> 
          <input type="text" class="form-control" id="no_vehicule" placeholder="N° du véhicule" ng-model="vehicule.no"> 
         </div> 
         <div class="form-group"> 
          <label for="marque_vehicule">Marque du véhicule</label> 
          <input type="text" class="form-control" id="marque_vehicule" placeholder="Marque du véhicule" ng-model="vehicule.marque"> 
         </div> 
         <div class="form-group"> 
          <label for="modele_vehicule">Modèle du véhicule</label> 
          <input type="text" class="form-control" id="modele_vehicule" placeholder="Modèle du véhicule" ng-model="vehicule.modele"> 
         </div> 
         <div class="form-group"> 
          <label for="immat_vehicule">Immatriculation du véhicule</label> 
          <input type="text" class="form-control" id="immat_vehicule" placeholder="Immatriculation du véhicule" ng-model="vehicule.immat"> 
         </div> 
         <div class="form-group"> 
          <label for="km_vehicule">Kilométrage du véhicule</label> 
          <div class="input-group"> 
           <input type="text" class="form-control" id="km_vehicule" placeholder="Kilométrage du véhicule" ng-model="vehicule.kms"> 
           <div class="input-group-addon">km</div> 
          </div> 
         </div> 
         <button type="submit" class="btn btn-primary" ng-click="addAuto(vehicule)">Ajouter un véhicule</button> 
        </form> 
       </div> 
      </div> 
      <div class="row section"> 
       <div class="col-md-4 col-md-offset-4"> 
        <div class="table-responsive"> 
         <table class="table table-hover"> 
          <thead> 
           <tr> 
            <th>Numéro</th> 
            <th>Marque</th> 
            <th>Modèle</th> 
            <th>Immatriculation</th> 
            <th>Kilométrage</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="vehicule in vehicules"> 
            <td>{{ vehicule.no }}</td> 
            <td>{{ vehicule.marque }}</td> 
            <td>{{ vehicule.modele }}</td> 
            <td>{{ vehicule.immat }}</td> 
            <td>{{ vehicule.kms }}</td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

angular.module('parcAutoApp', []); 
.factory('vehiculesFactory', [function() { 
return { 
    vehicules: [], 
    addToVehicules: function(vehicule) { 
     this.vehicules.push(vehicule); 
    }, 
    getVehicules: function() { 
     return this.vehicules; 
    }, 
    getNbVehicules: function() { 
     return this.vehicules.length; 
    }, 
}; 
}]) 

.controller('autoCtrl', function($scope, vehiculesFactory) { 
$scope.addAuto = function(vehicule) { 
    vehiculesFactory.addToVehicules(vehicule); 
}; 

$scope.vehicules = vehiculesFactory.getVehicules(); 

}); 

Was bitte die Ursache dieser BLANKPAGE sein kann?

im Voraus Dank

+0

Sie nicht Winkel Skript überall – Karim

+0

Import ist es nicht in meinem Beispiel, aber ich bin, und immer noch, ich habe einen leeren Seite –

+0

Versuchen von jquery.js Swapping und Angularjs Bibliotheken in Header. Selbst wenn Sie eine leere Seite öffnen, sehen Sie, ob Sie Fehler bekommen. – NNR

Antwort

0
<div class="container-fluid" ng-controller="autoCtrl"> 
... 
</div > 
+0

Ich habe meinen Code aktualisiert, aber ich habe immer noch die leere Seite –

+0

Einschließlich Controller ist notwendig, aber ist Vehicules: [] leer? wenn ja, fügen Sie einige Daten dazu hinzu – npr

+2

Obwohl dieser Code Hilfe sein kann, um das Problem zu lösen, liefert zusätzliche Kontext in Bezug auf _why_ und/oder _how_ es Antworten würde die Frage deutlich verbessern langfristigen Wert. Bitte [bearbeiten] Sie Ihre Antwort, um eine Erläuterung zu hinzuzufügen. –

0
  1. Ersteinfuhr die Winkelmodul ist es fehlt die
  2. Controller (AUTOCTRL) auf das spezifische Element anbringen, wo Sie es brauchen.
+0

Ich habe es den Controller hinzugefügt, aber immer noch leer .. –