AngularJs笔记-- ui-router替换frameset布局

说到frameset,一些老的前端工程师肯定不陌生,是一种用于实现框架式布局的标签,但是在Html5中将这个标签废弃掉了。那么,在如今Html5大行天下的时代,我们又如何去实现框架式布局呢?

本片文章,我们将介绍一下如何在H5中实现框架式布局,这边我们需要借助AngularJs框架(多这个框架不熟悉的,建议先去学习一下基础再来看这篇文章),在AngularJs中实现了一个叫ng-router的路由框架,它式用于实现H5页面跳转的,但是他的跳转与我们想要的框架式布局不同,它实现的式整个页面的跳转,而不是页面内局部内容的跳转。

这边我们要引入本片文章的核心AngularUI提供的ui-router,AngularUI是国外牛人基于AngularJs的拓展,他提供了很多的module可以方面我们使用,这边我们使用ui-router这个Module可以实现我们需要的框架式布局。

下面,我们来看一下源码:

1.创建index.html,他是web app的入口页面

...
    
    
    
...

    
    

1.首先需要导入angularJs与ui-router两个库,请自行下载,app.js在后面讲解。
2.body 带有ng-app,告诉angularJs,body包起来的代码是angular需要维护的代码块(angular基础知识)
3.ui-sref为告诉ui-router根据当前状态加载页面。
4.ui-view,ui-router实现框架式布局的占位符,可以定义名字

2.创建page1~2





    
    Title


    





3.创建page1对应的两个tab


This is Tab1 in Page1
This is Tab1 in Page2

4.关键的app.js

var app = angular.module("app", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/page1");
    $stateProvider
        .state("page1",{
            url:"/page1",
            templateUrl:"tmpls/page1.html"
        })
        .state("page2", {
            url:"/page2",
            // templateUrl:"tmpls/page2.html"
            views:{
                '':{
                    templateUrl:"tmpls/page2.html"
                },
                'content1@page2':{
                    template:'我是content1'
                },
                'content2@page2':{
                    template:'我是content2'
                }
            }
        })
        .state("page3",{
            url:"/page3",
            template:"This is page3"
        })
        .state("page1.tab1", {
            url:"/page1_tab1",
            templateUrl:"tmpls/page1_tab1.html"
        })
        .state("page1.tab2", {
            url:"/page1_tab2",
            templateUrl:"tmpls/page1_tab2.html"
        });;
});

1.$urlRouterProvider有两个方法
​ when():两个参数,第一个是希望匹配的路径,第二个是没有匹配到时希望重定向的路径。
​ otherwise():这个方法时没有匹配到时重定向的路径,类似于switch-case中的default
2.$stateProvider.state,记录的时各种状态跳转信息,类似与switch-case
3.views主要用于布局中有多个ui-view的情况,可以对不同的ui-view使用特定的templateUrl等,绝对view使用‘@’符号来区别,比如content2@page2表明content2的ui-view使用了page2状态的模板。
4.当模板是html时,使用templateUrl;当模板就是一段文本时,使用template

至此,功能就已经实现了,当然还可以使用动画来改变页面切换的效果,大家可以尝试一下。

下载ui-router-md.zip

你可能感兴趣的:(AngularJs笔记-- ui-router替换frameset布局)