简体   繁体   English

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

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

I am unable to understand why the routing isn't working. 我无法理解为什么路由不起作用。 I've checked many times for syntax errors or misspelling but that doesn't seem to be the case. 我已经检查了很多次语法错误或拼写错误,但事实并非如此。 I also checked the console and it returns nothing. 我还检查了控制台,它什么也没返回。 Doesn't appear to be any issues. 似乎没有任何问题。

 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> 

Your code seems correct. 您的代码似乎正确。 Currently you are just loading the page, without any change in the URL, so the angular router doesn't do anything. 当前,您只是在加载页面,而没有对URL进行任何更改,因此角度路由器不会执行任何操作。

Basically you need to add default route by having .otherwise to your $routeProvider which will redirect to / default page. 基本上,您需要通过将.otherwise添加到$routeProvider来添加默认路由,该$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 确保您具有相同版本的angularjs和angular-route

Working Fiddle Thanks to @Denis for creating Fiddle. 工作小提琴感谢@Denis创建小提琴。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM