Question

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

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

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

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

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

有没有任何出路，以便我可以保持我的角度脚本集中，问题也解决了。

由于

Answer 1

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

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

<强>的index.html

＆＃13;

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

＆＃13;

<强> book.html

＆＃13;

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

＆＃13;

<强> chapter.html

＆＃13;

(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);

＆＃13;

<强>的script.js

＆＃13;

tp.max_width= 200

＆＃13;

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

Angular JS：两个不同的页面可以有相同的ng-app和ng-controller吗？

1 个答案: