初次使用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 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

Android JNI堆栈分析工具简介

导语 :从事Android开发的同事如果在碰到JNI的bug一般都是比较头疼的,因为JNI出错的日志信息比较少,不像Java层的堆栈那样,可以直接看到出错的信...

21410
来自专栏Android 研究

APK安装流程详解11——普通应用安装简介

众所周知,Android应用最终是打包成.apk格式(其实就是一个压缩包),然后安装至手机并运行的。其中APK是Android Package的缩写。

712
来自专栏智能大石头

Windows Live Writer插入代码vs2010插件

    网络上的许多插件都不错,我比较看好vsPaste,可惜很久没更新了,在vs2010中复制代码的时候,会出现中文乱码的情况。据说是vs2010的BUG。 ...

3605
来自专栏Theo Tsao

Ionic3学习笔记(十三)HttpClient 实现 HTTP 请求以及踩过的一些坑

当然是基于这篇古老的文章啦 ==> http://www.jianshu.com/p/9855610eb1d4 因为是2015年的文章,已经时隔2年多,很难确保...

471
来自专栏向治洪

Android逆向分析(2) APK的打包与安装背后的故事

前言 上一次我们反编译了手Q,并遇到了Apktool反编译直接crash的问题,虽然笔者很想在这次解决这个问题,但在解决途中,发现该保护依赖于很多知识,所以本次...

2688
来自专栏每日一篇技术文章

VR+全景播放器+头控讲解-07

913
来自专栏小狼的世界

Sublime Text 2以及Zen Coding

去年就知道了Sublime Text 2这款编辑器,当时就颇有好感,还用了一段时间来进行开发。最近,偶然知道了还有Zen Coding这样的一个插件之后,简直对...

683
来自专栏程序员阿凯

AndroidStudio开发利器--常用插件

943
来自专栏coding for love

在线商城项目10-基于mongoose实现商品列表查询

step1 先建goods集合对应的model 在根目录下新建一个目录models存放所有的model,新建good.js:

531
来自专栏圣杰的专栏

ABP入门系列(9)——权限管理

源码路径:Github-LearningMpaAbp 完成了简单的增删改查和分页功能,是不是觉得少了点什么? 是的,少了权限管理。既然涉及到了权限,那我们...

3575

扫描关注云+社区