AngularJs 动态加载模块和依赖  更新时间:2016年09月15日 14:18:37   作者:野兽”   这篇文章主要介绍了AngularJs 动态加载模块和依赖方法的相关资料,需要的朋友可以参考下 最近项目比较忙额,白天要上班,晚上回来还需要做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没做嵌套路由,只是简单实现单视图的路由以展示效果。 我们来看主页面的代码: 主页 ui-bootstrap ng-table angular-tree-control 在这个页面,我们只加载了bootstrap的css、angular的js、ui-router的js、ocLazyLoad的js,以及3个配置的js文件。 再看看四个页面的html代码: angular-tree-control效果页面 {{node.title}} 页面上有个使用该插件对应的指令。 default页面 {{default.value}} 这里我们只是用来证明加载并正确执行default.js。 ng-table效果页面 ng-table Clear sorting Sorting: {{ngtable.tableParams.sorting()|json}} {{user.name}} {{user.age}} 这里写了些简单的ng-table效果。 ui-bootstrap效果页面 下拉框触发 下拉框内容.这里写个效果证明实现动态加载即可 这里仅写了个下拉框效果,证明正确加载并使用该插件。 好了,看完了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动态加载模块和依赖注入详解 AngularJS动态加载模块和依赖的方法分析 详解Angular 4.x 动态创建组件 angular 动态组件类型详解(四种组件类型) Angular.js实现动态加载组件详解 AngularJs 动态加载模块 依赖 相关文章 利用CSS3在Angular中实现动画 这篇文章主要介绍了如何利用CSS3在Angular中实现动画效果,对angular动画相关知识感兴趣的朋友一起学习吧 2016-01-01 AngularJS实现进度条功能示例 这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下 2017-07-07 AngularJS实现单独作用域内的数据操作 这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴,下面来一起看看吧。 2016-09-09 Angular 多模块项目构建过程 这篇文章主要介绍了Angular 多模块项目构建过程,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2020-02-02 AngularJS入门教程之路由与多视图详解 本文主要介绍AngularJS 路由与多视图详解,这里整理了相关资料及示例代码,详细说明了在开发过程中如何应用,有兴趣的朋友可以看下 2016-08-08 浅析AngularJS Filter用法 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧 2015-12-12 Angular4学习笔记router的简单使用 本篇文章主要介绍了Angular4学习笔记router的简单使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 详解Angular6 热加载配置方案 这篇文章主要介绍了详解Angular6 热加载配置方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-08-08 详解Angular2组件之间如何通信 本篇文章主要介绍了详解Angular2组件之间如何通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 angular实现form验证实例代码 本篇文章主要介绍了angular实现form验证实例代码,具有一定的参考价值,有兴趣的可以了解一下。 2017-01-01 最新评论

最近项目比较忙额,白天要上班,晚上回来还需要做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动态加载模块和依赖注入详解
  • AngularJS动态加载模块和依赖的方法分析
  • 详解Angular 4.x 动态创建组件
  • angular 动态组件类型详解(四种组件类型)
  • Angular.js实现动态加载组件详解
张贴在3