初次使用AngularJS中的ng-view,路由控制

AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面

第一步:引入必要的js:

<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-animate.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>

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

第二步:准备好一个单页:

<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>

第三步:准备好多个模板:

我的文件结构大致如下:

项目名
    --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
视图 page-home.html, page-about.html, page-contact.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 -->
<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 -->
<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>
现在,我们拥有了我们的页面,通过使用Angular的路由功能可以将这些页面注入到我们的主index.html文件中。

现在,所有的乏味的工作已经完成。我们的程序应该可以正常工作,并且可以很好的修改页面。接下来,让我们进入下一步,为页面添加动画效果!

第四步:创建module并配置路由

// app.js

// 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: 'tpl/page-home.html',
            controller: 'mainController'
        })

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

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

});

第五步:配置对应的Controller

// home page controller
animateApp.controller('mainController', ['$scope',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';
});
现在,我们创建了我们的程序、路由以及控制器。

每一个控制器都有一个它自己的pageClass变量。改变了的值会被添加到index.html文件中的ng-view中,这样我们的每一个页面都有了不同的类名。通过这些不同的类名,我们可以为不同的页面添加不同的动画效果。

第六步:配置对应的动画

这个没有尝试,参考:

Animating AngularJS Apps: ngView

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

WebAPI返回数据类型解惑 以及怎样解决Extjs无法解析返回的xml

 最近开始使用WebAPI,上手很容易,然后有些疑惑   1.WebAPI默认返回什么数据类型,json还是xml?   2.怎么修改WebAPI的返回数据类型...

2848
来自专栏大内老A

ASP.NET MVC Controller激活系统详解:IoC的应用[上篇]

所谓控制反转(IoC: Inversion Of Control)简单地说就是应用本身不负责依赖对象的创建和维护,而交给一个外部容器来负责。这样控制权就由应用转...

1969
来自专栏向治洪

ios开发之xcode环境介绍

作为一个刚入门ios开发的人来说,对于ios开发,对于xcode一切都是那么的陌生,那么我们如何开始我们的第一步呢?首先对开发的ide是必须要了解的,其实要对开...

1836
来自专栏Android 研究

APK安装流程详解1——有关"安装ing"的实体类概述

该类包含了从AndroidManifest.xml文件中收集的所有信息。 PackageInfo.java源码地址 通过源码我们知道PackageInfo是...

932
来自专栏韦弦的微信小程序

微信小程序导航参数中含有问号

和三一样,还可以使用 encodeURIComponent 和 decodeURIComponent 这就是小程序中导航的参数含有?的解决方案,如果还有其他好...

1402
来自专栏大内老A

MVVM(Knockout.js)的新尝试:多个Page,一个ViewModel

对于面向数据的Web应用来说,MVVM模式是一项不错的选择,它借助JS框架提供的“绑定”机制是我们无需过多关注UI(HTML)的细节,只需要操作绑定的数据源。M...

2889
来自专栏林德熙的博客

wpf DoEvents 用法原理存在的坑推荐方法

如果在执行一段卡UI的代码,这时如何让UI响应。如果存在代码需要获得依赖属性,那么代码就需要在UI线程执行,但是这时就会卡UI,为了让UI响应,所以就需要使用D...

661
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局

前言:这一节比较有趣。基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我...

1699
来自专栏大内老A

EnterLib PIAB又一个BUG?[续]——这是一个致命的BUG

在《EnterLib PIAB又一个BUG?》这篇文章中我们谈到:当我们通过应用DependencyAttribute特性定义需要自动注入的属性的时候,当这个属...

1999
来自专栏更流畅、简洁的软件开发方式

【自然框架】之 “表单控件”与“实体类”

      对于简单的添加、修改,也就是没有什么业务逻辑的那种,表单控件的工作步骤是这样的,以添加数据为例。这个不用写什么代码,点点鼠标就可以搞定了。 ?   ...

2357

扫码关注云+社区