Fatal编程技术网
  • angularjs/
  • Angularjs 角度简单布线不起作用

Angularjs 角度简单布线不起作用

angularjs spring-boot

Angularjs 角度简单布线不起作用,angularjs,spring-boot,thymeleaf,Angularjs,Spring Boot,Thymeleaf,我正在尝试构建单页应用程序，但我有角度路由问题，它不工作 我使用的是spring boot、thymeleaf和angular 1.4.8 我是以这个例子为基础的 这是我的主控制器： @Controller public class HomeController { @RequestMapping(value = "/") public String index(){ return "index"; } } 这是我的index.html <!DOC

我正在尝试构建单页应用程序，但我有角度路由问题，它不工作

我使用的是spring boot、thymeleaf和angular 1.4.8

我是以这个例子为基础的

这是我的主控制器：

@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>
以及我希望传递给ng view的内容

test.html

<div>
    Hello
</div>


你好
加载一切正常，但路由在这里不起作用。

您将test.html放在哪里。它应该位于/resources/static文件夹中。如果在/resources/templates中，它将由thymeleaf处理，需要添加到
ViewControllerRegistry

public class WebConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/test").setViewName("test");
    }
}
首先，请将应用程序指令放置在
或
标签上

<body ng-app="ngViewExample">
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);
 }
}
你昨天把这个问题和我联系起来：

这是我迄今为止的答案

让我们从如何通过Spring Boot提供静态内容开始

如目录中的所有资源所示

  • /META-INF/资源/
  • /资源/
  • /静止的/
  • /公开的/
在类路径中添加静态资源。例如，只需将index.html放入类路径中的/public/目录，您就不再需要
HomeController

现在转到角度部分

首先，将ng app指令置于
或
标记处。 到目前为止，我看不出你的角度代码有任何问题。您能否验证部分HTML在/test端点处是否可用？如果没有，请按照我上面告诉你的步骤操作。只需将test.html放在类路径中的
/public/
目录中

如果打开浏览器devtools并重新加载页面，控制台中是否有错误

如果你能在Github上提供你的项目，我会看一看

我正在尝试访问引用我已添加此
@Bean public WebMVCConfigureAdapter forwardToIndex（）{返回新的WebMVCConfigureAdapter（）{@Override public void addViewController（ViewControllerRegistry注册表）{registry.addViewController（“/test”）.setViewName（“test”）；}}；}
当我通过
localhost:8080/test访问我的配置文件时，
Hello
显示，但仍然从index.html路由不起作用。是否看到javascript syntact错误。我认为
。当
需要一个
templateUrl:'test.html'
应该是
templateUrl:'test'
我已经将templateUrl:'test.html'设置为templateUrl:'test'，但它仍然不起作用，你知道哪里出了问题吗？html文件应该在/templates目录中，/static目录是用于js的，谢谢你回答我的问题是，ng应用程序位于未映射位置，templateUrl错误。应为templateUrl:“test”我有templateUrl:“test.html”。非常感谢您的回答和圣诞快乐：）很高兴听到它能工作，但我仍然不建议通过自定义控制器提供静态内容。使用SpringBoot:）如果这样做，那么您以前的url是正确的。如果你有理由使用自定义控制器，我现在不想听到。圣诞快乐：）我认为自定义控制器在安全方面是有用的，但你是对的，我应该使用spring boot，因为它应该被使用：）如果我把我的文件放在/public/test.html角路由模板URL中：“test.html”是可以的，如果我使用/templates目录并注册查看角度路由模板URL:“test”是确定的如果您不想提供没有身份验证的模板，请将其放入目录/public/templates/并为/templates制定安全规则/**

@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter {
  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/test").setViewName("test");  
  }
}



@SpringBootApplication
@ComponentScan(basePackages = {"com.example.spring"})
public class SpringAngularApplication {

   public static void main(String[] args) {
     SpringApplication.run(SpringAngularApplication.class, args);
 }
}