Angular Js鏈接到部分頁面

我正在開發使用角度的單頁移動web應用程序。Angular Js鏈接到部分頁面

我第一次將通過鏈接加載partial-For-routes-1.html，然後從我想去partial-For-routes-2.html和partial-For-routes-3.html，我怎麼給鏈接到頁面2和頁面-3，是它更好地使用href作爲我使用下面或更好使用ng-href？

在普通的桌面Web應用程序中，我們可以使用頁面的相對路徑來加載屬性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>

來源

2013-05-06 Mohamed Hussain

其精美絕倫使用href標記和HTML只使用＃/ PAGE- 1 – 2013-05-06 13:36:14

我想你正在尋找的是這樣的：

.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-06 13:39:34 lucuma

謝謝對於我所期待的答案：是否可以像href =「＃/ page-1」一樣使用戶查看部分頁面1（如果單擊該鏈接等）。 – 2013-05-06 14:00:22

你可以絕對做你的路由。看看我剛剛添加的演示。 – lucuma 2013-05-06 14:16:56

感謝您的答案和演示。 – 2013-05-07 05:32:49

Angular Js鏈接到部分頁面

回答

相關問題