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链接到部分页面

回答

相关问题