0

我正在构建一些网页，我必须在 angular 的帮助下显示内容。

问题：将我的页面带到其他页面的链接没有加载页面，它只是更改了 URL，而不是页面的内容。

我相信它正在发生，因为我在所有页面上都使用了相同的 ng-app 和 ng-controller 。

我这样做是因为我想在所有页面上使用相同的 Angular 脚本 js（即集中式。）

在所有页面上，它使用具有不同参数的相同 ajax 调用（根据要求。）

有什么办法可以让我的角度脚本保持集中并且问题也解决了。

谢谢

4

1 回答 1

0

AngularJS 实际上是 SPA（单页应用程序）。它有一页有不同的视图。所以使用angularJS的路由概念来切换视图。您无需提供两个不同的 ng-app 名称或控制器名称。每个视图都有自己的控制器。（检查AngularJS SPA 概念）

下面的示例可能会对您有所帮助。

索引.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 />

章节.html

controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
Chapter Id: {{params.chapterId}}

脚本.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);

如果您发布代码，我们可以探索确切的解决方案。

于 2016-05-02T08:12:34.217 回答