The route in Angularjs can control the changes of the page elements, making multiple pages into a single page ...

1 <script src= "Js/lib/angular.js" ></script>2 <script src= "js/lib/ Angular-animate.min.js "></script>3 <script src=" Js/lib/angular-route.min.js "></script ><br><br><script src= "App.js" ></script>

Step two: Prepare a single page:

1 <BodyNg-app= "Animateapp">2  3     <!--inject our views using Ng-view -4     <!--Each angular controller applies a different class here -5     <Divclass= "page {{pageclass}}"Ng-view></Div>6          7 </Body>

Step three: Prepare multiple templates:

My file structure is roughly as follows: project name    --css    --img    --js        --lib            -angular.js            -angular-route.js            - Angular-animate.js       -app.js    --tpl       -page-home.html       -page-about.html       -page-contact.html     --index.html

Views page-home.html, page-about.html, page-contact.html these should be kept as clear and straightforward as possible. We just need to prepare some text for each page and a link to the other pages. <!--page-home.html-->Animateapp.controller (' Maincontroller ', [' $scope ', function ($scope) {    $scope. Pageclass = ' page-home ';}]); /About page Controlleranimateapp.controller (' Aboutcontroller ', function ($scope) {    $scope. Pageclass = ' Page-about ‘;});/ /Contact page Controlleranimateapp.controller (' Contactcontroller ', function ($scope) {    $scope. Pageclass = ' Page-contact ';}); Now we have created our programs, our routes, and our controllers. Each controller has its own pageclass variable. The changed values are added to the Ng-view in the index.html file, so that each of our pages has a different class name. With these different class names, we can add different animation effects to different pages.

Sixth step: Configure the corresponding animation

This has not been tried, refer to:

Animating AngularJS Apps:ngview

The route in Angularjs can control the changes of the page elements, making multiple pages into a single page ...