在AngularJS中使用ngRoute和ngAnimate的单页应用程序

单页应用程序允许您通过路由存储在单独的 .html 文件中的任何内容来刷新网页的特定部分。通过这样做，您不会重新加载您的主页。
angularJS 专门为此目的提供了一个名为 ngRoute 的模块。
AngularJS 的另一个有用模块是 ngAnimate，它可以很容易地使用某些 css 类制作动画。
在本教程中，我将尝试彻底解释每个步骤，尽管您仍然需要 AngularJS 的基本知识才能遵循。

从主页开始

基本结构

这个 index.html 文件将成为我们的主页面，其中包含固定内容和路由内容。

我将从一个基本的 HTML 文档开始，包括所有必要的库以及我们命名的自定义样式表 style.css 和一个 javascript文件 angularApp.js。

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

现在我在一个 DIV 中添加两个 id 名称的 fixedContentDIV 。routedContentmainWrapper

routedContent也被包裹在另一个名为 wrapper. 这是因为在路由动画期间，两个不同的内容会相互冲突，因此相对于父 DIVroutedContent应该是绝对位置。

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper">
    <div id="fixedContent"></div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

正如 id 名称所暗示的那样， fixedContent它将是我们主页的静态内容，并将 routedContent随着用户交互而动态变化。

为了在我们的 HTML 文件中定义一个 Angular 应用程序，我们需要使用该 ng-app指令。由于整个页面将是一个 Angular 应用程序，我们需要将此指令分配给 mainWrapperDIV。

我们还需要该 ng-view指令，它告诉 DIV 它被分配以显示路由页面内容。

现在我们的 index.html 文件看起来像这样：

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper" ng-app="mainApp">
    <div id="fixedContent"></div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

导航菜单

我们需要一个导航菜单，以便将不同的内容路由到ng-view.

我们将使用 ul和a 元素来创建一个简单的水平菜单。您可以在下面看到菜单结构的 HTML 片段。

<div id="fixedContent">
    <ul>
        <a href="#page1">Page1</a>
        <a href="#page2">Page2</a>
        <a href="#page3">Page3</a>
        <a href="#page4">Page4</a>
    </ul>
</div>

默认情况下， ng-route 模块使用 !前缀。但是，这里我们只使用 #前面我们要路由的页面。这是通过 hashPrefix配置中使用的属性完成的，我将在稍后的相关部分中解释。现在，就这样吧。

我们最终的 HTML 文件如下：

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper" ng-app="mainApp">
    <div id="fixedContent">
        <ul>
            <a href="#page1">Page1</a>
            <a href="#page2">Page2</a>
            <a href="#page3">Page3</a>
            <a href="#page4">Page4</a>
        </ul>
    </div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>

<script src="angularApp.js"></script>

</body>
</html>

样式化主页

由于本教程侧重于 AngularJS，因此我不会详细介绍 CSS 样式。如果您有以前的 CSS 知识，请根据需要设置页面样式。否则，您可以使用我在下面提供的样式。

html, body{
    margin: 0;
    padding: 0;
}

#mainWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px
}

#fixedContent{
    margin-bottom: 50px;
}

#wrapper{
    width: 350px;
}

#routedContent{
    width: 350px;
    position: absolute;
}

ul{
    display: flex;
    justify-content: space-between;
    width: 350px;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #FFFFFF;
    font-family: Arial;

    list-style: none;
    background-color: #cecece;
    padding: 7px 10px;
    border-radius: 2px;
}

要路由的页面

将使用主 HTML 文件中的指令路由到 DIV 的每个页面都 ng-view可以具有唯一的 HTML 结构和 CSS 样式。

让我们从 page1.html开始。

由于我们希望每个页面都有特定的样式，因此我们需要为每个页面提供单独的 CSS 文件。因此，我们还创建了一个名为 page1.css的文件，其中将包含 page1.html的样式规则。

page1 的基本 HTML 结构如下：

<link href="page1.css" rel="stylesheet">

<div id="page1">
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

在顶部，我们链接到将设置页面样式的 CSS 文件，并且我们声明了一个 id 名称为的 DIV， page1整个内容将放置在其中。

我会保持简单，但如何构建 HTML 文件完全取决于您。请记住，您的容器将始终 ng-view是分配指令的 DIV。因此，您路由页面中的所有内容都将与该 DIV 相关。

page1.html 的样式如下所示：

