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

男娘i 2022-05-17 10:39 243阅读 0赞

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

简易demo目录  
![这里写图片描述][70]

//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');
    }])
    //…………………………………………………………………………………………………………………………………………………………………………

[70]: /images/20220517/566c3899ba904f6ba39c7c1397442449.png