angular路由ui-router路由嵌套，多视图，ocLazyLoad，写法，简易代码

最新推荐文章于 2020-02-23 11:51:27 发布

前端小狮

最新推荐文章于 2020-02-23 11:51:27 发布

阅读量576

点赞数 1

分类专栏： angularjs 文章标签： angular路由 ui-router嵌套 ocLazyLoad配置 angular路由配置 ui-view多视图

本文链接：https://blog.csdn.net/m0_37885651/article/details/81559500

版权

angularjs 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

直接撸代码，此demo目的只是实现功能，用法；

简易demo目录
这里写图片描述

//index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.js" type="text/javascript" charset="utf-8"></script>
        <script src="app.js" type="text/javascript" charset="utf-8"></script>
        <script src="router.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/common/ocLazyLoad.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body ng-app="myApp">

        <ul>
            <li><a ui-sref="a">a</a></li>
            <li><a ui-sref="b">b</a></li>
        </ul>
        <div ui-view="w">

        </div>
        <div ui-view="q">

        </div>
    </body>
</html>

//app.js
var app = angular.module('myApp', ["ui.router", "oc.lazyLoad"]);
    app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
        function ($provide, $compileProvider, $controllerProvider, $filterProvider) {
            app.controller = $controllerProvider.register;
            app.directive = $compileProvider.directive;
            app.filter = $filterProvider.register;
            app.factory = $provide.factory;
            app.service = $provide.service;
            app.constant = $provide.constant;
        }
    ]);
    app.constant('Modules_Config', [{

    　　　　　　　　　name: 'viewer',

    　　　　　　　　　serie: true,

    　　　　　　　　     files: [

    　　　　　　　　　　　"js/common/viewer.css",

                         "js/common/viewer.js"
                     ]
    }]);
    app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);

    function routeFn($ocLazyLoadProvider,Modules_Config){

    　　　　　　　$ocLazyLoadProvider.config({

    　　　　　　　debug:false,

    　　　　　　　events:false,

    　　　　　　　modules:Modules_Config

    　　　})
    }

/*路由router.js*/
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    $urlRouterProvider
        .otherwise('/a-a');
    $stateProvider

        .state('a',{
            url:'/a-a',
            views:{
                w:{
                    templateUrl:'view/a.html',
                }
            },
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load("js/controller/aCtr.js");
                }]
            }

        })
        .state('a.page-1',{
            url:'/page-1',
            views:{
                m:{
                    templateUrl:'view/page-1.html',
                }
            },
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load("js/controller/page-1Ctr.js");
                }]
            }

        })
        .state('a.page-2',{
            url:'/page-2',
            views:{
                m:{
                    templateUrl:'view/page-2.html',
                }
            },
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load("js/controller/page-2Ctr.js");
                }]
            }

        })
        .state('a.page-1.ch-1',{
            url:'/ch-1',
            views:{
                c1:{
                    templateUrl:'view/ch-1.html',
                }
            },
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load("js/controller/ch-1Ctr.js");
                }]
            }

        })
        .state('a.page-1.ch-2',{
            url:'/ch-2',
            views:{
                c2:{
                    templateUrl:'view/ch-2.html',
                }
            },
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load("js/controller/ch-2Ctr.js");
                }]
            }

        })
        .state('b',{
            url:'/b-b',
            views:{
                q:{
                    templateUrl:'view/b.html',
                }
            },
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load(['viewer',{
                        files:[
                            "js/controller/bCtr.js" 
                        ]
                    }]);
                }]
            }

        })

}])

//a.html
<div ng-controller="aCtr">
    <p>a页面</p>
    <p>a页面</p>
    <p>a页面</p>
    <p>a页面</p>
    <p>a页面</p>
    <p>a页面</p>
    <p>a页面</p>
    <ul>
        <li><a ui-sref="a.page-1">m</a></li>
        <li><a ui-sref="a.page-2">n</a></li>
    </ul>
    <div ui-view="m">

    </div>
    <div ui-view="n">

    </div>
</div>

//b.html
<div ng-controller="bCtr">
    <p>b页面</p>
    <p>b页面</p>
    <p>b页面</p>
    <p>b页面</p>
    <p>b页面</p>
    <p>b页面</p>
    <p>b页面</p>
    <ul id="images">
        <li>
            <img src="img/QQ图片20170920110853.png" style="width: 400px;height: 200px;"/>
        </li>
        <li>
            <img src="img/QQ图片20170920110853.png" style="width: 400px;height: 200px;"/>
        </li>
        <li>
            <img src="img/QQ图片20170920110853.png" style="width: 400px;height: 200px;"/>
        </li>
        <li>
            <img src="img/QQ图片20170920110853.png" style="width: 400px;height: 200px;"/>
        </li>
        <li>
            <img src="img/QQ图片20170920110853.png" style="width: 400px;height: 200px;"/>
        </li>
        <li>
            <img src="img/QQ图片20170920110853.png" style="width: 400px;height: 200px;"/>
        </li>
    </ul>
</div>

//ch-1.html
<div ng-controller="ch-1Ctr">
    <p>child111111111页面</p>
    <p>child111111111111</p>
    <p>child111111111页面</p>
    <p>child111111111111</p>
    <p>child111111111页面</p>
    <p>child111111111111</p>
    <p>child111111111页面</p>
    <p>child111111111111</p>

</div>

//ch-2.html
<div ng-controller="ch-2Ctr">
    <p>child222222222页面</p>
    <p>child222222222222</p>
    <p>child222222222页面</p>
    <p>child222222222222</p>
    <p>child222222222页面</p>
    <p>child222222222222</p>
    <p>child222222222页面</p>
    <p>child222222222222</p>

</div>

//page-1.html
<div ng-controller="page-1Ctr">
    <p>page-111111111111111111111</p>
    <p>page-111111111111111111111</p>
    <p>page-111111111111111111111</p>
    <p>page-111111111111111111111</p>
    <p>page-111111111111111111111</p>
    <p>page-111111111111111111111</p>
    <p>page-111111111111111111111</p>
    <ul>
        <li><a ui-sref="a.page-1.ch-1">1111</a></li>
        <li><a ui-sref="a.page-1.ch-2">2222</a></li>
    </ul>
    <div ui-view="c1">

    </div>
    <div ui-view="c2">

    </div>
</div>

//page-2.html
<div ng-controller="page-2Ctr">
    <p>page-222222222222222222222</p>
    <p>page-222222222222222222222</p>
    <p>page-222222222222222222222</p>
    <p>page-222222222222222222222</p>
    <p>page-222222222222222222222</p>
    <p>page-222222222222222222222</p>
    <p>page-222222222222222222222</p>
</div>

js空内容

//aCtr.js
app.controller('aCtr',['$state',function($state){

    console.log('aaaaaaaaaaaaaa');
}])
//…………………………………………………………………………………………………………………………………………………………………………

前端小狮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular路由ui-router路由嵌套，多视图，ocLazyLoad，写法，简易代码

直接撸代码，此demo目的只是实现功能，用法；简易demo目录 //index.html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;scrip
复制链接

扫一扫