Question

我有一个空白页面，我尝试在angularjs中学习Angular。

我在控制台中没有错误，只是一个空白页

        <!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();

});

请问这个空白页的原因是什么？

提前致谢

Answer 1

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

Answer 2

首先导入角度模块，它缺少附加
controller（autoCtrl）指向您需要的特定元素。

空白页angularjs

2 个答案: