AngularJS路由没有'不起作用

AngularJS Route doesn't work

本文关键字：不起作用路由 AngularJS 更新时间：2023-09-26

我从AngularJS开始，但我的路由不起作用。我在谷歌上搜索了一下，尝试了一些解决方案，但什么都不起作用。

我的index.html（public/index.html）

<!doctype html>
 <html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
       <script src="../node_modules/angular/angular.min.js"></script>
       <script type="text/javascript" src="javascript/app.js"></script>
       <script type="text/javascript"     src="javascript/controllers/VehiculeCtrl.js"></script>
        <script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
  </head>
  <body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Projet Web</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!--<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>-->
        <li><a href="#vehicules">Véhicules</a></li>
        <li><a href="" ng-click="">Agences</a></li>
        <li><a href="" ng-click="">Agents</a></li>
        <li><a href="" ng-click="">Statut</a></li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
        </form>
       </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <!-- div pour les templates-->
   <div ng-view>
   </div>
  </body>
</html>

我的app.js（javascript/app.js）:

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
  $routeProvider
    // route for the home page
    .when('/', {
        templateUrl : '../views/index.html',
        controller  : 'VehiculeCtrl'
    })
    // route for the about page
    .when('/vehicules', {
        templateUrl : '../views/vehicules.html',
        controller  : 'VehiculeCtrl'
    })
    // route for the about page
    .when('/agents', {
        templateUrl : '../views/vehicules.html',
        controller  : 'AgentsCtrl'
    })
                // route for the about page
    .when('/agences', {
        templateUrl : '../views/vehicules.html',
        controller  : 'AgencesCtrl'
    })
                // route for the about page
    .when('/status', {
        templateUrl : '../views/vehicules.html',
        controller  : 'StatusCtrl'
    })
    .otherwise({redirectTo: '/'});
});

我的控制器（controllers/Vehicles Ctrl.js）：

var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet) {    
    $scope.text = 'Salut ! je teste le controleur';
    var url = '127.0.0.1:3000/vehicules';
    //console.log("curieux", VehiculesGet);
    var res = VehiculesGet.getAllVehicules(url, function(data, status){
        console.log("test",status);
        console.log("test",data);
        $scope.result = data;
    });
});
// GET ALL VEHICULE
myApp.factory('VehiculesGet', [ '$http', function($http) {
    //var url = 'http://127.0.0.1:3000/vehicules';
    var result;
    var data;
    return {
        getAllVehicules: function(url, callback) {
            $http.get('http://127.0.0.1:3000/vehicules')
            .success(function (data, status) {
            // données récupérées avec succès
                callback(data, status);
            }).error(function(data,status){
                callback(data, status);
            });
        }
    };
 }]);

我的树：

公众
- javascript
  - 控制器
  - 车辆Ctrl.js
  - app.js
- 视图
- index.html

请帮帮我：）。。。。。。对不起我的英语感谢

我认为你应该添加

<body ng-controller="VehiculeCtrl">

到您的控制器并删除

var myApp = angular.module('myApp', ['ngRoute']);

从您的控制器。

然后像一样从app.js导出控制器

myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet)

尝试在角度后加载角度路线，而不是在控制器后加载，这应该可以工作

 <head>
    <meta charset="UTF-8">
       <script src="../node_modules/angular/angular.min.js"></script>
       <script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
       <script type="text/javascript" src="javascript/app.js"></script>
       <script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
  </head>

标记中缺少ng视图元素。这是路由功能放置templateUrl内容的位置。有关文档，请参阅此链接：https://docs.angularjs.org/api/ngRoute/directive/ngView

您应该从VehiculesCtrl.js中删除var myApp = angular.module('myApp', ['ngRoute'])。在VehiculesCotrl.js中，您应该使用在app.js 中声明的myApp变量