La idea central de Angular es conducir todo a través de los datos, y todo lo demás es una extensión de los datos.
Para aplicar la idea de que todo es un objeto, se puede decir en Angular que todo es datos.
Acerca de la construcción del proyecto
(1) Requerir JS y Yeoman
Cuando llegue o use Angular por primera vez, siempre estará desconcertado con preguntas similares. Mi respuesta práctica es que no necesitas necesidades o yeoman. El primero no se usa porque Angular mismo tiene la implementación del módulo. Esto último se debe a que la estructura organizacional angular y la construcción del proyecto son completamente innecesarios para ser tan complicados. Simplemente escriba o tira de un proyecto de semillas en GitHub.
(2) Cómo organizar la estructura del proyecto
Este problema es un poco inútil porque varía completamente de persona a persona a otra. Personalmente recomiendo dos estructuras organizativas, una según la función del código, es decir, el controlador se coloca en una carpeta y los servicios se colocan en una carpeta. El otro sigue las funciones implementadas. Por ejemplo, el usuario coloca la plantilla, los servicios y los controladores correspondientes en la carpeta de usuario.
Ambos están bien, y desde una perspectiva de mantenimiento, el segundo será mejor.
(3) División de controlador y servicio
Aquí, los controladores suelen ser un controlador en una página. Si una página tiene una parte común, la parte pública siempre usa un controlador. El servicio debe dividirse en dos partes, uno es un servicio que interactúa con los datos del servidor, y el otro es un contenido común funcional, que coloca algunos servicios reutilizables escritos por ellos mismos, similar a notificar, etc.
En cuanto a si el servicio debe dividirse más de acuerdo con funciones y módulos, depende del proyecto.
(4) Uso de complementos angulares y bibliotecas
Definitivamente no es realista que un proyecto se prepare en línea, pero es aún más poco realista escribir todo usted mismo. El equipo Angular o algunas personas encapsuladas con complementos jQuery desarrollan muchos complementos en Angular. Mi vista sobre los complementos es muy simple. Si los usa, puede usarlos lo antes posible. Si no puede satisfacer las necesidades, puede escribirlas usted mismo o mejorarlas en los complementos existentes.
Para complementos que no puede manejar durante unas horas de depuración, escuche mis consejos y renuncie a ellos. La mayoría de los complementos son complementos de interfaz de usuario, por lo que no tiene que seguir la complejidad. A veces, los controles simples de HTML también tienen su propia belleza simple.
Si encuentra conflictos de complementos angulares, especialmente complementos de UI, debe renunciar a uno de ellos en la mayoría de los casos, como Angular-UI y Angular Strap.
Consejos de uso
Al ingresar al texto principal a continuación, enumeraré algunas de las técnicas que utilicé en el proceso de uso de Angular, y las enumeraré una por una en forma de escena. No explicaré algunos conceptos básicos de Angular aquí. Este artículo es algo hábil, no un tutorial básico.
(1) Conflicto de matraz entre "{{}}" en Angular y Python
En la plantilla utilizada por el matraz de Python, la unión de datos también se pasa a través de dos aparatos "{", que entra en conflicto con la unión de datos de Angular. Hay dos soluciones a esto. Una es modificar la marca de unión de Angular, y la otra es modificar la marca de unión del matraz. Ambas soluciones se dan aquí.
Modificar angular:
$ interpolateProvider.startSymbol ('{[{'). Endsymbol ('}]}');
// Simplemente agregue esta oración a la configuración y colóquela en el módulo de ruta. Aquí cambia el Angular original {{}} vinculante a {[{}]} vinculante a {[{}]} vinculante.
Modificar el matraz:
class CustomFlask (Flask): jinja_options = frask.jinja_options.copy () jinja_options.update (dict (block_start_string = '{%', block_end_string = '%}', variable_start_string = '', variable_end_string = '#}', comentario_sstreing comment_end_string = '#>',)) app = customFlask (__ name__, instance_path = '/web')Aquí recomiendo modificar el matraz, porque después de usar Angular, los extremos delanteros y traseros están separados. La plantilla Jinjia de Flask ya no es necesaria. Al mismo tiempo, si modifica la etiqueta de enlace angular, otros controles y bibliotecas tendrán problemas.
(2) Eliminar la URL siempre es predeterminada a "#"
Al configurar la ruta, habilite el modo HTML5.
Angular.module ('Router', ['ngroute']). config (['' rututeprovider ',' $ ubationProvider ', function ($ rututeprovider, $ ubationProvider) {$ ubationProvider.html5mode (true); // establece esta oración}]);(3) ng-click = "expresión" y instrucciones similares, ¿cómo escribir expresiones múltiples en la expresión?
Por ejemplo, si quiero asignar valores a 2 variables en un clic ng, puedo dividirlo a través del ";" punto y coma:
<a ng-click = "obja = 1; objb = 2"> </a>
(4) $ Watch no tiene efecto o solo entra en efecto una vez
En términos generales, esta situación aparecerá al escuchar una cadena o número, $ alcance. $ Watch ("Nombre", function () {}). No entra en efecto o solo entra en efecto una vez. La solución es que $ Watch escucha un objeto tanto como sea posible, y adjunte el valor que desea escuchar en un objeto.
Cuando usas modal en angular-ui, esto es más obvio. La razón específica se debe a la herencia de $ alcance. Debido a que el modal es equivalente a crear otro alcance en el controlador de la página actual, es imposible recuperar y rastrear la cadena prototipo para literales. Si desea resolverlo, debe tener un objeto para lograr la vinculación de actualización de datos a través del alcance parent-hijo a través de la cadena de prototipos.
(5) Espero que el contenido de NG-View se muestre en toda la página
Por lo general, una página puede haber fijado el menú superior o la barra lateral, tales piezas fijas, y luego cada ruta cambia la plantilla de View Ng. Si una página quiere que la página completa se muestre por completo, no incluye piezas fijas como el menú superior.
Aquí generalmente hay una plantilla.html que se muestra por un index.html y una visión ng. Menu superior y barra lateral se encuentran en index.html. Su pantalla se oculta al unir una variable a un NG-II.
Si una página debe mostrarse completamente por sí misma y no muestra una barra lateral, entonces se envía un mensaje en su controlador a través de $ Scope. $ Emit, y el controlador de la página de índice escucha el mensaje a través de $ alcance. $ On. Una vez que se escucha el mensaje, se cambian las variables que controlan la barra lateral visible y oculta.
También puede utilizar el servicio para controlar una variable global, y las recomendaciones personales aún se realizan a través de la transmisión de mensajes.
(6) Recuerde usar NG-IF en lugar de Ng-Show
Este es un pequeño pozo de angular, o se puede decir que es un pozo que no es grande o pequeño. Algunos datos de lista larga se pueden mostrar de forma predeterminada oculta y haciendo clic para mostrar. Esta parte del contenido que puede controlar lo visible y oculto también estará acompañada de una gran cantidad de enlace de datos. Esto afecta en gran medida el rendimiento al representar la página.
Tome una lista. Por ejemplo, Angular generalmente recomienda que una página no tenga más de 2,000 datos de enlace de datos. Si hay una página que une directamente a 2,000 modelos, y luego la carga, encontrará que está muy atascada. Si establece cada 100 modelos en NG-Show, no se muestra de forma predeterminada, encontrará que todavía está muy atascado.
Luego, reemplaza todo Ng-Show con NG-IF, y encontrará que el rendimiento es instantáneamente rápido como dos aplicaciones. La razón es que NG-Show aún ejecutará todos los enlaces, y NG-IF ejecutará enlaces cuando sea igual a verdadero, es decir, ejecutará los enlaces cuando se muestre. Esto mejorará enormemente el rendimiento. Utilicé esta modificación simple antes, y la página se cargó unas 10 veces más rápido.
Entonces, cuando pueda usar NG-IF, úselo en lugar de todo Ng-Show y Ng Hide.
(7) Acerca de NG-Bind-HTML
Por lo general, los datos están vinculados a elementos HTML, y Ng unión es suficiente, pero en algunas situaciones, lo que debe estar vinculado no son datos ordinarios, sino HTML. Entonces Ng-Bind no es suficiente. Debe usar NG-Bind-HTML, que generará el contenido como formato HTML. Por ejemplo, si desea emitir HTML con clase, use NG-Bind-HTML, y se requiere la cooperación de NGSanitize, y el archivo correspondiente debe introducirse.
(8) Obtenga el resultado después del filtro de datos NG-Repeat
Esto se usa generalmente al buscar, como múltiples datos de repetición de Ng que forman una lista. Luego filtre un campo, y ahora necesita obtener el resultado después del filtro, hay 2 maneras.
Uno está escrito en html ng-repeat como este:
ng-repeat = "Food in FoodCategory._displayfoods = (FoodCategory.foods | Filter: {'Name': SearchObj.foodfilter} | Orderby: Food.sort_order)"
De esta manera, _displayfoods es el resultado final de la pantalla después del filtro. Otra forma es usar dos conjuntos de datos, un conjunto está escrito en el controlador y luego se operan el filtro y el orden en el controlador. El resultado final se usa para repetir.
El primer método es más conveniente, mientras que el segundo método es mejor y el rendimiento es bueno.
(9) El estilo Ng de clase y estilo NG asigna valores mediante la juicio
Determine si aplicar una determinada clase y diferentes estilos en función del valor de la variable.
ng-class = "{'State-error':! FoodForm.foodstock. $ Valid}"
ng-style = "{color: i.color == '' '|| i.name ==' live '?' predeterminado ':' #ffff '}"
(10) La verificación de formulario toma la entrada como ejemplo
La forma angular se puede verificar a través del atributo HTML5 de la entrada. Aquí, se bloquea principalmente a través del formulario y los atributos del nombre de entrada. FormName.InputName. $ Valid indica si el espacio donde el nombre es InputName pasa su propia verificación de atributos.
(11) $ promesa por $ recursos y $ http
$ Q.ALL ([[Resource.Query (). $ Promise, Resource2.Query (). $ prometía]). Entonces (Functon (Success) {Console.log (Success);}, Functon (Error) {console.log (error);}); foodfactory.food.save (f). $ promet.then (function (resultado) { FoodFactory.food.get ({id: result.id}). $ promet.then (function (data) {});});Esto no se explica, solo léelo directamente. Tenga en cuenta que la promesa de $ HTTP debe devolverse manualmente, por lo que, en general, pasa $ recursos.
(12) Solo una propiedad en el precio de $ escucha para
Establezca el tercer parámetro de $ reloj en el reloj verdadero a profundo. Sin embargo, a veces no desea ni necesita escuchar todas las propiedades de la colección. Simplemente monitoree uno o varios de ellos, aunque puede hacer un bucle $ observar a través del bucle for, obviamente es demasiado frustrante.
A través del siguiente método de escritura, puede monitorear una propiedad de un solo objeto de una colección.
$scope.people = [ { "groupname": "g1", "persions": [ { "id": 1, "name": "bill" }, { "id": 2, "name": "bill2" } ] }, { "groupname": "g2", "persions": [ { "id": 3, "name": "bill3" }, { "id": 4, "name": "Bill4" "}]}] $ Scope. $ Watch (function ($ scope) {return $ scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name});});}, function (newval) {$ scope.count ++; $ scope.msg = 'persona fue el nombre de la persona fue cambiado' verdadero);(13) Tratamiento anti-Shake de desbloqueo
Esto es muy útil para el procesamiento de salida frecuente y es adecuado para algunos escenarios como Ng-Change y $ Watch. Por ejemplo, cuando se elimina la búsqueda de palabras clave, $ debsione se encapsula como un servicio, y la interfaz se llama directamente. Código: http://jsfiddle.net/warspawn/6k7kd/
(14) se ubique rápidamente en una ubicación
En términos generales, la página se puede combinar con el código JS para lograr una posición rápida a través del formulario <a id = "Bottom"> </a>. En Angular, también se implementa a través de principios similares, y el código es el siguiente:
var Old = $ ubicación.hash (); $ ubicación.hash ('Batchmenu-Bottom'); $ AnchorsCroll (); $ ubicación.hash (antiguo);Esto se debe a que la ubicación directa. Hash causará cambios de URL y saltos de página, por lo que se agrega un código para evitar saltar.
He resumido mucho por el momento. Muchas cosas se buscan información y practican por mí mismo. Espero que sean útiles para el TX que necesitas. Si hay algo nuevo en el futuro, continuaré escribiéndolo.
Lo anterior es un resumen de las habilidades de aplicación angular. Continuaremos agregando y organizando artículos relevantes en el futuro. ¡Gracias por su apoyo para este sitio!