Désolé pour la question stupide, est-ce que tout le monde sait comment commencer à utiliser AngularUI ? Je l'ai téléchargé depuis Github et j'ai lu les instructions dans le README mais je ne comprends toujours pas ce que je dois faire.
Réponses
Trop de publicités?
pkozlowski.opensource
Points
52557
Étapes à intégrer :
- Inclure jQuery et jQuery-ui (mieux servi par un CDN)
- Inclure angular (il est préférable de l'inclure s'il provient d'un CDN)
- Inclure angular-ui JS / CSS (actuellement uniquement hébergé dans le dépôt GitHub dans le fichier
builddossier) - Incluez tout plugin jQuery pour les directives que vous prévoyez d'utiliser.
- Déclarer des dépendances sur les modules angular-ui (
ui.directivesoui.filtersen fonction de ce que vous envisagez d'utiliser).
La plupart des étapes décrites consistent simplement à inclure les dépendances JS/CSS. La seule partie "délicate" est de déclarer les dépendances sur un module ui.*, vous pouvez le faire comme ceci :
var myApp = angular.module('myApp',['ui.directives']);Une fois que toutes les dépendances sont incluses et qu'un module est configuré, vous êtes prêt à partir. Par exemple, l'utilisation de la directive ui-date est aussi simple que (remarquez l'ajout de la directive ui-date ) :
<input name="dateField" ng-model="date" ui-date>Voici le jsFiddle complet montrant comment utiliser la directive ui-date : http://jsfiddle.net/pkozlowski_opensource/aGpNf/6/
Vous pouvez également jeter un coup d'œil aux sources de la http://angular-ui.github.com/ où il y a des exemples vivants de toutes les directives.
durilka
Points
384
En date du 3 mai 2013, voici les étapes :
inclure
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>registre ui
angular.module('myFancyApp', ['ui.bootstrap']);veillez à myFancyApp est le même que dans votre <html ng-app="myFancyApp">
Que la magie commence.
Timothy_Bone
Points
338
Je pense que ce qui manque, ce sont les plugins - il faut ajouter les scripts et les css du plugin jquery pour que certaines directives angular-ui fonctionnent. Par exemple la directive codemirror a besoin de :
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />Je suis surpris de constater qu'angular-ui.github.com ne mentionne pas la nécessité d'inclure des plugins.
Jason Fox
Points
51
Bonjour, j'ai écrit un article spécifique sur la façon de faire cela pour la coloration syntaxique de PHP. L'article est ici : http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/
L'essentiel est d'obtenir la bonne configuration :
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true
}
});
function codeCtrl($scope) {
$scope.code = '<?php echo "Hello World"; ?>';
}Pour quelque chose comme l'extrait HTML suivant :
<div ng-app="myApp">
<div ng-controller="codeCtrl">
<textarea ui-codemirror ng-model="code"></textarea>
</div>
</div>Vous pouvez voir le jsfiddle complet de la mise en place ici : http://jsfiddle.net/jrobertfox/RHLfG/2/
pkozlowski.opensource a raison, il y a beaucoup plus de fichiers à inclure qu'il n'y paraît dans la documentation d'AngularUI (si on peut appeler ça de la documentation...).
En tout cas, j'espère que cela vous sera utile, à vous ou à d'autres.
uhsarp
Points
517
Les instructions se trouvent dans le fichier readme.md de leur dépôt officiel sur github.
Une autre façon de savoir comment l'intégrer est d'ouvrir le fichier js d'angular-ui (exemple : ui-bootstrap-tpls-0.6.0.js) et dans la première ligne, vous remarquerez l'instruction suivante
angular.module("ui.bootstrap", [...deps...])Sur la base du code ci-dessus, vous devez injecter 'ui.bootstrap' dans votre module.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);
