AngularJS 路由不工作

Question

我从 AngularJS 开始，但我的路线不起作用。我在 google 中搜索并尝试找到一些解决方案，但没有任何效果。

我的 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/VehiculesCtrl.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);
            });
        }
    };
 }]);

我的树：

public
- javascripts
  - 控制器
  - VehiculesCtrl.js
  - app.js
- 观看次数
- index.html

请帮助我 :) ......对不起我的英语 x) 谢谢

Answer 1

尝试在 angular 之后加载 angular-route，而不是在你的控制器之后，这应该可以工作

 <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>

Answer 2

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

中声明的 myApp 变量

Answer 3

您的标记中缺少 ng-view 元素。这是路由功能放置 templateUrl 内容的地方。请参阅此 link 以获取文档：https://docs.angularjs.org/api/ngRoute/directive/ngView

Answer 4

我认为你应该添加

<body ng-controller="VehiculeCtrl">

到您的控制器并删除

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

来自您的控制器。

然后从 app.js 导出你的控制器 like

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

AngularJS 路由不工作

AngularJS Route doesn't work

javascript

html

angularjs

routes

angularjs-ng-route