我无法理解为什么路由不起作用。 我已经检查了很多次语法错误或拼写错误,但情况似乎并非如此。我还检查了控制台,它什么也没返回。看起来没有任何问题。
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: '/'
});
block 引用>Make sure you have same version of angularjs & angular-route
Working Fiddle感谢@Denis 创建 Fiddle。
关于javascript - 路由在 angular.js 中不起作用 - 没有控制台或语法错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35087851/