Home > Developer > JavaScript
AngularJs dynamic loading module and dependency Injection
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:
<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.register; 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","$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"); } ); }] } })};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) {var vm = this; // 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: "nos", 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}]; vm. 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 () {var vm = this; // tree data vm. 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 the vm in the tree. treeOptions = {nodeChildren: "childList", dirSelectable: false };};})();Let's ignore default. js. After all, there is only "Hello Wrold" in it ".
The above is all the content of this article, hoping to help you learn.
Articles you may be interested in:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
