单页应用程序允许您通过路由存储在单独的.html文件中的所有内容来刷新网页的特定部分。 这样，您不会重新加载主页。
AngularJS为此提供了一个名为ngRoute的模块。
AngularJS的另一个有用的模块是ngAnimate，它使某些CSS类的动画变得容易。
在本教程中，尽管您仍然需要AngularJS的基础知识才能继续学习，但我将尝试全面解释每个步骤。
从主页开始
基本结构
这个index.html文件将成为我们的主页，我们拥有固定和路由的内容。
我将从一个基本HTML文档开始，并包括所有必需的库以及名为style.css的自定义样式表和JavaScript文件angularApp.js 。
现在，在mainWrapper DIV中添加两个ID为fixedContent和routedContent的DIV。
routedContent还包装在另一个名为wrapper DIV中。 那是因为在路由动画期间，两个不同的内容会相互冲突，因此routedContent应该相对于父DIV绝对定位。
就像ID名称所暗示的那样， fixedContent将是我们主页的静态内容，而routedContent将在用户交互时动态变化。
为了在我们HTML文件中定义Angular应用，我们需要使用ng-app指令。 由于整个页面将是一个Angular应用程序，因此我们需要将此指令分配给mainWrapper DIV。
我们还需要ng-view指令，该指令告诉DIV它被分配来显示路由的页面内容。
现在，我们的index.html文件如下所示：
导航菜单
我们需要一个导航菜单，以便将不同的内容路由到ng-view 。
我们将使用ul和a元素创建一个简单的水平菜单。 您可以在下面看到菜单结构HTML代码段。
缺省情况下， ng-route模块使用! 字首。 但是，这里我们仅在要路由的页面前面使用# 。 这是通过配置中使用的hashPrefix属性完成的，稍后将在相关部分中进行解释。 现在，按原样进行。
我们最终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文件中的ng-view指令将每个路由到DIV的页面都可以具有唯一HTML结构和CSS样式。
让我们从page1.html开始。
由于我们希望每个页面都有特定的样式，因此我们需要为每个页面使用单独CSS文件。 因此，我们还创建了一个名为page1.css的文件，该文件将包含page1.html的样式规则。
Page1的基本HTML结构如下：
Page 1
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.
在顶部，我们链接到将为页面样式化CSS文件，并声明了ID名称为page1的DIV，将在其中放置整个内容。
我将保持简单，但是如何构造HTML文件完全取决于您。 请记住，您的容器将始终是分配了ng-view指令的DIV。 因此，路由页面中的所有内容都将与该DIV相关。
page1.html的样式如下所示：
#page1{
font-family: Arial;
}
h1{
color: #ffa42a;
} 其他三个页面可能完全不同，但为简单起见，我仅对每个HTML页面使用相同的模板，并使用稍微不同CSS文件（不同的h1文本颜色）。
page2.html和page2.css
Page 2
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?
#page2{
font-family: Arial;
}
h1{
color: cornflowerblue;
}page3.html和page3.css
Page 3
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.
#page3{
font-family: Arial;
}
h1{
color: #b2ce6f;
}page4.html和page4.css
Page 4
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?
#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 ，该值设置为! 默认。
我们使用.when('/page1', {templateUrl: 'page1.html'})来定义在主HTML文件中单击Page1时要路由的页面。
对于要路由的每个页面，我们重复同一行代码。 最后，我们使用.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内部进行处理。
第1 页的示例：
.when('/page1',{
templateUrl: 'page1.html',
controller: 'page1Controller'
})最后，我们的页面应该看起来像这样，并且您应该能够在没有过渡动画的情况下在页面之间导航。
动画页面过渡
现在是时候为路线过渡设置动画了。
出于动画目的，由于ngAnimate依赖关系，AngularJS具有内置CSS类。
我们将使用的那些类是：
-
ng-enter：enter动画的起始CSS样式。 -
ng-enter-active：enter动画的整理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存储库，并得到了最终结果 。 您可以在此处下载或克隆代码以进行尝试。
结论
在本教程中，我们介绍了如何使用AngularJS的ng-route模块创建SPA应用程序，然后通过ng-animateCSS类对过渡进行ng-animate 。
通过仅使用ng-animate提供的四个CSS类，您可以实现各种动画。 您始终可以附加额外的类，以更好地控制过渡动画。 例如，您可以使页面过渡感知方向。
我还提到过，通过将controller指令附加到$routeProvider内的每个特定页面，可以实现对每个页面的额外控制。
JavaScript及其类似Angular的库已成为在网络上工作的事实上的语言之一。 它并非没有学习曲线，并且有许多框架和库也让您忙碌。 如果您正在寻找其他资源来学习或在工作中使用，请查看Envato Market上可用的资源 。
我希望本教程为您提供有关如何一起使用ng-route和ng-animate模块的总体思路。
翻译自: https://code.tutsplus.com/tutorials/single-page-applications-with-ngroute-and-nganimate-in-angularjs--cms-28778