2

angularを使用して単一ページのモバイルWebアプリを開発しています。

最初に をロードしpartial-For-routes-1.html、そこからリンクを使用してページ 2partial-For-routes-2.htmlとpartial-For-routes-3.htmlページ 3 にリンクするにはどうすればよいhrefですng-hrefか?

通常のデスクトップ Web アプリでは、読み込まれるページの相対パスを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 内では、ルート値を読み取ってページを決定します。これにより、1 つのビューで 1 つのコントローラー内のすべてのページングを処理できます。

$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 に答える