2

我正在使用 Angular 开发一个单页移动网络应用程序。

第一次我将加载partial-For-routes-1.html，然后从我想要转到partial-For-routes-2.html并partial-For-routes-3.html使用链接，我如何提供指向第 2 页和第 3 页的链接，是href像下面使用的那样更好还是更好地使用ng-href？

在普通的桌面网络应用程序中，我们可以只使用要加载的页面的相对路径href属性。我不知道如何在带有部分的 Angular js 框架中做到这一点。请帮助我。提前致谢。

请纠正我，我使用正确的语法链接到部分。

Index.html

<html lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>My HTML File</title>
        <title>Google Phone Gallery</title>
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="lib/angular/angular.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/routes.js"></script>

    </head>
    <body ng-controller="appCtrl">
        <div class="" ng-view></div>
    </body>
</html>

app.js

    angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.
                    when('/', 
                        {
                        templateUrl: 'partials/partial-For-routes-1.html', 
                        controller: appCtrl
                        }).
                    when('/page-2', 
                        {
                        templateUrl: 'partials/partial-For-routes-2.html', 
                        controller: appCtrl
                        }).
                    when('/page-3', 
                        {
                        templateUrl: 'partials/partial-For-routes-3.html', 
                        controller: appCtrl
                        }).
                    otherwise({redirectTo:("/")})
     }]);

partial-For-routes-1.html

<p>Total number of phones: 1</p>
<p>Total number of phones: 1</p>
<p>Total number of phones: 1</p>
<p>Total number of phones: 1</p>
<p>Total number of phones: 1</p>
<p>Total number of phones: 1</p>
<p><a href="#/page-2" class="">Go to Page 2</a></p>
<p><a href="#/page-3" class="">Go to Page 3</a></p>

partial-For-routes-2.html

<p>Total number of phones: 2</p>
<p>Total number of phones: 2</p>
<p>Total number of phones: 2</p>
<p>Total number of phones: 2</p>
<p>Total number of phones: 2</p>
<p>Total number of phones: 2</p>
<p><a href="#/page-1" class="">Go to Page 1</a></p>
<p><a href="#/page-3" class="">Go to Page 3</a></p>

partial-For-routes-3.html

<p>Total number of phones: 3</p>
<p>Total number of phones: 3</p>
<p>Total number of phones: 3</p>
<p>Total number of phones: 3</p>
<p>Total number of phones: 3</p>
<p>Total number of phones: 3</p>
<p><a href="#/page-1" class="">Go to Page 1</a></p>
<p><a href="#/page-2" class="">Go to Page 2</a></p>
4

1 回答 1

3

我认为您正在寻找的是：

  .when('/page/:id', 
  {
    templateUrl: 'partials/partial-For-routes.html', 
    controller: appCtrl
  })

你也可以像这样进行路由，它的工作原理是一样的：

 .when('/page-:id', 
  {
    templateUrl: 'partials/partial-For-routes.html', 
    controller: appCtrl
  })

在您的 appCtrl 中，您将读取路由值以确定页面。这使您可以使用一个视图处理一个控制器内的所有分页。

在您的控制器中，这将可用，因此您可以处理分页： $routeParams.id基于动态路由值。

您的链接将是href='#/page/1'或根据您的注释，它们可能是这样的，href='#/page-1'具体取决于您如何定义规则。

这是一个演示： http ://plnkr.co/edit/a2qaF0rAAgI5UMCY6RcO?p=preview

如果您想更好地查看路线变化，这里是全屏链接：http: //plnkr.co/a2qaF0rAAgI5UMCY6RcO

于 2013-05-06T13:39:34.710 回答