Question

我正在尝试构建一个“单击并阅读”的AngularJS网站。我有一个可以使用户在目录，联系人页面和主页之间使用的标题。很好我的问题是：我该如何编码，以便用户可以在主页上单击将其带到第2页的按钮或链接，然后从第2页再次单击将其带到第3页，依此类推？我也希望他们也能够向另一个方向发展。

这是我的文件/文件夹结构：

class BlogPostForm(forms.ModelForm):

    brief = forms.CharField(widget=CKEditorWidget())
    content = forms.CharField(widget=CKEditorWidget())

    class Meta():
        model = BlogPost
        fields = ('title','brief','content','accept_comments','is_public')

app.js

app/app.js
app/lib

content/css/styles.css

header.html
index.html

views/contactMe.html
views/directory.html
views/home.html
views/page1.html

header.html

angular.module('myApp', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html'
        })
        .when('/directory', {
            templateUrl: 'views/directory.html',
            //since this page requires a controller
            controller: 'myController'
        })
        .when('/contactMe', {
            templateUrl: 'views/contactMe.html',
            //since this page requires a controller
            controller: 'myController'
        })
        .otherwise({
            redirectTo: '/home'
        });

}]);  //.config


angular.module('myApp')
   .controller('myController', function($scope) {
      $scope.message = ("Hello World");
}
});

index.html

<div id="menu-bar">
    <h1>My Sample App</h1>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#directory">Directory</a></li>
            <li><a href="#contactMe">Contact Me</a></li>
        </ul>
</div>

Answer 1

您可以在每个页面中添加按钮以返回：<a href="javascript:history.back()">Go Back</a>，也可以单击按钮以转到下一页（如果您没有很多页面，则可以手动执行）-<a href="#page1">Go to page1</a>

这是我的例子：

<div id="menu-bar">
    <h1>Header</h1>
          <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#directory">Directory</a></li>
        <li><a href="#contactMe">Contact Me</a></li>
    </ul>
</div>
    Body
    <div ng-view=""></div>

home.html：

<a style="float:right"  href="#page1">Go to page1</a>

<a style="float:left"  href="javascript:history.back()">Go Back</a>
<br />
<div style="text-align:center">home</div>

工作勤奋的人：http://next.plnkr.co/edit/1cBb8TzSX5mDJy4v

编辑：http://next.plnkr.co/edit/Gm0TkOZCIxwxDerQ

AngularJS MVC如何加载页面？

1 个答案: