最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间。本来一直不打算写这些第三方插件的学习笔记,不过觉得按需加载模块并且成功使用这个确实是个好处,还是记录下来吧。基于本兽没怎么深入的使用requireJs,所以本兽不知道这个和requireJs有什么区别,也不能清晰的说明这到底算不算Angular的按需加载。

为了实现这篇学习笔记知识点的效果,我们需要用到:

angular:https://github.com/angular/angular.js

ui-router:https://github.com/angular-ui/ui-router

ocLazyLoad:https://github.com/ocombe/ocLazyLoad

废话不多说,进入正题...

首先我们看下文件结构:

Angular-ocLazyLoad                      --- demo文件夹
    Scripts                             --- 框架及插件文件夹
        angular-1.4.7                   --- angular 不解释
        angular-ui-router               --- uirouter 不解释
        oclazyload                      --- ocLazyload 不解释
        bootstrap                       --- bootstrap 不解释
        angular-tree-control-master     --- angular-tree-control-master 不解释
        ng-table                        --- ng-table 不解释
        angular-bootstrap               --- angular-bootstrap 不解释
    js                                  --- js文件夹 针对demo写的js文件
        controllers                     --- 页面控制器文件夹
            angular-tree-control.js     --- angular-tree-control控制器代码
            default.js                  --- default控制器代码
            ng-table.js                 --- ng-table控制器代码
        app.config.js                   --- 模块注册及配置代码
        oclazyload.config.js            --- 加载模块配置代码
        route.config.js                 --- 路由配置及加载代码
    views                               --- html页面文件夹
        angular-tree-control.html       --- angular-tree-control插件的效果页面
        default.html                    --- default页面
        ng-table.html                   --- ng-table插件效果页面
        ui-bootstrap.html               --- uibootstrap插件效果页面
    index.html                          --- 主页面

注意:这个demo没做嵌套路由,只是简单实现单视图的路由以展示效果。

我们来看主页面的代码:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="Scripts/bootstrap/dist/css/bootstrap.min.css" />
    <script src="Scripts/angular-1.4.7/angular.js"></script>
    <script src="Scripts/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="Scripts/oclazyload/dist/ocLazyLoad.min.js"></script>
    <script src="js/app.config.js"></script>
    <script src="js/oclazyload.config.js"></script>
    <script src="js/route.config.js"></script>
</head>
<body>
<div ng-app="templateApp">
    <div>
        <a href="#/default">主页</a>
        <a href="#/uibootstrap" >ui-bootstrap</a>
        <a href="#/ngtable">ng-table</a>
        <a href="#/ngtree">angular-tree-control</a>
    </div>
    <div ui-view></div>
</div>
</body>
</html>

在这个页面,我们只加载了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js,以及3个配置的js文件。

再看看四个页面的html代码:

angular-tree-control效果页面

<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
      {{node.title}}
  </treecontrol>

页面上有个使用该插件对应的指令。

default页面

<div class="ng-cloak">
      {{default.value}}
  </div>

这里我们只是用来证明加载并正确执行default.js。

ng-table效果页面

<div class="ng-cloak">
    <div class="p-h-md p-v bg-white box-shadow pos-rlt">
        <h3 class="no-margin">ng-table</h3>
    </div>
    <button ng-click="ngtable.tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
    <p>
        <strong>Sorting:</strong> {{ngtable.tableParams.sorting()|json}}
    </p>
    <table ng-table="ngtable.tableParams" class="table table-bordered table-striped">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>
</div>

这里写了些简单的ng-table效果。

ui-bootstrap效果页面

<span uib-dropdown class="ng-cloak">
      <a href id="simple-dropdown" uib-dropdown-toggle>
          下拉框触发
      </a>
      <ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
          下拉框内容.这里写个效果证明实现动态加载即可
      </ul>
  </span>

这里仅写了个下拉框效果,证明正确加载并使用该插件。

好了,看完了html,我们看下加载配置和路由配置

"use strict"
var tempApp = angular.module("templateApp",["ui.router","oc.lazyLoad"])
.config(["$provide","$compileProvider","$controllerProvider","$filterProvider",
                function($provide,$compileProvider,$controllerProvider,$filterProvider){
                    tempApp.controller = $controllerProvider.register;
                    tempApp.directive = $compileProvider.directive;
                    tempApp.filter = $filterProvider.register;
                    tempApp.factory = $provide.factory;
                    tempApp.service  =$provide.service;
                    tempApp.constant = $provide.constant;
                }]);

