web-dev-qa-db-fra.com

Comment intégrer AngularUI à AngularJS?

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.

angularjsangular-ui
79
user1679336

Étapes à suivre pour intégrer:

  • Inclure jQuery et jQuery-ui (mieux servi à partir d'un CDN)
  • Include angular (il est préférable d'inclure si d'un CDN)
  • Inclure angular-ui JS/CSS (actuellement hébergé uniquement dans le référentiel GitHub du dossier build)
  • Incluez tous les plugins jQuery pour les directives que vous prévoyez d'utiliser
  • Déclarez les dépendances sur les modules angular-ui (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.

63
pkozlowski.opensource

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.

21
durilka

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.

11
spracketchip

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.

3
user945747

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',.....]);
1
user6123723