用ng-view创建单页APP

Posted 柒夏°

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用ng-view创建单页APP相关的知识，希望对你有一定的参考价值。

我们假设我们有一个单页面的程序，并且想为这个页面添加动画效果。点击某一个链接会将一个试图滑出，同时将另一个试图滑入。

我们将会使用：

  • 使用 ngRoute 来为我们的页面路由

  • 使用 ngAnimate 来为页面创建动画效果

  • 对页面使用 CSS Animations

  • 当我们离开或进入试图时，我们的每一个页面会有不同的动画效果 

让我们看一下ngAnimate是如何工作的。ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。

我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。

ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass

需要的文件列表：

 

- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html


index.html,
加载我们需要的资源，定义我们的Angular app，并且为我们注入的视图添加ng-view类名。
<html>
<head>

    <!-- CSS -->
    <!-- load bootstrap (bootswatch version) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    
    <!-- JS -->
    <!-- load angular, ngRoute, ngAnimate -->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.2.13/angular.min.js"></script>
    <script src="http://lib.baomitu.com/angular.js/1.2.13/angular-route.min.js"></script>
    <script src="http://lib.baomitu.com/angular.js/1.2.13/angular-animate.min.js"></script>
    <script src="app.js"></script>

</head>

<!-- apply our angular app -->
<body ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>
        
</body>
</html>

app.js

现在，我们需要将会创建一个带路由的Angular程序，以便我们可以在不刷新页面的情况下修改我们的页面。

// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module(‘animateApp‘, [‘ngRoute‘, ‘ngAnimate‘]);

// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {

    $routeProvider

        // home page
        .when(‘/‘, {
            templateUrl: ‘page-home.html‘,
            controller: ‘mainController‘
        })

        // about page
        .when(‘/about‘, {
            templateUrl: ‘page-about.html‘,
            controller: ‘aboutController‘
        })

        // contact page
        .when(‘/contact‘, {
            templateUrl: ‘page-contact.html‘,
            controller: ‘contactController‘
        });

});


// CONTROLLERS ============================================
// home page controller
animateApp.controller(‘mainController‘, function($scope) {
    $scope.pageClass = ‘page-home‘;
});

// about page controller
animateApp.controller(‘aboutController‘, function($scope) {
    $scope.pageClass = ‘page-about‘;
});

// contact page controller
animateApp.controller(‘contactController‘, function($scope) {
    $scope.pageClass = ‘page-contact‘;
});

page-home.html

<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

page-about.html

<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

page-contact.html

<!-- page-contact.html -->
<h1>Tons of Animations</h1> 
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

style.css

/* make our pages be full width and full height */


/* positioned absolutely so that the pages can overlap each other as they enter and leave */

.page {
    bottom: 0;
    padding-top: 200px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.page h1 {
    font-size: 60px;
}

.page a {
    margin-top: 50px;
}


/* PAGES (specific colors for each page)
============================================================================= */

.page-home {
    background: #00D0BC;
    color: #00907c;
}

.page-about {
    background: #E59400;
    color: #a55400;
}

.page-contact {
    background: #ffa6bb;
    color: #9e0000;
}


/* ANIMATIONS
============================================================================= */

.ng-enter {
    animation: scaleUp 0.5s both ease-in;
    z-index: 8888;
}

.ng-leave {
    animation: slideOutLeft 0.5s both ease-in;
    z-index: 9999;
}

.ng-enter {
    z-index: 8888;
}

.ng-leave {
    z-index: 9999;
}


/* page specific animations ------------------------ */


/* home -------------------------- */

.page-home.ng-enter {
    animation: scaleUp 0.5s both ease-in;
}

.page-home.ng-leave {
    transform-origin: 0% 0%;
    animation: rotateFall 1s both ease-in;
}


/* about ------------------------ */

.page-about.ng-enter {
    animation: slideInRight 0.5s both ease-in;
}

.page-about.ng-leave {
    animation: slideOutLeft 0.5s both ease-in;
}


/* contact ---------------------- */

.page-contact.ng-leave {
    transform-origin: 50% 50%;
    animation: rotateOutNewspaper .5s both ease-in;
}

.page-contact.ng-enter {
    animation: slideInUp 0.5s both ease-in;
}


/* leaving animations ----------------------------------------- */


/* rotate and fall */

@keyframes rotateFall {
    0% {
        transform: rotateZ(0deg);
    }
    20% {
        transform: rotateZ(10deg);
        animation-timing-function: ease-out;
    }
    40% {
        transform: rotateZ(17deg);
    }
    60% {
        transform: rotateZ(16deg);
    }
    100% {
        transform: translateY(100%) rotateZ(17deg);
    }
}


/* slide in from the bottom */

@keyframes slideOutLeft {
    to {
        transform: translateX(-100%);
    }
}


/* rotate out newspaper */

@keyframes rotateOutNewspaper {
    to {
        transform: translateZ(-3000px) rotateZ(360deg);
        opacity: 0;
    }
}


/* entering animations --------------------------------------- */


/* scale up */

@keyframes scaleUp {
    from {
        opacity: 0.3;
        -webkit-transform: scale(0.8);
    }
}


/* slide in from the right */

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}


/* slide in from the bottom */

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

我们将使用CSS来添加所有的动画效果。这种方法很棒，因为我们所要做的事就是添加ngAnimate，并且不用修改我们的代码就可以添加CSS动画效果。

ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave。你可以想象一些他们各自的作用。

 

我们定义了6个不同的动画效果。每一个页面都会有他们各自的ng-enter 和 ng-leave 的动画效果。

 





以上是关于用ng-view创建单页APP的主要内容，如果未能解决你的问题，请参考以下文章

angularJS 视图view

ng-view 不适用于 AngularJS/Express 中的部分

vue学习二：用 Vue.js + Vue Router 创建单页应用的几个步骤

Angularjs 不会在 ng-view 中加载脚本

AngularJS之基础-5 路由(定义路由使用路由)自定义指令(Directive)

Vue 创建多页面应用模式