English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Le projet est très occupé récemment, il faut travailler pendant la journée et faire des présentations PowerPoint sur les points de savoir Angular pour les collègues le soir. Après tout, je vais démissionner à la fin de l'année, et la développement ultérieur du projet doit être pris en charge par quelqu'un d'autre, donc j'ai utilisé le temps d'apprentissage le soir. J'avais initialement l'intention de ne pas écrire de notes d'apprentissage sur ces plugins tiers, mais je pense que charger les modules à la demande et les utiliser avec succès est vraiment un bon point, donc je l'ai enregistré. Comme je n'ai pas utilisé profondément requireJs, je ne sais pas quelle est la différence entre cela et requireJs, et je ne peux pas expliquer clairement s'il s'agit vraiment de la charge à la demande d'Angular.
Pour réaliser l'effet des points de savoir de cette note d'apprentissage, nous devons utiliser :
angular:https://github.com/angular/angular.js
ui-router:https://github.com/angular-ui/ui-router
ocLazyLoad:https://github.com/ocombe/ocLazyLoad
Ne pas perdre de temps, entrer dans le sujet principal...
Tout d'abord, regardons la structure des fichiers :
Angular-ocLazyLoad --- Dossier demo
Scripts --- Dossier du cadre et du plugin
angular-1.4.7 --- angular n'a pas besoin d'explication
angular-ui-router --- uirouter n'a pas besoin d'explication
oclazyload --- ocLazyload n'a pas besoin d'explication
bootstrap --- bootstrap n'a pas besoin d'explication
angular-tree-control-master --- angular-tree-control-master n'a pas besoin d'explication
ng-table --- ng-table n'a pas besoin d'explication
angular-bootstrap --- angular-bootstrap n'a pas besoin d'explication
js --- Dossier js pour le demo écrit js
controllers --- Dossier du contrôleur de page
angular-tree-control.js --- angular-tree-Code du contrôleur control
default.js --- Code du contrôleur default
ng-table.js --- ng-Code du contrôleur table
app.config.js --- Code d'enregistrement et de configuration du module
oclazyload.config.js --- Code de configuration du module de chargement
route.config.js --- Configuration du routing et du code de chargement
views --- Dossier de page html
angular-tree-control.html --- angular-tree-Page d'effet du plugin control
default.html --- default page
ng-table.html --- ng-Page d'effet du plugin table
ui-bootstrap.html --- Page d'effet du plugin uibootstrap
index.html --- Page principale
Attention : ce demo n'a pas de routing imbriqué, il ne s'agit que d'une simple implémentation de routing de vue unique pour montrer l'effet.
Regardons le code de la page d'accueil :
<!DOCTYPE html>
<html lang="fr" 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">page d'accueil</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, and3js files configured.
Let's take a look at the HTML code of the four pages:
angular-tree-control page
<treecontrol tree-model="ngtree.treeData" class="tree"-classic ng-cloak" options="ngtree.treeOptions">
{{node.title}}
</treecontrol>
There is a directive corresponding to the plugin on the page.
default page
<div class="ng"-cloak">
{{default.value}}
</div>
We just use it to prove that default.js is loaded and executed correctly.
ng-page with table effects
<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>/button>
<p>
<strong>Sorting:</strong>/<strong> {{ngtable.tableParams.sorting()|json}}</strong>
</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 effects.
ui-page with bootstrap effects
<span uib"-dropdown class="ng"-cloak">
<a href id="simple"}}-dropdown" uib-dropdown-toggle>
Déclencheur de la liste déroulante
</a>
<ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
Contenu de la liste déroulante. Ici, écrivons un effet pour prouver que le chargement dynamique est mis en œuvre.
</ul>
</span>
Ici, il n'est écrit qu'un effet de liste déroulante pour prouver que le plugin est correctement chargé et utilisé.
Bien, après avoir regardé l'html, regardons la configuration de chargement et la configuration de routage :
"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;
]);
Le code ci-dessus pour l'enregistrement du module dépend uniquement de ui.router et oc.LazyLoad. La configuration ne fait que configurer simplement le module, afin que les méthodes sur tempApp puissent être reconnues dans les js ultérieurs.
Puis, regardons la configuration de chargement des modules 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-Pour une implémentation simple du menu déroulant de bootstrap sans contrôleur, regardons ng-Table et angular-tree-Controlleur js pour :
ng-table.js
(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
//Données
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( // Fusionner la configuration par défaut et les paramètres de l'URL
angular.extend({
page: 1, // Première page
count: 10, // Nombre de données par page
sorting: {
name: 'asc' // Tri par défaut
}
},
$location.search())
,{
total: data.length, // Nombre total des données
getData: function ($defer, params) {
$location.search(params.url()); // Mettre les paramètres dans l'URL pour éviter de revenir à la première page et la configuration par défaut lors du rafraîchissement de la page
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 World"。
github url : https://github.com/Program-Monkey/Angular-ocLazyLoad-Demo
以上就是对AngularJS动态加载模块和依赖的资料整理，后续将继续补充相关资料，谢谢大家对本站的支持！
声明：本文内容来源于网络，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#更换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）