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

初次使用AngularJS中的ng-view,路由控制的更多相关文章

  1. angularjs 中通过 $location 进行路由跳转传参

    $location.path('/page1').search({id: $scope.id,name:$scope.name}); 带参数跳转页面,在新的页面通过$routeParams接收参数 $ ...

  2. 走进AngularJs(八) ng的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  3. angularjs中的路由介绍详解 ui-route(转)

    http://www.cnblogs.com/littlemonk/p/5500801.html 这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui rou ...

  4. angularjs中的路由介绍详解 ui-route

    这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui router的基本用法,需要的朋友参考下吧   首先给大家介绍angular-ui-router的基本用 ...

  5. 关于AngularJs中的路由学习总结

    AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds ...

  6. angularJS中-$route路由-$http(ajax)的使用

    后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL, 页面使用的是bottstarp3.0(懒人神器); 第一个例子: 在本地架设NODEJS, angular的所有请求都是请求本 ...

  7. angularjs中关于当前路由再次点击强制刷新

    angularjs中,有一个机制,就是当前路由再次点击的时候,不会再刷新页面,这实在是愁坏了包子,因为业务人员要求一定要刷新,于是我各种百度,然并卵....呜呜呜~~~~~ 于是乎,我就想到写指令了, ...

  8. angular 中怎么获取路径上的参数 参考：https://docs.angularjs.org/api/ng/service/$location

    参考: https://docs.angularjs.org/api/ng/service/$location

  9. AngularJS中的模板安全与作用域绑定

    欢迎大家指导与讨论 : ) 一.前言 摘要:指令compile.$sce.作用域绑定.$compileProvider和其他资源安全设置.本文是笔者在学习时整理的笔记,由于技术还不够高,如果本章中有错 ...

随机推荐

  1. jquery插入复杂表格，合并行列

    此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列, 在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ...

  2. JS简介，如何快熟JS。打下结实基础。

    JS决定网页的行为,有行为就有逻辑,而计算机只是人工智能,你给它什么样的指令,它就会按照你的指令去运行. 有人会问,既然是给出指令,那还需要什么逻辑? 这里我举一个简单的小例子来说明一下! 到你想输入 ...

  3. 【php爬虫】百万级别知乎用户数据爬取与分析

    代码托管地址:https://github.com/hoohack/zhihuSpider 这次抓取了110万的用户数据,数据分析结果如下: 开发前的准备 安装Linux系统(Ubuntu14.04) ...

  4. Java NIO2：缓冲区

    什么是缓冲区 一个缓冲区对象是固定数量的数据的容器,其作用是一个存储器,或者分段运输区,在这里数据可被存储并在之后用于检索.缓冲区像前篇文章讨论的那样被写满和释放,对于每个非布尔原始数据类型都有一个缓 ...

  5. 剑指Offer面试题：16.合并两个排序的链表

    PS:这也是一道出镜率极高的面试题,我相信很多童鞋都会很眼熟,就像于千万人之中遇见不期而遇的人,没有别的话可说,唯有轻轻地问一声:“哦,原来你也在这里? ” 一.题目:合并两个排序的链表 题目:输入两 ...

  6. Got the Best Employee of the year 2015 Star Award

    Got "The Best Employee of the year 2015 Star Award" from the company, thanks to all that h ...

  7. ORM小练习代码

    DOG类 namespace RupengORM { public class Dog { public Dog() { } /// <summary> /// 显示提供无参构造函数 // ...

  8. Html5 设置菱形链接菜单

    本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: 1. CSS3.0中的2D变换,如:旋转transform:rotate(45deg);移动,放大transform:r ...

  9. JS函数 -- 功能，语法，返回值，匿名函数，自调用匿名函数，全局变量与局部变量，arguments的使用

    “JavaScript设计得最出色的就是它的函数的实现.” -- <JavaScript语言精粹> 函数包含一组语句,它们是JS的基础模块单元,用于指定对象的行为.一般来说,所谓编程,就是 ...

  10. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...