以上代码对模块的注册,仅仅依赖了ui.router和oc.LazyLoad。配置也只是简单配置了模块,以便在后面的js能识别到tempApp上的方法。

然后我们再看看ocLazyLoad加载模块的配置

"use strict"
tempApp
.constant("Modules_Config",[
    {
        name:"ngTable",
        module:true,
        files:[
            "Scripts/ng-table/dist/ng-table.min.css",
            "Scripts/ng-table/dist/ng-table.min.js"
        ]
    },
    {
        name:"ui.bootstrap",
        module:true,
        files:[
            "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
        ]
    },
    {
        name:"treeControl",
        module:true,
        files:[
            "Scripts/angular-tree-control-master/css/tree-control.css",
            "Scripts/angular-tree-control-master/css/tree-control-attribute.css",
            "Scripts/angular-tree-control-master/angular-tree-control.js"
        ]
    }
])
.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
    $ocLazyLoadProvider.config({
        debug:false,
        events:false,
        modules:Modules_Config
    });
};

路由的配置

"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
    $urlRouterProvider.otherwise("/default");
    $stateProvider
    .state("default",{
        url:"/default",
        templateUrl:"views/default.html",
        controller:"defaultCtrl",
        controllerAs:"default",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("js/controllers/default.js");
            }]
        }
    })
    .state("uibootstrap",{
        url:"/uibootstrap",
        templateUrl:"views/ui-bootstrap.html",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("ui.bootstrap");
            }]
        }
    })
    .state("ngtable",{
        url:"/ngtable",
        templateUrl:"views/ng-table.html",
        controller:"ngTableCtrl",
        controllerAs:"ngtable",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("ngTable").then(
                    function(){
                        return $ocLazyLoad.load("js/controllers/ng-table.js");
                    }
                );
            }]
        }
    })
    .state("ngtree",{
        url:"/ngtree",
        templateUrl:"views/angular-tree-control.html",
        controller:"ngTreeCtrl",
        controllerAs:"ngtree",
        resolve:{
            deps:["$ocLazyLoad",function($ocLazyLoad){
                return $ocLazyLoad.load("treeControl").then(
                    function(){
                        return $ocLazyLoad.load("js/controllers/angular-tree-control.js");
                    }
                );
            }]
        }
    })
};

ui-bootstrap的下拉框简单的实现不需要控制器,那么我们就只看看ng-table和angular-tree-control的控制器js吧:

ng-table.js

(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
    //数据
    var data = [{ name: "Moroni", age: 50 },
                 { name: "Tiancum ", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 },
                 { name: "Tiancum", age: 43 },
                 { name: "Jacob", age: 27 },
                 { name: "Nephi", age: 29 },
                 { name: "Enos", age: 34 }];
    this.tableParams = new NgTableParams(    // 合并默认的配置和url参数
        angular.extend({
            page: 1,            // 第一页
            count: 10,          // 每页的数据量
            sorting: {
                name: 'asc'     // 默认排序
            }
        },
        $location.search())
        ,{
            total: data.length, // 数据总数
            getData: function ($defer, params) {
                $location.search(params.url()); // 将参数放到url上,实现刷新页面不会跳回第一页和默认配置
                var orderedData = params.sorting ?
                        $filter('orderBy')(data, params.orderBy()) :data;
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        }
    );
};
})();

angular-tree-control.js

