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的入口页面

...
    
    
    
...

    

        Page1
        Page2
        Page3
    
    

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

    
    


    

        

            

                
Tab1
                
Tab2
            
        
        

    






  

  

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