AngularJs dynamic loading module and dependency, angularjs Module

AngularJs dynamic loading module and dependency, angularjs Module

Recently, my project is busy. I have to go to work during the day and give my colleagues a ppt on Angular knowledge point when I come back at night. After all, I have to resign at the end of the year. I still need someone to take over the project's subsequent development, therefore, it takes up the night's learning time. I have never planned to write Study Notes for these third-party plug-ins, but I think it is really a benefit to load modules on demand and use them successfully. Let's record them. Therefore, this animal does not know the difference between requireJs and requireJs, and it cannot be clearly stated that this is not an Angular on-demand load.

To achieve the effect of this learning note knowledge point, we need to use:

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

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

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

Not to mention nonsense. Go to the topic...

First, let's look at the file structure:

Angular-ocLazyLoad --- demo folder Scripts --- framework and plug-in folder angular-1.4.7 --- angular does not explain angular-ui-router --- uirouter does not explain oclazyload --- ocLazyload does not explain bootstrap --- bootstrap does not explain angular- tree-control-master --- angular-tree-control-master does not explain ng-table --- ng-table does not explain angular-bootstrap --- angular-bootstrap does not explain js --- js folder writes to demo the js file controllers --- page controller folder angular-tree-control.js --- angular-tree-control controller code default. js --- default controller code ng-table.js --- ng-table controller code app. config. js --- module registration and configuration code oclazyload. config. js --- load module configuration code route. config. js --- routing configuration and Loading Code views --- html page folder angular-tree-control.html --- angular-tree-control plug-in effect page default.html --- default page ng-table.html --- ng-table plug-in effect page ui-bootstrap.html --- uibootstrap plug-in effect page index.html --- Home Page

Note: This demo does not use nested routing, but simply implements a single-view routing to demonstrate the effect.

Let's look at the code on the home page:

<! DOCTYPE html> 
On this page, we only load bootstrap css, angular js, ui-router js, ocLazyLoad js, and three configured js files.
Let's look at the html code of the four pages:
Angular-tree-control effect page
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">   {{node.title}} </treecontrol>
There is a command for using this plug-in on the page.
Default Page
<div class="ng-cloak">   {{default.value}} </div>
Here we just use it to demonstrate loading and correctly executing default. js.
Ng-table effect page
<div class="ng-cloak">  <div class="p-h-md p-v bg-white box-shadow pos-rlt">    

Here we have written some simple ng-table effects.
Ui-bootstrap effect page
<Span uib-dropdown class = "ng-cloak"> <a href id = "simple-dropdown" uib-dropdown-toggle> triggered by the drop-down box </a> <ul class =" uib-dropdown-menu "aria-labelledby =" simple-dropdown "> drop-down box content. here we will write a proof of effect to achieve dynamic loading </ul> </span>
Only a drop-down box effect is provided here, which proves that the plug-in is correctly loaded and used.
Now, after reading html, let's take a look at loading configuration and routing configuration:
"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;        }]);
The above Code only depends on ui. router and oc. LazyLoad for module registration. The configuration is just a simple configuration module, so that later js can identify the methods on tempApp.
Then let's take a look at the configuration of the ocLazyLoad loading module:
"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  });};
Route Configuration:
"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");          }        );      }]    }   })};
The simple implementation of the ui-bootstrap drop-down box does not require controllers, so let's just look at controller js of ng-table and angular-tree-control:
Ng-table.js
(Function () {"use strict" tempApp. controller ("ngTableCtrl", ["$ location", "NgTableParams", "$ filter", ngTableCtrlFn]); function ngTableCtrlFn ($ location, NgTableParams, $ filter) {// data var data = [{name: "Moroni", age: 50 },{ name: "Tiancum", age: 43 },{ name: "Jacob ", age: 27 },{ name: "Nephi", age: 29 },{ name: "nos", age: 34 },{ name: "Tiancum", age: 43 },{ name: "Jacob", age: 27 },{ name: "Nephi ", Age: 29 },{ name:" enose ", age: 34 },{ name:" Tiancum ", age: 43 },{ name:" Jacob ", age: 27 },{ name: "Nephi", age: 29 },{ name: "nos", age: 34 },{ name: "Tiancum", age: 43 }, {name: "Jacob", age: 27 },{ name: "Nephi", age: 29 },{ name: "nos", age: 34}]; this. tableParams = new NgTableParams (// merge the default configuration with the url parameter angular. extend ({page: 1, // count: 10 on the first page, // sorting: {name: 'asc' // Default sorting}, $ location. search (), {total: data. length, // total data getData: function ($ defer, params) {$ location. search (params. url (); // place the parameter on the url, so that the refresh page will not jump back to the first page and the default configuration 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 () {// tree data this. treeData = [{id: "1", title: "tag1", childList: [{id: "1-1", title: "Sublevel 1", childList: [{id: "1-1-1", title: "Sublevel 1", childList: []}, {id: "1-2", title: "sublevel 2", childList: [{id: "1-2-1", title: "sublevel 2", childList: [{id: "1-2-1-1", title: "Sublevel 1", childList: []}, {id: "1-3", title: "Sub-Level 3", childList: []}, {id: "2", title: "tag 2", childList: [{id: "2-1 ", title: "Sublevel 1", childList: []}, {id: "2-2", title: "sublevel 2", childList: []}, {id: "2-3", title: "Sub-Level 3", childList: []}, {id: "3", title: "tag 3", childList: [{id: "3-1", title: "Sub-Level 1", childList: []}, {id: "3-2", title: "sublevel 2", childList: []}, {id: "3-3", title: "Sublevel 3", childList: []}]; // configure this in the tree. treeOptions = {nodeChildren: "childList", dirSelectable: false };};})();
Let's ignore default. js. After all, there is only "Hello Wrold" in it ".
Github url: https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
The above is to sort out AngularJS Dynamic Loading modules and dependencies. We will continue to add relevant materials in the future. Thank you for your support for this site!