首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJs 动态加载模块和依赖

Posted in Javascript onSeptember 15, 2016

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

AngularJs 动态加载模块和依赖

- Author -

野兽''

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中的作用域scope介绍
Dec 28 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 #Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 #Javascript
js点击按钮实现水波纹效果代码（CSS3和Canves）
Sep 15 #Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 #Javascript
Bootstrap精简教程中秋大放送
Sep 15 #Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 #Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 #Javascript
子查询(1) 组策略(1) Windows server 2012(17) nginx(76) 日志格式分析(1) el-table(1) create(1) TableField(1) mounted(1) Mybatis-Plus(3)
You might like
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
教师实习的自我鉴定
2013/10/26 职场文书
财务会计应届生求职信
2013/11/24 职场文书
教师节商场活动方案
2014/02/13 职场文书
家长写给孩子的评语
2014/04/18 职场文书
干部个人对照检查材料
2014/08/25 职场文书
社区创先争优承诺书
2014/08/30 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
简单租房协议书
2014/10/21 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Nginx进程管理和重载原理详解
2021/04/22 Servers
python神经网络编程之手写数字识别
2021/05/08 Python