2
HTMLファイルを分離して再利用できるようにしましたが、残念ながら動作しません。グーグルで回ってチュートリアルに従ったが、何も動かなかった、多分私は何かを見過ごした。私の問題の概要を明らかにするために、モジュール全体が追加されました。おそらくそれに何らかのエラーがあるかもしれません。コードはindex.htmlで完璧に動作しますが、別のhtmlファイルに分割したいと考えています。以下の例は、 "wheretobuy.html"ファイルで実行する必要があります。これで私を助けることができる人。HTMLページを分離しようとしています。角度
var app = angular.module("myApp", ["ngRoute", "slideshow", "json", "accessoires", "wheretobuy"]);
app.config(function($routeProvider) {
// $locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/accessories', {
templateUrl: 'pages/accessories.html',
controller: 'AccessoriesController'
})
.when('/wheretobuy', {
templateUrl: 'pages/wheretobuy.html',
controller: 'WheretobuyController'
})
.when('/service', {
templateUrl: 'pages/service.html',
controller: 'ServiceController'
})
.when('/forum', {
templateUrl: 'pages/forum.html',
controller: 'ForumController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HomeController', function($scope) {
$scope.message = 'Hello from HomeController';
});
app.controller('AccessoriesController', function($scope) {
$scope.message = 'Hello from AccessoriesController';
});
app.controller('WheretobuyController', function($scope) {
$scope.message = 'WheretobuyController';
});
app.controller('ServiceController', function($scope) {
$scope.message = 'Hello from ServiceController';
});
app.controller('ForumController', function($scope) {
$scope.message = 'Hello from ForumController';
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<script type="text/ng-template" id="pages/wheretobuy.html">
<div class="row" ng-controller="TabController">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="{active: isSet}">
<a href ng-click="setTab(1)" class="country">Asia</a>
</li>
<li class="{active: isSet}">
<a href ng-click="setTab(2)" class="country">Europe</a>
</li>
<li class="{active: isSet}">
<a href ng-click="setTab(3)" class="country">South-America</a>
</li>
<li class="{active: isSet}">
<a href ng-click="setTab(4)" class="country">Oceania</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#/">Products</a>
</li>
<li><a href="#/accessories">Accessories</a>
</li>
<li><a href="#/wheretobuy">Where to buy</a>
</li>
<li><a href="#/service">Service</a>
</li>
<li><a href="#/forum">Forum</a>
</li>
</ul>
</div>
</body>
</script>
に一致するように
text/ng-templateタイプを使用して作成しました私はあなたがルートを登録するのを忘れて、あなたのタグhrefがちょっと変わったように見えます。 ＃/ pagesnamesを参照していますが、この種のパスをどこにも登録していないからです。 –この場合、ルートファイルは "wheretobuy.html"です。この場合はパス名 "pages"を削除する必要がありますか？ –
が見つかりました[this]（http://stackoverflow.com/questions/28788443/href-with-routeprovider-loads-a-new-page-instead-of-binding-the-view）。あなたのhrefに＃記号を使用しないように見える –