(function(){
"use strict"
tempApp
.controller("ngTreeCtrl",ngTreeCtrlFn);
function ngTreeCtrlFn(){
    //树数据
    this.treeData = [
                {
                    id:"1",
                    title:"标签1",
                    childList:[
                        {
                            id:"1-1",
                            title:"子级1",
                            childList:[
                                {
                                    id:"1-1-1",
                                    title:"再子级1",
                                    childList:[]
                                }
                            ]
                        },
                        {
                            id:"1-2",
                            title:"子级2",
                            childList:[
                                {
                                    id:"1-2-1",
                                    title:"再子级2",
                                    childList:[
                                        {
                                            id:"1-2-1-1",
                                            title:"再再子级1",
                                            childList:[]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            id:"1-3",
                            title:"子级3",
                            childList:[]
                        }
                    ]
                },
                {
                    id:"2",
                    title:"标签2",
                    childList:[
                        {
                            id:"2-1",
                            title:"子级1",
                            childList:[]
                        },
                        {
                            id:"2-2",
                            title:"子级2",
                            childList:[]
                        },
                        {
                            id:"2-3",
                            title:"子级3",
                            childList:[]
                        }
                    ]}
                ,
                {
                    id:"3",
                    title:"标签3",
                    childList:[
                        {
                            id:"3-1",
                            title:"子级1",
                            childList:[]
                        },
                        {
                            id:"3-2",
                            title:"子级2",
                            childList:[]
                        },
                        {
                            id:"3-3",
                            title:"子级3",
                            childList:[]
                        }
                    ]
                }
            ];
    //树配置
    this.treeOptions = {
        nodeChildren:"childList",
        dirSelectable:false
    };
};
})();

让我们忽略default.js吧,毕竟里面只有个"Hello Wrold"。

github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo

本兽的相关文章AngularJs ui-router 路由的简单介绍  Angular 学习 -- ngRoute Angular自带的路由

AngularJs 动态加载模块和依赖的更多相关文章

  1. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  2. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  3. 黄聪:AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

  4. stevedore动态加载模块

    stevedore动态加载模块,stevedore使用setuptools的entry points来定义并加载插件.entry point引用的是定义在模块中的对象,比如类.函数.实例等,只要在im ...

  5. [driver]linux内核动态加载模块

    问题: 1. 把编译好的模块放到板子/lib/modules对应文件夹下,并且执行了depmod -a, 比如pl2303.ko, 那么下一次插入pl2303的串口线,是否可以识别,也就是自动加载pl ...

  6. angular-ui-router动态加载模块

    1.定义index.html主页,对于通用的js就不用require依赖加载了,其中main.js作为主模块,用require添加系统路由模块. <!DOCTYPE html> <h ...

  7. angularjs 动态加载事件的另一种实现

    /** 初始化酒店列表 */ function inintHotel(params,url,$http,$scope){ $http.jsonp(url).success(function(res, ...

  8. 在DLL中动态加载其所依赖的dll

    windows下LoadLibrary函数的搜索顺序是先搜索system32等系统环境变量path下注册过的路径,然后是当前路径. 这里的相对路径是指的主exe所在路径,并且相对路径在程序运行过程中可 ...

  9. Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    什么是ui-router ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建).它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的U ...

随机推荐

  1. Java核心技术点之多线程

    学习Java的同学注意了!!! 学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入Java学习交流群,群号码:279558494 我们一起学Java! 本文主要从整体上介绍Java中的多线程技术, ...

  2. 如何在github上下载单个文件夹?

    作者:ce ge链接:https://www.zhihu.com/question/25369412/answer/96174755来源:知乎著作权归作者所有,转载请联系作者获得授权. Git1.7. ...

  3. CIQRCodeGenerator Core Image Filter Reference

    https://developer.apple.com/library/prerelease/content/documentation/GraphicsImaging/Reference/CoreI ...

  4. 15.含有指针成员的类的拷贝[ClassCopyConstructorWithPointerMember]

    [题目] 下面是一个数组类的声明与实现.请分析这个类有什么问题,并针对存在的问题提出几种解决方案.  C++ Code  123456789101112131415161718192021222324 ...

  5. Chapter 6面向对象

    1.Python中预定义的函数在定义的时候有一种很特别的形式,即是函数名是小写,并且函数名前后分别有两个下划线.同样的,在对象中也有预定义的方法,例如所有对象的基类object中的__new__(), ...

  6. Flash上传文件(结合asp.net)

    一.实现原理.在某些场合,我们需要使用Flash进行“文件上传”,原因是Flash 能制作出表现力丰富的UI界面. (自负又孤陋寡闻的我在这里做一个补充:Flash使用flash.net包中的File ...

  7. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  8. [微信小程序-开发工具]快捷键

    1.进入快捷键  >  > 2.快捷键 1.元素面板 ↑↓:导航元素 →←:展开/折叠 Enter:编辑属性 H:隐藏元素 F2:切换编辑HTML 2.样式窗口 Tab/Shift + T ...

  9. UVA1153-Keep the Customer Satisfied(贪心)

    Problem UVA1153-Keep the Customer Satisfied Accept: 222  Submit: 1706Time Limit: 3000 mSec Problem D ...

  10. 利用neon技术对矩阵旋转进行加速

    一般的矩阵旋转操作都是对矩阵中的元素逐个操作,假设矩阵大小为m*n,那么时间复杂度就是o(mn).如果使用了arm公司提供的neon加速技术,则可以并行的读取多个元素,对多个元素进行操作,虽然时间复杂 ...