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.
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.directivesarrojará errores cuando seui.confighaga referencia. En su lugar, siempre debe incluiruiy simplemente eliminar las directivas / filtros que no desee.ui.directivesyui.filtersla dependencia tiene en elui.configmódulo. Pero claro, solo podía mencionar eluimó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.
fuente
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.
fuente
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.
fuente
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',.....]);fuente