ngRoute 不会正确加载模板答案

【问题标题】：ngRoute wont load template correctlyngRoute 不会正确加载模板
【发布时间】：2019-06-14 13:57:01
【问题描述】：

我正在尝试制作一个具有完全响应式和单页设计的网站。

我将 Angular Route 设置为我的 html 模板。但是滑块等不能与 templateUrl 一起正常工作

AppRouter.js

 angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'views/anasayfa.html',
            controller: 'AnasayfaController'
        })

        $locationProvider.html5Mode(true);
  }]);

app.js

    angular.module('Wooty', [
    'ngRoute',
    'appRoutes',
    'anasayfaCtrl',
    'indexCtrl'
]);

angular.module('indexCtrl', []).controller('IndexController', function($scope,$http,$location,$rootScope) {
    $scope.Test = 'Çalıştı'
});

index.html 部分

主体定义

<body class="animsition" ng-app="Wooty" ng-controller="IndexController">

ng查看部分

<div ng-view="Wooty"></div>

anasayfa.html @views 文件夹

只有滑动部分

<section class="section-slide">
    <div class="wrap-slick1 rs2-slick1">
        <div class="slick1">
            <div class="item-slick1 bg-overlay1" style="background-image: url(images/slide-05.jpg);" data-thumb="images/thumb-01.jpg" data-caption="Women’s Wear">
                <div class="container h-full">
                    <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="fadeInDown" data-delay="0">
                            <span class="ltext-202 txt-center cl0 respon2">
                                Women Collection 2018
                            </span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="fadeInUp" data-delay="800">
                            <h2 class="ltext-104 txt-center cl0 p-t-22 p-b-40 respon1">
                                New arrivals
                            </h2>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="zoomIn" data-delay="1600">
                            <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
                                Shop Now
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-slick1 bg-overlay1" style="background-image: url(images/slide-06.jpg);" data-thumb="images/thumb-02.jpg" data-caption="Men’s Wear">
                <div class="container h-full">
                    <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="rollIn" data-delay="0">
                            <span class="ltext-202 txt-center cl0 respon2">
                                Men New-Season
                            </span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="lightSpeedIn" data-delay="800">
                            <h2 class="ltext-104 txt-center cl0 p-t-22 p-b-40 respon1">
                                Jackets & Coats
                            </h2>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="slideInUp" data-delay="1600">
                            <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
                                Shop Now
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="item-slick1 bg-overlay1" style="background-image: url(images/slide-07.jpg);" data-thumb="images/thumb-03.jpg" data-caption="Men’s Wear">
                <div class="container h-full">
                    <div class="flex-col-c-m h-full p-t-100 p-b-60 respon5">
                        <div class="layer-slick1 animated visible-false" data-appear="rotateInDownLeft" data-delay="0">
                            <span class="ltext-202 txt-center cl0 respon2">
                                Men Collection 2018
                            </span>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="rotateInUpRight" data-delay="800">
                            <h2 class="ltext-104 txt-center cl0 p-t-22 p-b-40 respon1">
                                NEW SEASON
                            </h2>
                        </div>

                        <div class="layer-slick1 animated visible-false" data-appear="rotateIn" data-delay="1600">
                            <a href="product.html" class="flex-c-m stext-101 cl0 size-101 bg1 bor1 hov-btn2 p-lr-15 trans-04">
                                Shop Now
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrap-slick1-dots p-lr-10"></div>
    </div>
</section>

幻灯片无法像图片一样从上到下加载。分开 index.html 和 anasayfa.html 时无效

但 index.html 上的功能运行良好。（侧边栏和导航栏）

【问题讨论】：

标签： javascript angularjs ngroute

【解决方案1】：

您在控制台中有任何错误吗？也许“AnasayfaController”控制器没有正确加载？如果您可以向我们展示“AnasayfaController”控制器，它将更容易为您提供帮助。

【讨论】：

AnasayfaController 像这样是空的 angular.module('anasayfaCtrl',[]).controller('AnasayfaController',function ($scope,$http){ });
嘿，首先在 AnasayfaController 中放一个警报，确保控制器已加载。