#page1{
    font-family: Arial;
}

h1{
    color: #ffa42a;
}

其他三个页面可能完全不同，但为了简单起见，我只是为每个 HTML 页面使用相同的模板和稍微不同的 CSS 文件（不同 h1的文本颜色）。

page2.html & page2.css

<link href="page2.css" rel="stylesheet">

<div id="page2">
    <h1>Page 2</h1>
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

#page2{
    font-family: Arial;
}

h1{
    color: cornflowerblue;
}

page3.html & page3.css

<link href="page3.css" rel="stylesheet">

<div id="page3">
    <h1>Page 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

#page3{
    font-family: Arial;
}

h1{
    color: #b2ce6f;
}

page4.html & page4.css

<link href="page4.css" rel="stylesheet">

<div id="page4">
    <h1>Page 4</h1>
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

#page4{
    font-family: Arial;
}

h1{
    color: #ff4517;
}

在 JavaScript 中设置 ngRoute 和 ngAnimate

到目前为止，我们已经完成了所有必要的 HTML 和 CSS 文件。现在是时候编写控制路由和动画的 javaScript 代码了。

由于我们的 ng-app指令名为 mainApp，我们在模块函数中使用此 id。我们还需要包含 ngRoute和 ngAnimate依赖项。

mainAngular = angular.module('mainApp',['ngRoute', 'ngAnimate']);

现在我们可以访问 $routeProvider和 $locationProvider。

我们将使用 $routeProvider来管理路由并 $locationProvider更改默认hashPrefix设置为的。!

我们用于定义在我们的主 HTML 文件中单击.when('/page1', {templateUrl: 'page1.html'})时要路由的页面。<a href="#page1">Page1</a>

我们为要路由的每个页面重复相同的代码行。最后，我们使用 .otherwise({redirectTo: '/page1'})，它处理意外的页面名称。如果您尝试访问未定义的页面名称，例如 page5，您将被重定向到 page1。

完整的 JavaScript 代码如下：

var mainAngular = angular.module('mainApp',['ngRoute', 'ngAnimate']);

mainAngular.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/page1',{
            templateUrl: 'page1.html'
        })
        .when('/page2',{
            templateUrl: 'page2.html'
        })
        .when('/page3',{
            templateUrl: 'page3.html'
        })
        .when('/page4',{
            templateUrl: 'page4.html'
        })
        .otherwise({
            redirectTo: '/page1'
        });

    $locationProvider.hashPrefix('');

});

额外说明：如果您希望为要路由的任何页面添加特定 ng-controller 指令，您可以在 $routeProvider.

page1的示例：

.when('/page1',{
    templateUrl: 'page1.html',
    controller: 'page1Controller'
})

最后，我们的页面应该是这样的，你应该能够在没有过渡动画的页面之间导航。

在AngularJS中使用ngRoute和ngAnimate的单页应用程序第1张

动画页面过渡

现在是时候为路线过渡设置动画了。

出于动画目的，AngularJS 有内置的 CSS 类，这要归功于 ngAnimate 依赖。

我们将要使用的类是：

ng-enter：进入动画的起始 CSS 样式。
ng-enter-active: 进入动画的整理 CSS 样式。
ng-leave: 离开动画的起始 CSS 样式。
ng-leave-active: 离开动画的整理 CSS 样式。

所以进入主页面的路由内容有一个从 ng-enter到的过渡ng-enter-active。同样，离开主页的内容也有从 ng-leave到的过渡ng-leave-active。

我们必须将上述类附加到我们的 routedContent类中。

下面给出了一个示例转换。您可以设计自己的过渡动画，也可以在 style.css文件中使用它。

#routedContent.ng-enter{    transform: translateX(-500px);
    opacity: 0;

    -webkit-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -moz-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -ms-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -o-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    transition: all 0.35s cubic-bezier(1,.01,0,.99);
}

#routedContent.ng-enter-active{
    transform: translateX(0px);
    opacity: 1;
}

#routedContent.ng-leave{
    transform: translateX(0);
    opacity: 1;

    -webkit-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -moz-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -ms-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -o-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    transition: all 0.35s cubic-bezier(1,.01,0,.99);
}

#routedContent.ng-leave-active{
    transform: translateX(500px);
    opacity: 0;
}

我创建了一个带有最终结果的 GitHub 存储库。您可以在那里下载或克隆代码以进行试用。