角度简单路由不起作用答案

【问题标题】：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/…

标签： angularjs spring-boot thymeleaf

【解决方案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