Maison > Article > interface Web > Modules AngularJs chargés dynamiquement et explication détaillée de l'injection de dépendances_AngularJS
Modules AngularJs chargés dynamiquement et explication détaillée de l'injection de dépendances_AngularJS
- WBOYoriginal
- 2016-05-16 15:20:391434parcourir
Sans plus attendre, entrons dans le vif du sujet...
Jetons d’abord un coup d’œil à la structure des fichiers :
Angular-ocLazyLoad --- demo文件夹
Scripts --- 框架及插件文件夹
angular-1.4.7 --- angular 不解释
angular-ui-router --- uirouter 不解释
oclazyload --- ocLazyload 不解释
bootstrap --- bootstrap 不解释
angular-tree-control-master --- angular-tree-control-master 不解释
ng-table --- ng-table 不解释
angular-bootstrap --- angular-bootstrap 不解释
js --- js文件夹 针对demo写的js文件
controllers --- 页面控制器文件夹
angular-tree-control.js --- angular-tree-control控制器代码
default.js --- default控制器代码
ng-table.js --- ng-table控制器代码
app.config.js --- 模块注册及配置代码
oclazyload.config.js --- 加载模块配置代码
route.config.js --- 路由配置及加载代码
views --- html页面文件夹
angular-tree-control.html --- angular-tree-control插件的效果页面
default.html --- default页面
ng-table.html --- ng-table插件效果页面
ui-bootstrap.html --- uibootstrap插件效果页面
index.html --- 主页面
Remarque : cette démo n'implémente pas le routage imbriqué, mais implémente simplement le routage à vue unique pour montrer l'effet.
Regardons le code de la page principale :
<html>
<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>
</head>
<body>
<div ng-app="templateApp">
<div>
<a href="#/default">主页</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>
Sur cette page, nous avons chargé uniquement le CSS de bootstrap, le js d'angular, le js de ui-router, le js d'ocLazyLoad et 3 fichiers js configurés.
Jetez un autre oeil aux codes html des quatre pages :
Page d'effet de contrôle d'arbre angulaire
<treecontrol tree-model="ngtree.treeData" class="tree-classic ng-cloak" options="ngtree.treeOptions">
{{node.title}}
</treecontrol>
Il y a des instructions pour utiliser le plug-in sur la page.
page par défaut
<div class="ng-cloak">
{{default.value}}
</div>
Ici, nous l'utilisons simplement pour prouver que default.js est chargé et exécuté correctement.
Page d'effet ng-table
<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="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
</div>
Voici quelques effets simples de ng-table.
Page d'effet ui-bootstrap
<span uib-dropdown class="ng-cloak">
<a href id="simple-dropdown" uib-dropdown-toggle>
下拉框触发
</a>
<ul class="uib-dropdown-menu dropdown-menu" aria-labelledby="simple-dropdown">
下拉框内容.这里写个效果证明实现动态加载即可
</ul>
</span>
Seul un effet de liste déroulante est écrit ici pour prouver que le plug-in est chargé et utilisé correctement.
Bon, après avoir lu le code HTML, jetons un œil à 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.register;
tempApp.filter = $filterProvider.register;
tempApp.factory = $provide.factory;
tempApp.service =$provide.service;
tempApp.constant = $provide.constant;
}]);
Le code ci-dessus s'appuie uniquement sur ui.router et oc.LazyLoad pour enregistrer le module. La configuration n'est qu'une simple configuration du module afin que les js suivants puissent reconnaître les méthodes sur tempApp.
Jetons ensuite un œil à la configuration du module de chargement 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
});
};
Configuration du routage :
"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");
}
);
}]
}
})
};
L'implémentation simple de la liste déroulante de ui-bootstrap ne nécessite pas de contrôleur, regardons donc simplement le contrôleur js de ng-table et angulaire-tree-control :
ng-table.js
(function(){
"use strict"
tempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
var vm = this;
//数据
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 }];
vm.tableParams = new NgTableParams( // 合并默认的配置和url参数
angular.extend({
page: 1, // 第一页
count: 10, // 每页的数据量
sorting: {
name: 'asc' // 默认排序
}
},
$location.search())
,{
total: data.length, // 数据总数
getData: function ($defer, params) {
$location.search(params.url()); // 将参数放到url上，实现刷新页面不会跳回第一页和默认配置
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;
//树数据
vm.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:[]
}
]
}
];
//树配置
vm.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
};
};
})();
Ignorons default.js, après tout il n'y a que "Hello Wrold" dedans.
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Modèle de compte à rebours d'horloge électronique JavaScript 2_compétences javascriptArticle suivant：Modèle de compte à rebours d'horloge électronique JavaScript 2_compétences javascript
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript