Recently, the project is quite busy. I have to go to work during the day and come back at night and I still need to do Angular knowledge point ppt for my colleagues. After all, I will resign at the end of the year, and someone will still need to take over the subsequent development of the project, so it takes up time for study at night. I have never planned to write study notes for these third-party plug-ins, but I think it is really a benefit to load the module on demand and use it successfully, so I should record it. Because this beast has not used requireJs in depth, so this beast does not know the difference between this and requireJs, and cannot clearly explain whether this is considered Angular's on-demand loading.
In order to achieve the effect of this study 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
Without further ado, I'll get to the point...
First, let's look at the file structure:
Angular-ocLazyLoad --- demo folder Scripts --- Framework and plug-in folder angular-1.4.7 --- angular Not explain angular-ui-router --- uirouter Not explain oclazyload --- ocLazyload Not explain bootstrap --- bootstrap Not explain angular-tree-control-master --- angular-tree-control-master Not explain ng-table --- ng-table Not explain angular-bootstrap --- angular-bootstrap Not explain js --- js folder js files written for demo 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 --- route configuration and load 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 --- main page
Note: This demo does not do nested routing, it simply implements single-view routing to show the effect.
Let's look at the code of the main page:
<!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> <script src="js/route.config.js"></script></head><body><div ng-app="templateApp"> <div> <a href="#/default">Home</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>
In this page, we only load bootstrap's css, angular js, ui-router js, ocLazyLoad js, and 3 configured js files.
Let’s take a look at the html code of the four pages:
angular-tree-control effect page
<treecontrol tree-model="ngtree.treeData" options="ngtree.treeOptions"> {{node.title}} </treecontrol>There is a command on the page to use the plug-in.
default page
<div> {{default.value}} </div>Here we are just using it to prove that the loading and execute default.js correctly.
ng-table effect page
<div> <div> <h3>ng-table</h3> </div> <button ng-click="ngtable.tableParams.sorting({})">Clear sorting</button> <p> <strong>Sorting:</strong> {{ngtable.tableParams.sorting()|json}} </p> <table ng-table="ngtable.tableParams"> <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>Here are some simple ng-table effects.
ui-bootstrap effect page
<span uib-dropdown> <a href id="simple-dropdown" uib-dropdown-toggle> Pull-down box trigger</a> <ul aria-labelledby="simple-dropdown"> Pull-down box content. Write a proof of effect here to achieve dynamic loading</ul> </span>
Here is only a drop-down box effect to prove that the plug-in is loaded correctly and used.
OK, after reading the html, let’s look at the 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 relies on ui.router and oc.LazyLoad for the module registration. The configuration is simply configured to configure the module so that the subsequent js can recognize the method on tempApp.
Then let's take a look at the configuration of the ocLazyLoad load 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 });};Routing 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 drop-down box of ui-bootstrap does not require a controller, so let's only look at the 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: "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( // Merge the default configuration and url parameters angular.extend({ page: 1, // First page count: 10, // Data volume per page sorting: { name: 'asc' // Default sorting} }, $location.search()) ,{ total: data.length, // Total data getData: function ($defer, params) { $location.search(params.url()); // Put parameters on the url to refresh the page and not jump back to the first page and 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:"Child1", childList:[ { id:"1-1-1", title:"Child1", childList:[ { id:"1-1-1", title:"Child1", childList:[ { id:"1-2", title:"Child2", childList:[ { id:"1-2-1", title:"Child2", childList:[ { id:"1-2-1", title:"Child2", childList:[ { id:"1-2-1-1", title:"Child level 1", childList:[] } ] } ] }, { id:"1-3", title:"Child level 3", childList:[] } ] }, { id:"2", title:"Tag 2", childList:[ { id:"2-1", title:"Child level 1", childList:[] }, { id:"2-2", title:"Child level 2", childList:[ { id:"3-1", title:"Child1", childList:[] }, { id:"3-2", title:"Child2", childList:[] }, { id:"3-3", title:"Child3", childList:[] } ] } ]; //Tree configuration this.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 a collection of information on the AngularJS dynamic loading module and dependencies. We will continue to add relevant information in the future. Thank you for your support for this site!