1

こんにちは、よろしくお願いします。ビューを index.html ページに表示する作業を行っています。リンクをクリックすると、http リクエストで、適切なテンプレートが取得されていることがわかりますが、表示されていません。テンプレート html を ng-view タグに関連付けるのに問題があるようです。私のテンプレートにもルート要素が 1 つしかなく、それ以外はすべて正常に機能しているようです。どんな助けでも大歓迎です。また、templateUrl の代わりにテンプレートを使用し、そのように html を追加すると、同様に機能します。

var app = angular.module('fireground', [ 'ngRoute', 'ngSanitize' ])

        .config(['$routeProvider', function ($routeProvider) {
            $routeProvider
                    .when('/', {
                        templateUrl : 'pages/test.html',
                        controller  : 'RootCtrl'
                    })
                    .when('/one', {
                        templateUrl : 'pages/test2.html',
                        controller  : 'RootCtrl'

                    })
                    .when('/newsletter', {
                        controller  : 'RootCtrl',
                        templateUrl : 'pages/test3.html'
                    });

                    //.otherwise({
                    //  redirectTo: '/one'
                    //});
        }])
.controller('RootCtrl', function($scope){
$scope.messages = "Test Test Test Test Test Test";
})

そして私のIndex.html（スリム化）

<!DOCTYPE html>

<head>
<title>TheFireStore App</title> 

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,     maximum-scale=1.0, target-densityDpi=device-dpi" />

<link rel="stylesheet" href="./css/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="./css/style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js">          </script>
<script type="text/javascript" src="./js/angular/app.js"></script>
<script type="text/javascript" src="./js/angular/factories.js"></script>
<script type="text/javascript" src="./js/angular/directives.js"></script>
<script type="text/javascript" src="./js/angular/services.js"></script>


</head>     
<body data-ng-app="fireground"> 

<div id="slidemenu">

    <ul id="slideUL">

        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a onclick="$(document).unbind('touchmove');" class="navlnk Left" href="#one" data-transition="slide">FIREGROUND LIVE <span class="floatR">&raquo;</span></a></li>
        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a href="">DEALS</a>
            <ul style="margin:-15px 0 0 40px;">
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Apparel</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">PPE</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Helmets</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Boots</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Flashlights</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Tools</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Bags &amp; Packs</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a onclick="$(document).unbind('touchmove');" class="navlnk Right" href="#newsletter" data-transition="slide">NEWSLETTER<span class="floatR">&raquo;</span></a></li>
        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a href="http://www.thefirestore.com/mobile" rel="external">Shop TheFireStore.com <span class="floatR">&raquo;</span></a></li>
    </ul>

</div>

 <div id="master">

 <div class="header" data-role="header" data-position="fixed">
    <a href="#" class="navlinkstyle" data-slidemenu="#slidemenu" data-slideopen="true" data-corners="false" data-iconpos="notext"><img border="0" src="./images/imageMenu.jpg" /></a>
    <img height="62" style="width:100%" class="imgCenter" src="./images/firegroundLogo.jpg" />
</div>
</div>

    <div ng-view></div>


</body>
</html>

そして、私の単純なhtmlテンプレートは次のとおりです。

<h1 style="color:black">The message is:  {{messages}}</h1>
4

0 に答える 0