interface Web
js tutoriel
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
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.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Un guide étape par étape pour comprendre l'injection de dépendances dans Angular
Dec 02, 2022 pm 09:14 PM
Cet article vous guidera à travers l'injection de dépendances, présentera les problèmes que l'injection de dépendances résout et sa méthode d'écriture native, et parlera du framework d'injection de dépendances d'Angular. J'espère qu'il vous sera utile !
Comment utiliser l'injection de dépendances (Dependency Injection) dans le framework Phalcon
Jul 30, 2023 pm 09:03 PM
Introduction à la méthode d'utilisation de l'injection de dépendances (DependencyInjection) dans le framework Phalcon : Dans le développement logiciel moderne, l'injection de dépendances (DependencyInjection) est un modèle de conception courant visant à améliorer la maintenabilité et la testabilité du code. En tant que framework PHP rapide et peu coûteux, le framework Phalcon prend également en charge l'utilisation de l'injection de dépendances pour gérer et organiser les dépendances des applications. Cet article vous présentera comment utiliser le framework Phalcon
Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise
Jun 15, 2017 pm 05:50 PM
Javascript est un langage tout à fait unique. Il est unique en termes d'organisation du code, de paradigme de programmation du code et de théorie orientée objet. La question de savoir si Javascript est un langage orienté objet a été débattue depuis un certain temps. Il y a évidemment une réponse depuis longtemps. Cependant, même si Javascript est dominant depuis vingt ans, si vous souhaitez comprendre les frameworks populaires tels que jQuery, Angularjs et même React, il suffit de regarder le « Black Horse Cloud Classroom JavaScript Advanced Framework ». Tutoriel vidéo de conception".
Modèle d'injection de dépendance dans le passage des paramètres de la fonction Golang
Apr 14, 2024 am 10:15 AM
Dans Go, le mode d'injection de dépendances (DI) est implémenté via le passage de paramètres de fonction, y compris le passage de valeurs et le passage de pointeurs. Dans le modèle DI, les dépendances sont généralement transmises sous forme de pointeurs pour améliorer le découplage, réduire les conflits de verrouillage et prendre en charge la testabilité. En utilisant des pointeurs, la fonction est découplée de l'implémentation concrète car elle ne dépend que du type d'interface. Le passage du pointeur réduit également la surcharge liée au passage d'objets volumineux, réduisant ainsi les conflits de verrouillage. De plus, le modèle DI facilite l'écriture de tests unitaires pour les fonctions utilisant le modèle DI, car les dépendances peuvent être facilement simulées.
Injection de dépendances à l'aide du framework de tests unitaires JUnit
Apr 19, 2024 am 08:42 AM
Pour tester l'injection de dépendances à l'aide de JUnit, le résumé est le suivant : Utiliser des objets fictifs pour créer des dépendances : l'annotation @Mock peut créer des objets fictifs de dépendances. Définir les données de test : la méthode @Before s'exécute avant chaque méthode de test et est utilisée pour définir les données de test. Configurer le comportement fictif : la méthode Mockito.when() configure le comportement attendu de l'objet fictif. Vérifier les résultats : assertEquals() affirme vérifier si les résultats réels correspondent aux valeurs attendues. Application pratique : vous pouvez utiliser un framework d'injection de dépendances (tel que Spring Framework) pour injecter des dépendances et vérifier l'exactitude de l'injection et le fonctionnement normal du code via les tests unitaires JUnit.
Utilisez PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité
Jun 27, 2023 pm 07:37 PM
À l’ère de l’information d’aujourd’hui, les sites Web sont devenus un outil important permettant aux individus d’obtenir des informations et de communiquer. Un site Web réactif peut s’adapter à divers appareils et offrir aux utilisateurs une expérience de haute qualité, ce qui est devenu un point chaud dans le développement de sites Web modernes. Cet article expliquera comment utiliser PHP et AngularJS pour créer un site Web réactif afin d'offrir une expérience utilisateur de haute qualité. Introduction à PHP PHP est un langage de programmation open source côté serveur idéal pour le développement Web. PHP présente de nombreux avantages, tels que la facilité d'apprentissage, la multiplateforme, la riche bibliothèque d'outils et l'efficacité du développement.
Go Language : Guide d'injection de dépendances
Apr 07, 2024 pm 12:33 PM
Réponse : En langage Go, l’injection de dépendances peut être implémentée via des interfaces et des structures. Définissez une interface qui décrit le comportement des dépendances. Créez une structure qui implémente cette interface. Injectez des dépendances via des interfaces en tant que paramètres dans les fonctions. Permet un remplacement facile des dépendances lors des tests ou dans différents scénarios.
Injection de dépendances et conteneur de services pour les fonctions PHP
Apr 27, 2024 pm 01:39 PM
Réponse : L'injection de dépendances et les conteneurs de services dans PHP aident à gérer les dépendances de manière flexible et à améliorer la testabilité du code. Injection de dépendances : faites passer les dépendances via le conteneur pour éviter la création directe au sein de la fonction, améliorant ainsi la flexibilité. Conteneur de services : stocke les instances de dépendance pour un accès facile dans le programme, améliorant encore le couplage lâche. Cas pratique : l'exemple d'application démontre l'application pratique de l'injection de dépendances et des conteneurs de services, injectant des dépendances dans le contrôleur, reflétant les avantages du couplage lâche.
