English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The project has been quite busy recently. I have to work during the day and make PPTs on Angular knowledge points for my colleagues in the evening. After all, I will resign at the end of the year, and someone needs to take over the follow-up development of the project. That's why I have been using my evening study time. I had no intention of writing a learning note on these third-party plugins, but I think it's beneficial to load modules on demand and use this successfully, so I decided to record it. Since I haven't used requireJs deeply, I'm not sure what the difference is between this and requireJs, and I can't clearly explain whether this counts as Angular's on-demand loading.
In order to achieve the effect of the knowledge points in this learning note, 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 waste words, let's get to the point...
First, let's take a look at the file structure:
Angular-ocLazyLoad --- demo folder
Scripts --- Framework and plugin folder
angular-1.4.7 --- angular does not need explanation
angular-ui-router --- uirouter does not need explanation
ocLazyLoad --- ocLazyload does not need explanation
bootstrap --- bootstrap does not need explanation
angular-tree-control-master --- angular-tree-control-master does not need explanation
ng-table --- ng-table does not need explanation
angular-bootstrap --- angular-bootstrap does not need explanation
js --- js folder JS files written for the 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 --- Loading module configuration code
route.config.js --- Routing configuration and loading code
views --- html page folder
angular-tree-control.html --- angular-tree-control plugin effect page
default.html --- default page
ng-table.html --- ng-table plugin effect page
ui-bootstrap.html --- uiBootstrap plugin effect page
index.html --- Homepage
Note: This demo does not do nested routing, it simply implements single-view routing to demonstrate the effect.
Let's take a look at the code on the homepage:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"-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">home page</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>
On this page, we only loaded bootstrap's css, angular's js, ui-router's js, ocLazyLoad's js, and3configuration js file.
Let's take a 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 an instruction corresponding to the plugin used on the page.
default page
<div class="ng-cloak">
{{default.value}}
</div>
We just use this to prove that default.js is loaded and executed correctly.
ng-table effect page
<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="[#1#]" sortable="'name'">
{{user.name}}
</td>
<td data-title="[#2#]" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
</div>
Here are some simple ng-table effect.
ui-bootstrap effect page
<span uib-dropdown class="ng-cloak">
<a href id="simple"}}-dropdown" uib-dropdown-toggle>
Dropdown trigger
</a>
<ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple"-dropdown">
Dropdown content. Here write an effect to prove that dynamic loading is implemented.
</ul>
</span>
Here, only a dropdown effect is written to prove that the plugin is loaded and used correctly.
Alright, now that we've seen 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 for module registration only depends on ui.router and oc.LazyLoad. The configuration is also just a simple configuration of the module, so that the methods on tempApp can be recognized in the following js.
Then let's take a look at the configuration of the ocLazyLoad 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
});
};
The configuration of routing:
"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 dropdown implementation without controller is simple, so let's just look at ng-table and angular-tree-control's controller JS, right?
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 default configuration and URL parameters
angular.extend({
page: 1, // First page
count: 10, // Number of data per page
sorting: {
name: 'asc' // Default sorting
}
},
$location.search())
,{
total: data.length, // Total number of data
getData: function ($defer, params) {
$location.search(params.url()); // Place parameters in the URL to prevent the page from jumping back to the first page and default settings
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:"Label"1"
childList:[
{
id:""1-1"
title:"Child Level"1"
childList:[
{
id:""1-1-1"
title:"Sub-sub-level"1"
childList:[]
}
]
},
{
id:""1-2"
title:"Child Level"2"
childList:[
{
id:""1-2-1"
title:"Sub-sub-level"2"
childList:[
{
id:""1-2-1-1"
title:"Sub-level"1"
childList:[]
}
]
}
]
},
{
id:""1-3"
title:"Child Level"3"
childList:[]
}
]
},
{
id:""2"
title:"Label"2"
childList:[
{
id:""2-1"
title:"Child Level"1"
childList:[]
},
{
id:""2-2"
title:"Child Level"2"
childList:[]
},
{
id:""2-3"
title:"Child Level"3"
childList:[]
}
}]
,
{
id:""3"
title:"Label"3"
childList:[
{
id:""3-1"
title:"Child Level"1"
childList:[]
},
{
id:""3-2"
title:"Child Level"2"
childList:[]
},
{
id:""3-3"
title:"Child Level"3"
childList:[]
}
]
}
];
//Tree Configuration
this.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
};
};
})();
Let's ignore default.js, after all, it only contains 'Hello World'.
github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
This is the summary of the materials on dynamic loading of AngularJS modules and dependencies. We will continue to supplement relevant materials and thank everyone for your support to this site!
Statement: The content of this article is from the network, the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report any violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.