AngularJs 动态加载模块和依赖

程序员文章站 2022-05-11 13:18:44

最近项目比较忙额，白天要上班，晚上回来还需要做angular知识点的ppt给同事，毕竟年底要辞职了，项目的后续开发还是需要有人接手的，所以就占用了晚上学习的时间。本来一直不...

最近项目比较忙额，白天要上班，晚上回来还需要做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 动态加载模块和依赖的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

上一篇：华为Tecal X系列服务器为云计算而生

下一篇：百度搜索上线极光算法

AngularJs 动态加载模块和依赖

Java 动态加载jar和class文件实例解析

一个简单的动态加载js和css的jquery代码

AngularJS使用angular.bootstrap完成模块手动加载的方法分析

详解angularJs模块ui-router之状态嵌套和视图嵌套