角度简单路由不起作用
Posted
技术标签:
【中文标题】角度简单路由不起作用【英文标题】：Angular simple routing is not working 【发布时间】：2016-03-26 00:54:22 【问题描述】：我正在尝试构建单页应用程序，但我遇到了角度路由问题，它不起作用。
我正在使用 spring boot、thymeleaf 和 angular 1.4.8。
我基于这个例子https://code.angularjs.org/1.4.8/docs/api/ngRoute/directive/ngView
这是我的主控制器：
@Controller
public class HomeController
@RequestMapping(value = "/")
public String index()
return "index";
这是我的 index.html
<!DOCTYPE html>
<html>
<head ng-app="ngViewExample">
<title></title>
</head>
<body>
<div ng-controller="MainCtrl as main">
<a href="#/test">test</a>
<div ng-view=""></div>
</div>
<script type="text/javascript" th:src="@/js/lib/angular.js" />
<script type="text/javascript" th:src="@/js/lib/angular-route.js" />
<script type="text/javascript" th:src="@/js/lib/angular-resource.js" />
<script type="text/javascript" th:src="@/js/lib/underscore.js" />
<script type="text/javascript" th:src="@/js/lib/restangular.js" />
<script type="text/javascript" th:src="@/js/src/index.js" />
</body>
</html>
index.js
var home = angular.module('ngViewExample', ['ngRoute']);
home.config(['$routeProvider',
function ($routeProvider)
$routeProvider
.when('/test',
templateUrl: 'test.html',
controller: 'TestCtrl',
controllerAs: 'test'
)
])
.controller('MainCtrl',
function()
)
.controller('TestCtrl',
function()
);
以及我希望传递给 ng-view 的内容
test.html
<div>
Hello
</div>
一切正常，但路由在这里不起作用。
【问题讨论】：
我正在尝试访问localhost:8080/#/test 参考github.com/spring-guides/tut-spring-security-and-angular-js/… 【参考方案1】：你昨天把这个问题联系了我：
这是我目前的答案
让我们从如何通过 Spring Boot 提供静态内容开始
如图this spring blog所有资源放在目录中
/META-INF/resources/ /资源/ /静态/ /公共/在您的类路径中添加为静态资源。因此，例如，只需将您的 index.html 放入您的类路径中的 /public/ 目录中，您就不需要您的 HomeControlleranymore
现在到角度部分
首先将 ng-app 指令放在 <html> 或 <body> 标记处。
到目前为止，我看不到您的角度代码有任何问题。您能否验证部分 HTML 在 /test 端点可用？如果没有，请按照我上面告诉你的步骤操作。只需将 test.html 放在类路径中的 /public/directory 中即可。
如果你打开浏览器的devtools并重新加载页面，控制台是否有任何错误？
如果你能在 Github 上提供你的项目，我会看看。
【讨论】：
感谢您回答我的问题，ng-app 位于不合适的位置，并且 templateUrl 错误应该是 templateUrl：'test' 我有 templateUrl：'test.html'。非常感谢您的回答和圣诞快乐:) 很高兴听到它有效，但我仍然不建议通过自定义控制器提供静态内容。使用 spring boot :) 如果你这样做，你以前的 url 是正确的。如果您有理由使用自定义控制器，我现在不想听。圣诞快乐:) 我认为自定义控制器在安全方面可能很有用，但你是对的，我应该使用 spring boot，因为它应该被使用:) 如果我把我的文件放在 /public/test.html angular routing templateUrl : 'test.html' 可以，如果我使用 /templates 目录并注册 View angular routing templateUrl: 'test' 就可以了 如果您不想提供未经身份验证的模板，请将其放在目录 /public/templates/ 并为 /templates/** 制定安全规则【参考方案2】：首先，请将ng-app指令放置<body>或<html>标签
<body ng-app="ngViewExample">
模板网址
templateUrl: 'test'
MvcConfig.java
@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter
@Override
public void addViewControllers(ViewControllerRegistry registry)
registry.addViewController("/test").setViewName("test");
SpringBootApp
@SpringBootApplication
@ComponentScan(basePackages = "com.example.spring")
public class SpringAngularApplication
public static void main(String[] args)
SpringApplication.run(SpringAngularApplication.class, args);
【讨论】：
【参考方案3】：你把 test.html 放在哪里。它应该在 /resources/static 文件夹中。如果在 /resources/templates 中会被 thymeleaf 处理，需要添加到ViewControllerRegistry
public class WebConfig extends WebMvcConfigurerAdapter
@Override
public void addViewControllers(ViewControllerRegistry registry)
registry.addViewController("/test").setViewName("test");
【讨论】：
当我通过localhost:8080/test 访问它时，我已将这个@Bean public WebMvcConfigurerAdapter forwardToIndex() return new WebMvcConfigurerAdapter() @Override public void addViewControllers(ViewControllerRegistry registry) registry.addViewController("/test").setViewName("test"); ; 添加到我的配置文件中，出现Hello 但仍然无法从index.html 路由
您是否看到 javascript 语法错误。我认为.when 需要一个;
templateUrl: 'test.html' 应该是templateUrl: 'test'
我已将 templateUrl: 'test.html' 设置为 templateUrl: 'test' 仍然无法正常工作，您知道那里可能出了什么问题吗？
html文件应该在/templates目录，/static目录是js，css以上是关于角度简单路由不起作用的主要内容，如果未能解决你的问题，请参考以下文章
当在浏览器中直接访问 URL 但单击到时，角度路由不起作用？