Question

我的应用程序加载主页的所有脚本和图片。但是我得到滑块图像的404错误，并且所有按钮都不起作用。

滑块：

我确认我的AngularJS控制器正在通过在控制台中打印出以下内容来工作：

出于某种原因，似乎编译应用程序后，所有外部链接都无关紧要。

我的index.html文件通过<ng-view>

加载脚本和初始视图

<!DOCTYPE html>
<html lang="en" ng-app="SharpVision">
    <head>
        <base href="/">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
        <title>My Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="My Page personal site" content="Personal" />
        <meta name="author" content="AHthemes" />

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <!--<script src="http://a1alfred.com/sharpvisionbs3/v2/angular/assets/libs/html5shiv/html5shiv.min.js"></script>-->
          <!--<script src="http://a1alfred.com/sharpvisionbs3/v2/angular/assets/libs/respond/respond.min.js"></script>-->
        <![endif]-->
        <!--[if gte IE 9]>
          <style type="text/css">
            .gradient {
               filter: none;
            }

          </style>
        <![endif]-->

        <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/styles.css" rel="stylesheet">
    </head>
    <body>

        <ng-include src="'app/views/structure/navigation.tpl.html'"></ng-include>

        <ng-view autoscroll="true"></ng-view>

        <ng-include src="'app/views/structure/footer.tpl.html'"></ng-include >

        <!--Scripts-->
        <!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>-->
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
        <script src="assets/libs/flexslider/jquery.flexslider.js"></script>
        <script src="assets/libs/masonry/masonry.pkgd.min.js"></script>
        <script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
        <script src="assets/libs/angular/angular.min.js"></script>
        <script src="assets/libs/angular/angular-route.min.js"></script>
        <script src="assets/libs/angular/angular-sanitize.min.js"></script>
        <script src="assets/libs/angular/ui-bootstrap-tpls-0.13.0.min.js"></script>
        <script src="assets/libs/angular-flexslider/angular-flexslider.js"></script>
        <script src="assets/libs/angular-backstretch/ng-backstretch.min.js"></script>
        <script src="assets/libs/angular-parallax/angular-parallax.js"></script>
        <script src="assets/libs/angular-fitvids/angular-fitvids.js"></script>
        <script src="assets/libs/angular-masonry/angular-masonry.min.js"></script>
        <script src="assets/libs/momentjs/moment-with-locales.min.js"></script>
        <script src="assets/libs/humanize-duration/humanize-duration.js"></script>
        <script src="assets/libs/angular-timer/angular-timer.min.js"></script>
        <script src="assets/libs/ng-progress/js/ngprogress.min.js"></script>
        <script src="assets/libs/angular-gmaps/angular-google-maps.min.js"></script>
        <script src="assets/libs/lodash/lodash.min.js"></script>
        <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
        <script src="app/app.module.js"></script>
        <script src="app/app.directives.js"></script>
        <script src="app/app.routes.js"></script>
        <script src="app/app.controllers.js"></script>

    </body>
</html>

然后我的路线配置如下：

app.config(function($routeProvider, $locationProvider){
    $routeProvider.when('/',{
        templateUrl: "app/views/misc/home.tpl.html",
        controller: "HomeController"
    })

转到我的HomeController：

  app.controller('HomeController', function($scope, ROOT) {
        $scope.Root = ROOT;
        console.log("In Home Controller")
        $scope.top = {

            backstretch: [
                ROOT+'/assets/img/big/big-1.jpg',
                ROOT+'/assets/img/big/big-2.jpg',
                ROOT+'/assets/img/big/big-4.jpg'
            ]
        };
    });

Get the name ROOT injected from the module:

     app.constant('ROOT', '/PersonalSite/src/main/resources/static');

在我的NavigationController中：

app.controller('NavigationController', function($scope, ROOT, ngProgressFactory, $window) {
    $scope.Root = ROOT;
    $scope.brand = 'Drew';
    $scope.isCollapsed = true;
    $scope.progressbar = ngProgressFactory.createInstance();
    $scope.progressbar.setColor('#02bbff');
    $scope.progressbar.start();
    $scope.$on('$routeChangeStart', function(next, current) { 
        $scope.isCollapsed = true;
        $scope.progressbar.start();
    });
    console.log("In NavigationController");
    $scope.menu = {
        items: [
            {
                link: ROOT+"/",
                name: "Home"
            },
            {
                link: ROOT+"/features/portfolioitem",
                name: "Gallery"
            }, 
{
                link: ROOT+"/contact",
                name: "Contact"
            }

        ]
    };

当我点击按钮href时，我在控制台中获得了In HomeController，这让我感到困惑。因此它响应但仍然无法正常工作。我让应用程序工作，直到我引入Spring-Boot，现在只是index.html加载。

  [1]: http://i.stack.imgur.com/ylsZm.png
  [2]: http://i.stack.imgur.com/LMJSt.png
  [3]: http://i.stack.imgur.com/91n7A.png

在Spring-Boot初始启动后，AngularJS不再响应

0 个答案: