javascript - 路由在 angular.js 中不起作用 - 没有控制台或语法错误

标签 javascript angularjs module dependencies

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

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 进行任何更改,因此 Angular 路由器不会执行任何操作。

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

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

Make sure you have same version of angularjs & angular-route

Working Fiddle感谢@Denis 创建 Fiddle。

关于javascript - 路由在 angular.js 中不起作用 - 没有控制台或语法错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35087851/

相关文章:

sql-server - 在模块 '' 中找到 '' 命令,但无法加载该模块

javascript - 我可以在 chrome 扩展中使用 puppeteer

javascript - 获取日期范围内的纪元时间戳列表?

javascript - 来自文件 JQuery/javascript 的警报文本

angularjs - 将 Webpack 与 Karma 一起使用会导致 Node 模块加载错误

angular - 为什么 Angular 2 将模块命名为 NgModule 而不仅仅是 Module

javascript - Google API 项目的小问题

javascript - 如何在不刷新网页的情况下显示数据库中保存的输入值?

css - 在 Bootstrap 中设置最大行数

python - 突然 .py 文件无法导入模块,但仍然可以使用 CMD