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>
我想你正在寻找的是这样的:
.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
谢谢对于我所期待的答案:是否可以像href =“#/ page-1”一样使用户查看部分页面1(如果单击该链接等)。 – 2013-05-06 14:00:22
你可以绝对做你的路由。看看我刚刚添加的演示。 – lucuma 2013-05-06 14:16:56
感谢您的答案和演示。 – 2013-05-07 05:32:49
其精美绝伦使用href标记和HTML只使用#/ PAGE- 1 – 2013-05-06 13:36:14