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.
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:
Pasos para integrar:
buildcarpeta)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.
ui.directivesy ui.filtersla dependencia tiene en el ui.configmódulo. Pero claro, solo podía mencionar el uimódulo.
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.
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.
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.
Las instrucciones están en el archivo readme.md en su repositorio oficial de github
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',.....]);
ui.directivesarrojará errores cuando seui.confighaga referencia. En su lugar, siempre debe incluiruiy simplemente eliminar las directivas / filtros que no desee.