¿Cómo integrar AngularUI a AngularJS?


79

Perdón por la pregunta tonta, ¿todos saben cómo comenzar a usar AngularUI? Lo descargué de Github y leí las instrucciones en README, pero todavía no entiendo lo que tengo que hacer.

Respuestas:


63

Pasos para integrar:

  • Incluya jQuery y jQuery-ui (mejor servido desde un CDN)
  • Incluir angular (es mejor incluirlo si es de un CDN)
  • Incluya angular-ui JS / CSS (actualmente solo alojado en el repositorio de GitHub en la buildcarpeta)
  • Incluya los complementos de jQuery para las directivas que planea usar
  • Declare las dependencias de los módulos de angular-ui ( ui.directiveso ui.filterssegún lo que planee usar).

La mayoría de los pasos descritos tratan solo de incluir dependencias JS / CSS. La única parte "complicada" es declarar dependencias en un módulo ui. *, Puede hacerlo así:

var myApp = angular.module('myApp',['ui.directives']);

Una vez que se incluyen todas las dependencias y se configura un módulo, está listo para comenzar. Por ejemplo, usar la directiva ui-date es tan simple como (observe el ui-date):

<input name="dateField" ng-model="date" ui-date>

Aquí está el jsFiddle completo que muestra cómo usar la directiva ui-date: http://jsfiddle.net/r7UJ2/11/

También es posible que desee echar un vistazo a las fuentes de http://angular-ui.github.com/ donde hay ejemplos en vivo de todas las directivas.


En realidad, el paso 1 es opcional dependiendo de las directivas que use y el paso 5 es simplemente incorrecto, ya que solo incluir ui.directivesarrojará errores cuando se ui.confighaga referencia. En su lugar, siempre debe incluir uiy simplemente eliminar las directivas / filtros que no desee.
ProLoser

Hmm, si no me equivoco el paso 5 es correcta, ya que ambos realmente ui.directivesy ui.filtersla dependencia tiene en el ui.configmódulo. Pero claro, solo podía mencionar el uimódulo.
pkozlowski.opensource

Aquí hay un ejemplo de integración de angular-ui, angular-strap, jquery y un poco más - github.com/robertjchristian/angular-enterprise-seed
Robert Christian

@martinpaulucci parece que el jsfiddle actualizado también está roto
wmitchell

Incluir jQuery fomentará la manipulación del DOM. No es el fin del mundo, pero puede disuadirlo de resolver problemas de manera angular.
RevNoah

21

A partir del 3 de mayo de 2013, estos son los pasos:

incluir

    <script src="angular.min.js"></script>
    <script src="ui-bootstrap-tpls-0.3.0.min.js"></script>

registrarse ui

    angular.module('myFancyApp', ['ui.bootstrap']);

asegúrese de que myFancyAppsea ​​el mismo que en su<html ng-app="myFancyApp">

Que comience la magia.


Y a partir de ahora, use twitter-boostrap-css v2.3.1 o algo similar y no v3.
SunnyRed

3
Estoy un poco confundido aquí. angular-ui-bootstrap y angular-ui son dos proyectos diferentes
Zach Lysobey

11

Creo que lo que faltan son los complementos: tienes que agregar los scripts del complemento jquery y css para que funcionen algunas directivas de angular-ui. Por ejemplo, la directiva codemirror necesita:

    <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" />

Es una sorpresa para mí que angular-ui.github.com no mencione la necesidad de incluir complementos.


3

Hola, escribí un artículo específicamente sobre cómo hacer esto para resaltar la sintaxis de PHP. El artículo está aquí: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/

El núcleo de las cosas es conseguir la configuración correcta:

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"; ?>';
}

Para algo como el siguiente fragmento de HTML:

<div ng-app="myApp">
    <div ng-controller="codeCtrl">
        <textarea ui-codemirror ng-model="code"></textarea>
    </div>
</div>

Puede ver el jsfiddle completo de la configuración aquí: http://jsfiddle.net/jrobertfox/RHLfG/2/

pkozlowski.opensource tiene razón, hay muchos más archivos que necesita incluir de lo que parece en la documentación de AngularUI (si puede llamarlo documentación ...)

De todos modos espero que esto sea útil para ti o para otros.


+1 por hacerme darme cuenta de que estaba inyectando el módulo incorrecto. Estaba instalando 'angular-ui' a través de bower e intentando inyectar 'ui.bootstrap'. Dos cosas distintas.
saiyancoder

1

Las instrucciones están en el archivo readme.md en su repositorio oficial de github

Interfaz de usuario angular

Alternativamente, la forma en que puede averiguar cómo integrar es abrir el archivo angular-ui js (ejemplo: ui-bootstrap-tpls-0.6.0.js) y en la primera línea, notará la siguiente declaración

angular.module("ui.bootstrap", [...deps...])

Según el código anterior, debe inyectar 'ui.bootstrap' en su módulo.

  angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);

estas son las instrucciones para Angular UI Bootstrap
Zach Lysobey
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.