Question

我正在使用angular开发单页移动网络应用。

我第一次加载partial-For-routes-1.html，然后通过使用链接从我想要转到partial-For-routes-2.html和partial-For-routes-3.html，如何提供指向第2页和第2页的链接第3页，使用href是否更好，因为我在下面使用或更好地使用ng-href？

在普通的桌面网络应用中，我们可以在href属性中使用要加载的页面的相对路径。我不知道如何在角度js框架中使用partials。请帮帮我。提前谢谢。

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

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>

Answer 1

我认为你在寻找的是：

  .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

Angular Js链接到部分页面

1 个答案: