Question

我在我的一个学习项目中面临着实现角度路由的问题，我正在尝试为学习目的创建一个非常简单的项目，似乎我在初始阶段陷入困境，请指导我正在做什么这里错了，下面是我在我的项目中使用的各个元素，index.html是主页，它运行良好，但不知怎的，我无法实现路由。

我的目标：我想创建单页面应用程序，所以我想要view1，view2应该只在index.html上结束，为此我在index.html中使用了<div data-ng-view=""></div>。

注意：我没有共享弹簧元素（类，maven pom等等），因为我觉得spring boot工作正常我在angularJS方面做错了。

任何帮助都会非常明显:)

app.js

appDemo.controller("view1controller",function($scope){ });

appDemo.controller("view2controller",function($scope){ });

appDemo.config(['$routeProvider',function($routeProvider) {$routeProvider.
                    when('/demo/view1', {templateUrl: 'view1.html',controller: 'view1controller'}).
                    when('/demo/view2', {templateUrl: 'view2.html',controller: 'view2controller'}).
                    otherwise({redirectTo: '/demo/view1'});
}]);

的index.html

    <!DOCTYPE html>
    <html data-ng-app="demoApp">
    <head>
    <meta charset="ISO-8859-1">
    <title>demo</title>
    <script src="https://code.angularjs.org/1.2.20/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.2.20/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.2.20/angular-route.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </head>
    <body>

<div class="form-group">
<div data-ng-controller="view1controller"><a href="/demo/view1">get view1</a></div>
<div data-ng-controller="view1controller" ><a href="/demo/view2">get view2</a></div>
<div data-ng-view=""></div>
</div>


</body>
</html>

HomeController.java

@Controller
public class HomeController {

        private static final Logger logger = LoggerFactory.getLogger(HomeController.class);    

        @RequestMapping(value = "/", method = RequestMethod.GET)
        public String greeting(Map<String, Object> model) {

            return "index";
        }
    }

view1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>VIEW1</h1>
</body>
</html>

view2.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <h1>VIEW1</h1>
    </body>
    </html>

Answer 1

Routes.java

@Controller
    static class Routes {

        @RequestMapping({
            "/bikes",
            "/milages",
            "/gallery",
            "/tracks",
            "/tracks/{id:\\w+}",
            "/location",
            "/about"
        })
        public String index() {
            return "forward:/index.html";
        }

JS

.config(
                function($routeProvider, $locationProvider) {
                    $locationProvider.html5Mode(true);

                    $routeProvider.
                            when('/', {
                                templateUrl: '/partials/_index.html',
                                controller: 'IndexCtrl'
                            }).
                            when('/bikes', {
                                templateUrl: '/partials/_bikes.html',
                                controller: 'BikesCtrl'
                            }).
                            when('/milages', {
                                templateUrl: '/partials/_milages.html',
                                controller: 'MilagesCtrl'
                            }).
                            otherwise({
                                redirectTo: '/'
                            });
                }

这是一个很好的链接路由示例 http://info.michael-simons.eu/2014/04/15/spring-boot-as-a-backend-for-angularjs/

Answer 2

在使用Spring Boot和Angularjs之前，我遇到了类似的问题。

所以，如果您点击代码，就会得到代码：<a href="/demo/view1">get view1</a>，并且网络浏览器上的网址会显示http://localhost:8080/#!/demo/view1/ 注意 /＃！/ 表示您位于（HTML5模式下的Hashbang）或仅（Hashbang模式）。 AngularJS ngRoute 路由以三种模式运行：

Hashbang Mode
HTML5模式
HTML5中的Hashbang

这个答案提供了有关模式的精彩信息。 Angularjs routing ...有关 Hashbang模式的更多信息，请查看here

请注意，您可以使用$ locationProvider配置路由模式，例如$locationProvider.html5Mode(true);用于HTML5配置，或$locationProvider.hashPrefix('!');用于Hashbang（＃！）。

根据模式的不同，您需要调整网址<a href="/demo/view</a>"，如此...

Hashbang＆amp; HTML5中的Hashbang使用<a href="#!/demo/view1">
对于HTML5 <a href="/demo/view1">应该没问题，但您可能需要指定网址基础，例如：

<head> .... <base href="/myUrlBase"> .... </head>

或在

$locationProvider.html5Mode({ enabled: true, requireBase: false //disabled attribute });

最后，请注意 templateUrl：指向{templateUrl: 'view1.html', controller: 'view1controller'})和{templateUrl: 'view2.html',controller: 'view2controller'})的位置他们当前在您的代码中指向（Spring引导默认配置）将 view1.html 和 view2.html 直接放在静态文件夹应该如下：

Answer 3

我不确定这是否有回应。但这很容易尝试。我正在尝试角度和弹簧靴。我做的是使用网络罐子版角度。如果您使用的是Spring-Boot，则很难调试。如果你使用maven和客户端脚本，Spring-Jars似乎是人们正在采取的路线。此外，当我在我的索引中添加spring我的脚本标记时，我需要加载angular-min.js，angular-resource.min.js和angular-load.min.js才能使spring-boot工作。一旦所有三个模块都加载完毕，那么棱角似乎就像弹簧靴中的冠军一样。

Spring Boot和angularJS - Routing在我的演示项目中不起作用

app.js

的index.html

HomeController.java

3 个答案: