私は角度の助けを借りてコンテンツを見せなければならないウェブページをいくつか構築しています。Angular JS：2つの異なるページに同じng-appとng-controllerがありますか？
問題：私のページを他のページに移動するリンクは、ページをロードしていないだけで、URLは変更されますが、ページのコンテンツは変更されません。
私はすべてのページで同じng-appとng-controllerを使用しているため、起こっていると思います。
私はすべてのページに同じ角度スクリプトのJSを使用したいので、私はそうやっている（中央集中すなわち。）
それは異なるパラメータで同じAJAX呼び出し使用するすべてのページ（要件ごとに。）
角度のあるスクリプトを集中管理して問題を解決する方法がありますか。
ありがとうございました
AngularJSは実際にはSPA（シングルページアプリ）です。それは異なる意見を持つ1ページを持っています。ビューを切り替えるには、angularJSのルーティングコンセプトを使用してください。 2つの異なるng-app名やコントローラ名を与える必要はありません。各ビューには独自のコントローラがあります。 （AngularJS SPA Conceptを確認してください）
以下の例はあなたに役立ちます。
Index.htmlと
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-$route-service-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngRouteExample">
<div ng-controller="MainController">
Choose:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
</body>
</html>book.html
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />chapter.html
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}script.js
(function(angular) {
'use strict';
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
})
.controller('BookController', function($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
})
.controller('ChapterController', function($scope, $routeParams) {
$scope.name = "ChapterController";
$scope.params = $routeParams;
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
})(window.angular);あなたがあなたのコードを投稿すれば、正確な解決策を探ることができます。
ここでどのように 'ngApp'ディレクティブを使用していますか？コードを共有する – Satpal
すべてのページに を入力してください また、ページを更新すると、URLが既に変更されているため、 ） – kanishka