Question

我对角度很新，我第一次遇到这个看似常见的问题。我已经阅读了解释它的所有主题，但似乎有许多不同的解决方案/黑客，我想知道在这个问题上有什么好的做法。

我有一个简单的多页面应用。应用程序的每个页面都有自己的路径。但是每当我点击后退按钮时路径发生变化，但ng-view变为空白。我的网址中几乎没有任何参数，它们大多是简单的页面和几个/ show page'content /：id'。当我单独导航到他们自己的路径时，他们工作，但如果我点击后退按钮，浏览器中的路径更改和ng-view =＆gt;空白。

我发现似乎有2-3种做法，

每次更改路径时都存储上一页的路径，并创建一个后退按钮，该后退按钮将调用一个可以改变前一个url路径的函数，这看起来很糟糕，或者在路径更改时完全重新加载整个页面后退按钮被击中似乎很糟糕，但不是不可能的，因为它只会在按下或真正能够使用后退按钮与已经加载到我的浏览器内的内容，而不必回想起似乎是理想的服务器但也许有更好的方法。

你能解释一下这种方式吗“应该做的方式”，我真的不想在我的应用程序中找到一个“后退”链接。

我知道你们喜欢代码，但我不认为这里有需要。随意询问您是否需要它。

一些代码：

    angular.module('TestTool',['ngRoute','ng-rails-csrf','ui.bootstrap','ngAnimate'])
    .config(function($routeProvider){
      $routeProvider.when('/openquestions', {
        templateUrl: '/qa-index.html',
        controller:'QaController',
      })
      .when("/openquestions/:id", {
        templateUrl: '/qa-show.html',
        controller:'QaShowController',
      })
      .otherwise({ redirectTo: '/' });
    });

-

  angular.module('TestTool')
  .controller('QaShowController',['$scope', '$http','$location','$routeParams', function($scope,$http,$location,$routeParams) {
   $http.get('/qaquestions/' + $routeParams.id + '.json').
      then(function(response) {
        $scope.test = " ok "
        $scope.Qdata = response.data;
        // this callback will be called asynchronously
        // when the response is available
      }, function(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
          $scope.test = " error"
    });
  }]);

-

    angular.module('TestTool')
    .controller('QaController',['$scope', '$http','$location', function($scope,$http,$location) {
    ////////////////////////////////////////////
      $http.get('/qaquestions.json').
        then(function(response) {
          $scope.test = " ok "
          $scope.List = response.data;
          // this callback will be called asynchronously
          // when the response is available
        }, function(response) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
            $scope.test = " error"
      });
      //todo $scope.vote = function(id){};
    /////////////// Show
      $scope.OpenQuestion = function(Id){
        var url = '/openquestions/'+ Id
        $location.path(url)
        $scope.$apply();
        };
    }]);

我认为我的观点无用，但基本上我是使用OpenQuestion函数从我的索引到我的节目页面。它只是代码的一个示例，它不是整个应用程序路由，但该部分的行为与网站的其他部分相同。

Answer 1

案例1

如果您说您的网站是＆＃34;多页＆＃34;，我认为您的网址路径将如下所示：

example.com/page1.html ...

您需要通过example.com/page2.html或锚$location设置page1.html中page2.html的链接。

案例2

如果您的网站是＆＃34;多视图＆＃34;，那么该网址将通过Angular RouteProvider进行路由，如下所示：

tags

example.com/contact

后退按钮可以满足您的目的。

案例3

如果您的网站只是＆＃34;单一视图＆＃34;，但有多个参数，如下所示：

example.com/product

example.com/contact/1

后退按钮可以满足您的目的。

Answer 2

由于没有可用的代码，我将为您运行一个简单的MEAN堆栈路由架构，指出常见的陷阱。

首先，您需要返回并重新加载操作以适当地路由角度，就像正常的get请求一样。这是使用以下两行快速完成的。

app.use(express.static(path.join(__dirname, 'app_client')));
app.use(function (req,res){
    res.sendfile(path.join(__dirname, 'app_client', 'index.html'))
});

这将把所有对/（root）的引用路由到app_client文件夹，其中（通过index.html）angular将以适当的方式处理它们。接下来，确保 ngRouter中的所有路由都以/.// strong开头>这是路由问题最常见的问题。如果你有：

templateUrl: "home/homePage.html"

你在主页上点击重新加载，angular会从当前目录搜索home / homePage.html ，而不是根目录，所以这需要是：

templateUrl: "/home/homePage.html"

此架构应启用express - ＆gt;角度路由并允许后退和重新加载按钮的默认情况正常工作。这些简单的操作不需要自定义处理程序。

按下按钮

2 个答案: