¿Cuáles son las diferencias entre NG-IF y NG-Show/Hide?
La primera diferencia es que NG-IF se crea solo cuando la expresión después del nodo DOM es verdadero, Ng-Show se crea al principio, y Display: Bloque y Pantalla: Ninguno se usa para controlar la pantalla y no mostrar.
La segunda diferencia es que NG-IF producirá (implícitamente) un nuevo alcance, y lo mismo es cierto para Ng-Switch, Ng-Include, etc. para crear dinámicamente una interfaz.
Esto hará que el modelo NG esté vinculado con la variable básica en NG-II y se une a este modelo a otro área de visualización en el DIV externo. Cuando la capa interna cambia, la capa externa no cambiará sincrónicamente porque ya hay dos variables.
<p> {{name}} </p> <div ng-if = "true"> <input type = "text" ng-model = "name"> </div>NG-Show no tiene este problema porque no viene con su propio alcance de primer nivel.
La forma de evitar este tipo de problema es unir siempre elementos en la página a las propiedades del objeto (data.x) en lugar de vincularse directamente a la variable base (x).
Vea el alcance en angularjs para más detalles
Cuando Ng-Repeat itera sobre una matriz, si hay los mismos valores en la matriz, ¿qué problemas estarán allí y cómo resolverlos?
No se permiten duplicados en un repetidor. Agregar pista por $ índice puede resolverla. Por supuesto, también puede rastrear por cualquier valor ordinario, siempre que pueda identificar de manera única cada elemento en la matriz (cree la asociación entre el DOM y los datos).
¿Puede la expresión escrita en ng-click usar los métodos en los objetos nativos de JS?
No solo las expresiones en el clic ng, sino que solo los métodos JS nativos no pueden llamarse directamente mientras estén en la página, porque no existen en el alcance $ del controlador correspondiente a la página.
Toma una castaña:
<p> {{parseInt (55.66)}} <p>
Encontrará que no se muestra nada.
Pero si agrega esta función en $ alcance:
$ Scope.ParseInt = function (x) {return parseInt (x);}Por supuesto que no hay problema como este.
Para este tipo de requisito, usar un filtro puede ser una buena opción:
<p> {{13.14 | parseintfilter}} </p> app.filter ('parseintfilter', function () {return function (item) {return parseInt (elemento);}}){{ahora | 'aaa yyy-mm-dd'}} En esta expresión, ¿cómo se pueden personalizar las líneas verticales y los parámetros posteriores?
Filtrar, formatea datos, recibe una entrada, la procesa de acuerdo con una determinada regla y devuelve el resultado de procesamiento.
Filtro incorporado
Hay nueve tipos de filtros incorporados:
Fecha (fecha)
divisa
Limitto (longitud de matriz o cadena de límites)
Orderby (ordenar)
minúsculas (minúsculas)
mayúscula (gorra)
número (formatear el número, agregar mil separadores y recibir parámetros para limitar el número de lugares decimales)
Filtrar (procesar una matriz y filtrar elementos que contienen una subcadena)
JSON (Formateo del objeto JSON)
Hay dos formas de usar Filter, una es directamente en la página:
<p> {{ahora | Fecha: 'aaa yyyy-mm-dd'}} </p>
Otro es usarlo en JS:
// $ Filtro ('Nombre de filtro') (objetos que deben filtrarse, Parámetro 1, Parámetro 2, ...)
$ filtro ('date') (ahora, 'aaa yyy-mm-dd hh: mm: ss');
Filtro personalizado
// formulario app.filter ('Filter Name', function () {Función de retorno (objeto que necesita ser filtrado, Filtrar el parámetro 1, el parámetro de filtro 2, ...) {// ... Haga algo para devolver el objeto después del procesamiento;}}); // Chestnut App.Filter ('TimesFilter', function () {return Function (item, Times) {var result = '' '; for (var i = 0; i <times; i ++) {result+= item;} result;}}})¿Cuál es la relación entre fábrica, servicio y proveedor?
fábrica
Ponga el método de servicio y los datos en un objeto y devuelva este objeto
app.Factory ('Fooservice', function () {return {target: 'factory', sayhello: function () {return 'hello' + this.target;}}});servicio
Cree un servicio a través del método de constructor y devuelva un objeto instanciado
app.service ('fooservice', function () {var self = this; this.target = 'servicio'; this.sayhello = function () {return 'hello' + self.target;}});Proveedor
Cree un servicio que se pueda configurar a través de la configuración. El devuelto en $ get es usar fábrica para crear el contenido del servicio
app.Provider ('fooservice', function () {this.configData = 'init data'; this.setConfigData = function (data) {if (data) {this.configData = data;}} this. $ get = function () {var = this; return {Target: 'Provider', Sayhello: function () {return Self.configDates + ' this.target;Desde la perspectiva de implementación subyacente, el servicio llama a la fábrica y devuelve su instancia; El proveedor de llamadas de fábrica, devolviendo el contenido definido en su $ Get. Las funciones de fábrica y de servicio son similares, excepto que la fábrica es una función normal que puede devolver cualquier cosa (se puede acceder a la devolución, por lo que cómo escribir esas variables privadas, ya sabes); El servicio es un constructor, que no se puede devolver (se puede acceder a los que están atados a esto); El proveedor es una fábrica mejorada, que devuelve una fábrica configurable.
Ver AngularJS Factory vs Service VS Proveedor
¿Qué mecanismo se usa para la unión de datos de Angular? Descripción detallada del principio
Mecanismo de inspección sucia.
La unión de datos bidireccionales es uno de los mecanismos centrales de AngularJS. Cuando hay algún cambio de datos en la vista, se actualizará al modelo. Cuando hay algún cambio de datos en el modelo, la vista también se actualizará simultáneamente. Obviamente, esto requiere un monitoreo.
El principio es que Angular establece una cola de escucha en el modelo de alcance para escuchar los cambios de datos y la vista de actualización. Cada vez que un objeto está vinculado a la vista, AngularJS insertará un reloj $ en la cola de vigilancia $ para detectar si hay algún cambio en el modelo que monitorea. Cuando el navegador recibe un evento que puede ser procesado por el contexto angular, se activará el bucle $ digest, atravesando todos los relojes $ y finalmente actualizando el DOM.
Dar una castaña
<botón ng-click = "val = val+1"> Aumentar 1 </botón>
Al hacer clic, se generará una operación de actualización (se activan al menos dos bucles de $ Digest)
Presione el botón
El navegador recibe un evento y ingresa al contexto angular
El bucle $ digest comienza a ejecutarse, consultando si cada reloj $ cambia
Dado que $ Watch Monitoring $ alcance .Val informó cambios, se aplica un bucle de $ digest
No hay cambios detectados en el nuevo bucle de $ Digest
El navegador retira el controlador y actualiza el DOM correspondiente al nuevo valor de $ scope.val
El límite superior del bucle $ Digest es 10 veces (se lanza una excepción después de más de 10 veces para evitar bucles infinitos).
Consulte el enlace de datos para AngularJS
Dos bloques de interfaz horizontal A y B. Si se activa un evento en A, ¿qué formas puede saber B? Descripción detallada del principio
En otras palabras, este problema es cómo comunicarse entre los módulos de interfaz horizontal. Hay dos métodos, uno es compartir servicios y el otro debe basarse en eventos.
Servicios compartidos
En Angular, se puede generar un objeto Singleton a través de la fábrica, y este objeto puede inyectarse en los módulos A y B que necesitan comunicación.
Basado en eventos
Hay dos formas de hacer esto
El primero es usar el controlador principal. En el controlador infantil, active un evento ($ emit) al controlador principal, luego escuche los eventos ($ ON) en el controlador matriz y luego transmita ($ transmitido) al controlador infantil. De esta manera, a través de los parámetros llevados por el evento, los datos se propagan a través del controlador principal y entre los mismos controladores de nivel.
El segundo tipo es usar $ Rootscope. Cada aplicación angular tiene un alcance de raíz $ Rootscope de forma predeterminada. El alcance de la raíz está en el nivel superior, y hay ámbitos en todos los niveles colgando de él. Por lo tanto, si el subcontrollador usa directamente $ Rootscope para transmitir y recibir eventos, se puede lograr la comunicación entre pares.
Consulte la comunicación entre controladores en AngularJS
¿Cómo debería una aplicación angular estar bien en capas?
Estructura divisoria del directorio
Para proyectos pequeños, puede organizarlos por tipo de archivo, como:
Filtros de servicios de modelos de controladores CSSJS
Sin embargo, para proyectos más grandes, es mejor dividirlos de acuerdo con los módulos comerciales, como:
CSSModules Controladores de cuenta Modelos Servicios Filtros Plantillas Controladores de disco Modelos Servicios Filtros Plantillas
Es mejor tener un directorio común bajo módulos para almacenar cosas públicas.
División del código lógico
Como marco MVVM, las aplicaciones angulares deben dividirse de acuerdo con el modelo, la vista modelo (controlador) y vistas.
La división del código lógico aquí se refiere principalmente a tratar de hacer que la capa del controlador sea lo más delgada posible. Extraiga la lógica compartida en el servicio (como solicitudes de datos de fondo, intercambio de datos y caché, comunicación entre módulos basada en eventos, etc.), extrae operaciones de interfaz compartidas en directivas (como la selección de fechas de encapsulación, paginación, etc. en componentes, etc.), extraiga operaciones de formato compartido en filtro, etc., etc.
En aplicaciones complejas, también se pueden establecer constructores correspondientes para entidades, como el módulo de disco duro (disco), que puede tener varias vistas, como la lista, la nueva creación y los detalles, y los controladores correspondientes, respectivamente. Luego, se puede construir un constructor de disco para completar las operaciones de adición, eliminación, modificación y verificación de datos. Si hay un controlador relacionado con el disco, el constructor de disco se inyecta en el constructor de disco y se genera una instancia. Esta instancia tiene los métodos de agregar, deleción, modificación y verificación. Esto no solo tiene capas claras, sino que también se da cuenta de la reutilización (haciendo que la capa del controlador sea más delgada).
Consulte la práctica en profundidad de Angularjs en Suning Cloud Center
¿Qué bibliotecas de enrutamiento se usan comúnmente para aplicaciones angulares y cuáles son sus diferencias?
Ngroute y UI.router se usan comúnmente en Angular1.X, y también hay un nuevo enrutador (orientado a los componentes) diseñado para Angular2. El que está detrás no se ha utilizado en el proyecto real, por lo que no hablaré de eso.
Ya sea que se trate de Ngroute o UI.Router, como una característica adicional adicional del marco, debe introducirse en forma de dependencias del módulo.
la diferencia
El módulo ngroute es un módulo de enrutamiento angular, mientras que el módulo UI.router es un módulo de terceros desarrollado basado en el módulo NgRoute.
Ui.router se basa en el estado (estado), Ngroute se basa en URL y el módulo UI.router tiene funciones más poderosas, reflejadas principalmente en los aspectos de anidación de las vistas.
Use ui.router para definir rutas con relaciones claras entre padres e hijos e inserte plantillas de enrutamiento infantil en <div ui-view> </div> de la plantilla de enrutamiento principal a través de la directiva UI-VIEW, realizando así la anidación de la vista. Esto no se puede definir en Ngroute. Si <Div Ng-View> </div> se usa en la vista Parent-Hiña al mismo tiempo, caerá en un bucle muerto.
Ejemplo
ngroute
var app = angular.module ('ngrouteApp', ['ngroute']); app.config (function ($ rututeprovider) {$ ruteProvider .When ('/main', {TemplateUrl: "main.html", controlador: 'mainctrl'}) .Othise ({redirectto: '/tabs'});ui.router
var app = angular.module ("uireuteApp", ["ui.router"]); app.config (function ($ urlrouterProvider, $ stateProvider) {$ urlrouterProvider.otherwise ("/index"); $ stateProvider .State ("main", {url: "/main", templ: "" Main.herml ", el control. 'MainCtrl'})Si planea un sistema totalmente componente a través de la directiva angular, ¿qué desafíos puede encontrar?
Nunca he hecho un conjunto completo de componentes con directiva, así que no puedo explicarlo.
Una cosa que se puede pensar es en cómo los componentes interactúan con el mundo exterior y cómo se pueden usar a través de una configuración simple.
Aplicaciones angulares desarrolladas por diferentes equipos. Si desea integrarlos, ¿qué problemas se pueden encontrar y cómo resolverlos?
Se pueden encontrar conflictos entre diferentes módulos.
Por ejemplo, todos los desarrollos de un equipo se llevan a cabo bajo Modulea, mientras que el código desarrollado por otro equipo se lleva a cabo bajo ModuleB
angular.module ('myApp.modulea', []) .Factory ('ServiceA', function () {...}) angular.module ('myApp.moduleB', []) .Factory ('ServiceA', function () {...}) angular.module ('myapp', ['myapp.modulea', 'myapp.moduleB'Esto hará que Servicea sea bajo dos módulos que se sobrescriban.
Parece que no hay buena solución en Angular1.X, por lo que es mejor hacer una planificación unificada en la etapa inicial, hacer acuerdos y desarrollarse estrictamente de acuerdo con el acuerdo. Cada desarrollador solo escribe un código de bloque específico.
¿Cuáles son las desventajas de Angular?
Fuertes limitaciones
Esto lleva a altos costos de aprendizaje y es hostil a la parte delantera.
Pero cuando siga las convenciones de AngularJS, la productividad será alta y amigable para el programador Java.
No propicio para el SEO
Debido a que todo el contenido se adquiere y se representa dinámicamente, los motores de búsqueda no pueden arrastrarse.
Una solución es que para el acceso normal al usuario, el servidor responde al contenido de la aplicación AngularJS; Para el acceso al motor de búsqueda, responde a las páginas HTML específicamente para SEO.
Problemas de rendimiento
Como marco MVVM, debido a que se implementa la unión de datos bidireccional, habrá problemas de rendimiento para grandes matrices y objetos complejos.
Métodos que se pueden utilizar para optimizar el rendimiento de las aplicaciones angulares:
Reduzca los elementos de monitoreo (como la unión unidireccional para los datos que no cambian)
Establezca activamente el índice (especifique el seguimiento de los tipos simples se usan como índice de forma predeterminada, y los objetos usan $$ hashkey por defecto, por ejemplo, cambian para rastrear por item.id)
Reduzca la cantidad de datos renderizados (como la paginación, o obtener una pequeña parte de los datos cada vez, y recuperarlos según sea necesario)
Aplanador de datos (por ejemplo, para las estructuras de árbol, use estructuras de aplanamiento para construir un mapa y datos de árbol. Cuando funcione en el árbol, ya que la misma referencia que los datos planos, los cambios de datos del árbol se sincronizarán con los datos planos originales)
Además, para Angular1.X, hay problemas con la verificación sucia y el mecanismo de módulos.
Móvil
Se puede probar Ionic, pero no es perfecto.
¿Cómo ver la opinión de Peter-Paul Koch sobre Angular en enero de 2015?
¿Cómo se ve el controlador como sintaxis introducida en Angular 1.2?
El beneficio más fundamental
Antes de Angular 1.2, cualquier encuadernación en la vista estaba directamente unido a $ alcance
función myctrl ($ scope) {$ scope.a = 'aaa'; $ scope.foo = function () {...}}Usando Controlleras, no es necesario inyectar $ alcance nuevamente, el controlador se convierte en un objeto JavaScript muy simple (POJO), un modelado más puro.
function myCtrl () {// Use VM para capturar esto para evitar las funciones internas que hacen que el contexto cambie al usar este var vm = this; vm.a = 'aaa';}principio
Desde el punto de vista de implementación del código fuente, la sintaxis de Controlleras solo crea un atributo en $ alcance con el alias AS, por ejemplo, del objeto controlador.
if (directive.controlleras) {locales. $ scope [directive.controlleras] = controlerInstance;}Sin embargo, además de hacer que el controlador se mencione más POJO anteriormente, también puede evitar encontrar un pozo relacionado con el alcance de AngularJS (es decir, el pozo en el que ng-if genera un alcance de primer nivel, que en realidad es un pozo en la herencia de la mediana de tipo de la cadena de prototipo de JavaScript. Porque cuando se usa controleras, todos los campos están en la vista a la visión de una visión de referencia, como v. existe).
<div ng-concontroller = "testctrl as vm"> <p> {{name}} </p> <div ng-if = "vm.name"> <input type = "text" ng-model = "vm.name"> </div> </div>pregunta
Un problema que encontrará con Controlleras es que debido a que no se inyecta $ alcance, no se puede usar métodos bajo $ emit, $ transmisión, $ on, $ reloj, etc. Estas operaciones relacionadas con el evento pueden encapsularse y manejarse de manera uniforme, o el alcance $ se introduce en un solo controlador para un tratamiento especial.
Controlador angular de referencia como sintaxis vs alcance
Detalles de la "inyección de dependencia" de Angular
castaña
La inyección de dependencia es un patrón de diseño de software que tiene como objetivo manejar las dependencias entre los códigos y reducir el acoplamiento entre componentes.
Por ejemplo, si no está utilizando AngularJS, es posible que deba hacer esto si desea consultar datos desde el fondo y mostrarlos en la parte delantera:
var animalbox = document.querySelector ('. Animal-Box'); var httprequest = {get: function (url, callback) {console.log (url + 'solicitado'); var animales = ['gato', 'perro', 'conejo']; devolución de llamada (animales); }} var render = function (el, http) {http.get ('/api/animales', function (animales) {el.innerhtml = animales;})} render (httprequest, animalbox);Sin embargo, si los parámetros no se pasan cuando se llama el render, como lo siguiente, se informará un error porque El y HTTP no se pueden encontrar (la dependencia se define y la dependencia no se encontrará automáticamente cuando se ejecute)
prestar();
// typeError: no se puede leer la propiedad 'get' de indefinido
Y usando angularjs, puedes hacer esto directamente
función myctrl = ($ scope, $ http) {$ http.get ('/api/animales'). éxito (function (data) {$ scope.animals = data;})}En otras palabras, cuando la aplicación angular se está ejecutando, se llama a MyCTRL y se inyectan automáticamente dos dependencias, $ HTTP y $ HTTP.
principio
AngularJS infiere el nombre del servicio de dependencia a través del nombre del parámetro del constructor, y usa toString () para encontrar la cadena correspondiente correspondiente a esta función definida, luego elimina los parámetros (dependencias) en regularidad, luego obtiene la dependencia correspondiente en el mapa de dependencia e instancia y lo pasa.
Para simplificarlo, probablemente sea así:
var inyect = {// Almacenamiento de la relación de asignación de dependencia de almacenamiento: {}, // Registre el registro de dependencia: function (name, recurse) {this.storage [name] = resource; }, // analizar la dependencia y llamar resuelve: function (target) {var self = this; var fn_args =/^function/s*[^/(]*/(/s*([^/)]*)/)/m; var strip_comments = /((///.*$)|(//*fic/s/sfont>////)/)/mg; fntext = target.ToString (). reemplazar (strip_comments, ''); argDecl = fntext.match (fn_args) [1] .split (/,?/g); var args = []; argDecl.ForEach (function (arg) {if (self.storage [arg]) {args.push (self.storage [arg]);}}) return function () {target.apply ({}, args); }}}Usando este inyector, se puede llamar a la castaña anterior que no usa AngularJS después de modificarlo.
inyect.register ('el', animalbox); inyect.register ('ajax', httprequest); reender = inject.resolve (render); reender ();pregunta
Debido a que el inyector AngularJS supone que el nombre del parámetro de la función es el nombre de la dependencia, y luego busca la dependencia, si la dependencia se inyecta como en el castaño anterior, después de que se comprime el código (los parámetros se renombran), la dependencia no se puede encontrar.
// función myctrl = ($ scope, $ http) {...} // función myctrl = (a, b) {...}Por lo tanto, los siguientes dos métodos generalmente se usan para inyectar dependencias (existen requisitos para el orden en que se agregan las dependencias).
Método de anotación de matriz
myApp.Controller ('myctrl', ['$ scope', '$ http', function ($ scope, $ http) {...}])Inject EXPLICIT $ inyectado
myApp.Controller ('myctrl', myctrl); function myctrl = ($ scope, $ http) {...} myctrl. $ inject = ['$ scope', '$ http'];Reponer
Para un contenedor DI, se deben incluir tres elementos: el registro de dependencias, la declaración de dependencias y la adquisición de objetos.
En AngularJS, tanto el módulo como $ proporcional pueden proporcionar el registro de dependencias; El inyector incorporado puede obtener objetos (completar automáticamente la inyección de dependencia); La declaración de dependencias es como se menciona en la pregunta anterior.
Aquí hay una castaña
// For module, more than one parameter is passed, which means a new module is created, and an empty array means no dependency on other modules// There is only one parameter (module name), which means obtaining module// Define myApp, add myApp.services to its dependency angular.module('myApp', ['myApp.services']);// Define a service module, register all services in this module Angular.module ('myApp.Services', []) // $ Provider tiene fábrica, servicio, proveedor, valor, constante // Definir un httpserviceangeangular.module ('myApp.services'). Service ('httpService', ['$ http', función ($ http) {...}]))referirse a
[AngularJS] implementa una simple inyección de dependencia por ti mismo
Comprender módulos e inyectores en angular, es decir, inyección de dependencia
Inyección de dependencia Escenario práctico de aplicación en AngularJS
Cómo ver angular2
En comparación con Angular1.X, Angular2 ha realizado grandes cambios y es casi un marco nuevo.
Según TypeScript (que se puede desarrollar usando TypeScript), los tipos de lenguaje fuertes son más beneficiosos cuando los equipos de proyectos a gran escala colaboran.
La componente mejora la eficiencia del desarrollo y el mantenimiento.
También hay módulos que admiten carga dinámica, nuevos enrutadores, soporte nativo para promesas, etc.
Atiende a los estándares futuros y absorbe las ventajas de otros marcos, que vale la pena esperar, pero también hay más cosas que aprender (es Next, TS, RX, etc.).
Lo anterior es una compilación de la información para las preguntas de la entrevista de AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio web!