一、AngularJS动态加载控制器和视图实例

1.引用：

@H_403_4@<script src="../Scripts/jquery-1.10.2.min.js"></script> <script src="../Scripts/Angular/angular.min.js"></script> <script src="../Scripts/Angular/ocLazyLoad.min.js"></script> <script src="../Scripts/Angular/angular-ui-router.min.js"></script> <link href="../Content/bootstrap.min.css" rel="stylesheet" />2.HTML

<div class="container" ng-app="myApp">
    <ul class="nav nav-pills">
        <li role="presentation"><a href="#/home">首页</a></li>
        <li role="presentation"><a href="#/about">关于页面</a></li>
    </ul>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <div class="panel-title">模板内容</div>
        </div>
        <div class="panel-body" ui-view></div>
    </div>
</div>

3.Js

var app = angular.module('myApp',['oc.lazyLoad','ui.router']);
//配置路由
app.config(function ($stateProvider,$urlRouterProvider) {
    $urlRouterProvider
        .when('','/');
    //首页
    $stateProvider.state('index',{
        url: '/',templateProvider: function ($stateParams) {
            console.info('这是首页');
            return '<h1>这是首页</h1>';
        }
    });
    //二级页面
    $stateProvider.state('main',{
        url: '/:name',/***如果只是动态加载视图**/
        //templateUrl: function ($stateParams) {
        //    console.info($stateParams);
        //    return '/template/' + $stateParams.name + '.html';
        //},/**如果需要动态加载数据和控制器***/
        views: {
            "": {
                templateUrl: function ($stateParams) {
                    console.info($stateParams);
                    return '/template/' + $stateParams.name + '.html';
                },controller: 'homeController'
            }
        },resolve: {
            des: function ($ocLazyLoad,$stateParams) {
                if ($stateParams.name == 'about')
                    return;
                return $ocLazyLoad.load('/scripts/myjs/' + $stateParams.name + '.js');
            }
        }
    });
});

更多：

AngularJS ocLazyLoad按需加载控制器/js文件的延迟加载（一）

AngularJS路由之ui-router（一）