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

AngularJs动态加载模块和依赖注入详解

Posted in Javascript onJanuary 11, 2016

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

首先我们看下文件结构：

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没做嵌套路由，只是简单实现单视图的路由以展示效果。

我们来看主页面的代码：

<html>
<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.register;
          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","$locationProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider,$locationProvider){
  $urlRouterProvider.otherwise("/default");
  $stateProvider
  .state("default",{
    url:"/default",
    views:{
      "":{
        templateUrl:"views/default.html",
        controller:"defaultCtrl",
        controllerAs:"default"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("js/controllers/default.js");
      }]
    }
  })
  .state("uibootstrap",{
    url:"/uibootstrap",
    views:{
      "":{
        templateUrl:"views/ui-bootstrap.html"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ui.bootstrap");
      }]
    }
  })
  .state("ngtable",{
    url:"/ngtable",
    views:{
      "":{
        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",
    views:{
      "":{
        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 vm = this;
  //数据
  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 }];
  vm.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(){
  var vm = this;
  //树数据
  vm.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:[]
            }
          ]
        }
      ];
  //树配置
  vm.treeOptions = {
   nodeChildren:"childList",
    dirSelectable:false
  };
};
})();

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

AngularJs动态加载模块和依赖注入详解

- Author -

野兽''

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

Javascript 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
jQuery拖动图片删除示例
May 10 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 #Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 #Javascript
JavaScript基础知识及常用方法总结
Jan 10 #Javascript
jQuery实现的调整表格行tr上下顺序
Jan 10 #Javascript
javascript实现checkbox复选框实例代码
Jan 10 #Javascript
基于javascript实现彩票随机数生成（升级版）
Apr 17 #Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 #Javascript
router(1) 接口(1) 抽象类(1) 乱码(3) 驱动模型(1) 分区(2) 静态压缩(1) 路由(1) 正则表达式(3) 自动播放(1)
You might like
PHP 图片文件上传实现代码
2010/12/29 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
调试PHP程序的多种方法介绍
2014/11/06 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
PHP编写简单的App接口
2016/08/28 PHP
js 三级关联菜单效果实例
2013/08/13 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
js实现随机点名
2021/01/19 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
在python中画正态分布图像的实例
2019/07/08 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
Napapijri西班牙在线商店：夹克、外套、运动衫等
2020/11/05 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
注塑工厂厂长岗位职责
2013/12/02 职场文书
2014政务公开实施方案
2014/02/19 职场文书
关于感恩的素材句子（38句）
2019/11/11 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
React更新渲染原理深入分析
2022/12/24 Javascript