路由在角度下不起作用.js - 没有控制台或语法错误

Routing not working in angular.js - No console or syntax errors

本文关键字：控制台 错误 语法 js 不起作用 路由      更新时间：2023-09-26

我无法理解为什么路由不起作用。我已经检查了很多次语法错误或拼写错误，但情况似乎并非如此。我还检查了控制台，它没有返回任何内容。似乎没有任何问题。

var app = angular.module("myApp", ['ngRoute']);
// Main Controller	
app.controller("controller", function($scope) {
  $scope.search = {};
});
// Routing
app.config(function($routeProvider) {
  console.log("working");
  $routeProvider.when('/', {
    controller: "controller",
    templateUrl: "templates/listings.html"
  }).when('/login', {
    controller: "controller",
    templateUrl: "templates/login.html"
  })
});
<html ng-app="myApp">
<head>
  <title>logo</title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <!-- ANGULAR FILES -->
  <!-- Angular.js -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
  <!-- ngRoute Script -->
  <script type="text/javascript" src="js/angular-route.js"></script>
  <!-- Route -->
  <script type="text/javascript" src="routes/route.js"></script>
  <!-- Angular App  -->
  <script type="text/javascript" src="app.js"></script>
  <!-- Json Data -->
  <script type="text/javascript" src="data.js"></script>
  <!-- ======================================================================->
	<!-- Index CSS ( Mainly All The CSS) -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- Login CSS -->
  <link rel="stylesheet" type="text/css" href="css/login.css">

  <!-- Montserrat -->
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <!-- Open Sans -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <!-- neutron -->
  <link href='https://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>
  <!-- Lato -->
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="controller">
  <div class="wrapper">
    <div ng-include="'includes/navbar.html'"></div>
    <!-- NG VIEW -->
    <div ng-view></div>
    <div class="footer">
      <!-- footer content goes here -->
    </div>
  </div>
</body>
</html>

你的代码似乎是正确的。目前，您只是加载页面，而URL没有任何变化，因此角度路由器不执行任何操作。

基本上，您需要通过.otherwise到您的$routeProvider来添加默认路由/这将重定向到默认页面。

$routeProvider.when('/', {
    controller: "controller",
    templateUrl: "templates/listings.html"
})
.when('/login', {
    controller: "controller",
    templateUrl: "templates/login.html"
})
.otherwise({
    redirectTo: '/'
});

确保你有相同版本的angularjs和angular-route

工作小提琴 感谢@Denis创建小提琴。

相关文章：