Désolé pour la question idiote, tout le monde sait-il comment commencer à utiliser AngularUI? Je l'ai téléchargé à partir de Github et j'ai lu les instructions dans README mais je ne comprends toujours pas ce que je dois faire.
Étapes à suivre pour intégrer:
build
)ui.directives
ou ui.filters
selon ce que vous prévoyez d’utiliser).La plupart des étapes décrites concernent à peine les dépendances JS/CSS. La seule partie "délicate" consiste à déclarer des 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 à commencer. Par exemple, l’utilisation de la directive ui-date est aussi simple que (notez le ui-date
):
<input name="dateField" ng-model="date" ui-date>
Voici l'intégralité de jsFiddle montrant comment utiliser la directive ui-date: http://jsfiddle.net/r7UJ2/11/
Vous pouvez également consulter les sources de http://angular-ui.github.com/ , où il existe des exemples en direct de toutes les directives.
A partir du 3 mai 2013, voici les étapes:
comprendre
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
enregistrer ui
angular.module('myFancyApp', ['ui.bootstrap']);
assurez-vous que myFancyApp
est identique à celui de votre <html ng-app="myFancyApp">
Laissez la magie commencer.
Je pense que ce qui manque, ce sont les plugins - vous devez ajouter les scripts de plugin jquery et css pour que certaines directives angular-ui fonctionnent. Par exemple, la directive codemirror nécessite:
<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" />
C'est une surprise pour moi que angular-ui.github.com ne mentionne pas la nécessité d'inclure des plugins.
Bonjour, j’ai écrit un article spécifiquement sur la procédure à suivre pour mettre en évidence la syntaxe de PHP). L’article est ici: http://neverstopbuilding.net/how-ttegrate-codemirror -with-angular-ui /
Le cœur de la tâche consiste à configurer correctement:
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 entier de la configuration 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 AngularUI (si vous pouvez appeler cela de la documentation ...)
Quoi qu'il en soit, j'espère que cela vous sera utile, à vous ou à d'autres.
Les instructions sont dans le fichier readme.md dans leur dépôt officiel github
Interface utilisateur angulaire
Vous pouvez également découvrir comment intégrer le fichier js angular-ui (exemple: ui-bootstrap-tpls-0.6.0.js). À la première ligne, vous remarquerez la déclaration suivante:
angular.module("ui.bootstrap", [...deps...])
Basé sur le code ci-dessus, vous devez injecter "ui.bootstrap" dans votre module.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);