AngularJS路由不起作用

我是AngularJS的新手，我目前正在构建一个小应用。我想我的网址就像这个/ index（没有.html）。我尝试过使用NgRoute，但似乎没有成功。当我去/建立，它说路线不存在。这里是我的代码：AngularJS路由不起作用

app.js

var app = angular.module('khApp', ['ngRoute','establishmentModule', 'queryModule', 'buildingBlockModule', 'categoryModule']); 
app.config(['$routeProvider', function($routeProvider) 
{ 
    $routeProvider 
    .when('establishments', {controller:'testController', templateUrl: '../html/establishments.html'}) 

}]); 

app.controller('testController', ['$http', function($http) 
{ 


}]);

的index.html

<div ng-controller="testController as test" class="container"> 
     hi 
     <a href="establishments"> 
      <button class="btn btn-default">Start</button> 
     </a> 
    </div> 

    <ng-view></ng-view> 

<script type="text/javascript" src="../../bower_components/angular/angular.js"></script> 
<script type="text/javascript" src="../../bower_components/angular-route/angular-route.js"></script> 
<script type="text/javascript" src="../js/app.js"></script> 
<script type="text/javascript" src="../js/buildingblock.js"></script> 
<script type="text/javascript" src="../js/category.js"></script> 
<script type="text/javascript" src="../js/establishment.js"></script> 
<script type="text/javascript" src="../js/query.js"></script> 


</body> 
</html>

我到底做错了什么？提前致谢！

来源

2015-09-18 henktenk

你在浏览器中输入网址是什么？请填写完整的网址（虽然你可以省略实际的主机名） – mason

@mason http：// localhost：port/application/app/html/establishments – henktenk

@henktenk我想你可能会误解一点关于angular是如何设计的，特别是角路由器如何工作。如果你愿意，我们可以开始聊天，我可以给你一些指示，或者你可以在一般的JavaScript聊天中找到我最多的日子。 – Claies

根据您的路由器是如何配置的，通常你需要的目标，象这样一个斜线开始的路线：

app.config(['$routeProvider', 
    function($routeProvider) { 
     $routeProvider 
      .when('establishments', { 
       controller:'testController', 
       templateUrl: '../html/establishments.html' 
      }); 
}]);

此外，在你的HTML，我想你的HTML锚标签需要开始与散列导航像这样：

<a href="#/establishments"> 
    <button class="btn btn-default">Start</button> 
</a>

参考：AngularJS Documentation Tutorial 7 - Routing & Multiple Views

来源

2015-09-18 15:15:50 War10ck

该解决方案可以工作，但会将establish.html加载到index.html中。我的目标是路由加载一个新的页面，在这种情况下是establish.html。 – henktenk

在这种情况下，我认为你所需要做的就是在你的锚标签中加入'establishments.html'作为你的'href'。路由器旨在用于单页应用程序（Spa）开发风格。在这种情况下，当页面导航时，所有以前的JS处理都将丢失。您还需要在'establishments.html'页面中包含代码的相关部分。使用路由器在两个完全不同的页面之间导航将毫无意义。 – War10ck

哦，谢谢，这太糟糕了。但是，如何在浏览不同页面时完成漂亮的URL，例如公司/企业加载establishments.html？ – henktenk

AngularJS击溃ing使用片段标识符（URL中的#）获取其路由。这是因为它不能在不导致浏览器请求新页面的情况下操纵完整的URL，从而使其不是SPA。

所以你需要请求的URL应该是<path to root>#/establishments的形式。假设index.html是/application/app/html，这个请求的URL将是：

/application/app/html/index.html#/establishments

如果也想要支持的URL localhost:port/application/app/html/establishments，那么你需要配置你的服务器端的路由进行重定向到/application/app/html/index.html#/establishments。

来源

2015-09-18 15:30:02 mason

＃/场所是你在你的锚标记需要什么

<a href="#/establishments"> 
<button class="btn btn-default">Start</button> 
</a>

你的路线将是这样的：

app.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider 
     .when('establishments', { 
      controller:'testController', 
      templateUrl: '../html/establishments.html' 
     }); 
}]);

来源

2015-09-18 15:48:07

AngularJS路由不起作用

回答

相关问题