1. ¿Cuál es la diferencia entre ng-show/ng-hide y ng-if?
Todos sabemos ng-show/ng-hide está oculto y se muestra a través de display . Y ng-if realmente controla la adición y eliminación de los nodos dom para lograrlo. Por lo tanto, si cargamos dom de acuerdo con diferentes condiciones, entonces el rendimiento de ng-if es mejor que ng-show .
2. Explique qué es $ Rootscrope y la diferencia de $ alcance?
En términos de Layman, la página $rootScrope es todo el padre de $scope .
Echemos un vistazo a cómo generar $rootScope y $scope .
Paso 1: Angular Passes ng-app y crea $rootScope en la memoria.
Paso 2: Angular continuará analizando, encontrar la expresión {{}} y analizarla en una variable.
Paso 3: El DIV con ng-controller se analizará y apuntará a una función controller . En este momento, controller se convierte en una instancia del objeto $scope .
3. ¿Cómo funciona la expresión {{YourModel}}?
Depende del servicio $interpolation . Después de inicializar la página HTML, encontrará estas expresiones y las marcará. Entonces, cada vez que se encuentra con un {{}} , se establecerá un $watch . $interpolation devolverá una función con los parámetros de contexto. Finalmente, la función se ejecuta, y se considera la expresión $parse de ese alcance.
4. ¿Cuál es el ciclo de resumen en angular?
En cada ciclo digest , Angular siempre comparará el valor del model en scope . En general, digest se activa automáticamente, y también podemos usar $apply para la activación manual.
5. ¿Cómo cancelar $ TimeOut y detener un $ Watch ()?
STOP $timeout Podemos usar cancel :
var customTimeOut = $ timeOut (function () {// su código}, 1000); $ timeOut.cancel (customTimeOut);Detente un reloj $:
//. $ watch () devolverá una función que detiene la función de registro que almacenamos en una variable var deGisterWatchfn = $ rootscope. $ watch ('someGlOballyAVailableProperty', function (newVal) {if (newval) {// Invocamos esa función de región de región, para deshacerse de la vergüenza deRegisterSwatchfn (); ...}}});6. ¿Cómo puedo establecer la restricción en la directiva angular? ¿Cuál es la diferencia entre @, =, y en alcance?
restrict se puede establecer por separado:
Un atributo de coincidencia
E etiqueta de coincidencia
Clase C Match
M Comentario de Match
Por supuesto, puede establecer múltiples valores como AEC para hacer múltiples coincidencias.
En scope , @, =, y se expresa respectivamente cuando se realiza un enlace de valor
@ Obtenga una cadena establecida, que se puede configurar solo o unirse usando {{yourModel}} ;
= Unión bidireccional, uniendo algunas propiedades en scope ;
y se usa para ejecutar algunas expresiones en el scope principal. Establecemos algunas funciones que deben ejecutarse.
angular.module('docsIsolationExample', []) .controller('Controller', ['$scope', function($scope) { $scope.alertName = function() { alert('direct scope &'); }}]).directive('myCustomer', function() { return { restrict: 'E', scope: { clickHandle: '&' }, Template: '<Button ng-click = "testClick ()"> Haga clic en mí </boton>', controlador: function ($ scope) {$ scope.testClick = function () {$ scope.clickhandle ();<div ng-app = "docsisolationExample"> <div ng-concontroller = "controlador"> <my-customer click-handle = "alertName ()"> </customer> </div> </div>
<Realizar la unión unidireccional.
7. Enumere al menos tres formas de realizar la comunicación entre diferentes módulos?
1. Servicio
2. Eventos, especifique el evento vinculado
3. Use $ Rootscope
4. Use directamente $ parent, $$ childhead, etc. entre controladores
5. Directiva especifica atributos para la unión de datos
8. ¿Qué medidas pueden mejorar el rendimiento angular?
Recomendado oficialmente, debug cerrada, $compileProvider
myApp.config (function ($ compileprovider) {$ compileprovider.debuginfoenable (falso);}); Use una expresión vinculante, es decir {{::yourModel}}
Reducir el número de observadores
Evite usar ng-repeat en carga de desplazamiento infinito
Use dispositivos de prueba de rendimiento para explorar sus problemas de rendimiento angular. Podemos usar console.time() o usar herramientas de desarrollador y Batarang
console.time ("timername"); // su codeconsole.timeend ("timername");9. ¿Crees que es bueno usar jQuery en Angular?
Esta es una pregunta abierta, y aunque hay muchos de estos debates en Internet, generalmente se cree que este no es un intento particularmente bueno. De hecho, cuando aprendemos Angular, debemos aceptar la idea de Angular a partir de 0, enlace de datos, usar algunas de las API con las que Angular viene, enrutar y organizar razonablemente, escribir instrucciones y servicios relacionados, etc. Angular viene con muchas API que pueden reemplazar completamente las API de uso común en jQuery. Podemos usar angular.element, $ http, $ timeOut, ng-init, etc.
También podríamos cambiar la perspectiva. Si se necesitan las necesidades comerciales, y para un recién llegado (más familiarizado con JQuery), tal vez su introducción de jQuery pueda ayudar a resolver problemas, como el uso de complementos, por supuesto, esto es mejorar la eficiencia laboral al afectar a la organización del código. Con la profundización de la comprensión de Angular, algunos de los códigos que se introdujeron cuando jQuery se abandonará gradualmente durante la reconstrucción. (?Po es una persona así. Espero que no te ridiculicen, pero el negocio se aleja)
Así que creo que definitivamente está mal decir que los dos marcos no se pueden usar juntos en absoluto, pero aún debemos hacer nuestro mejor esfuerzo para seguir el diseño angular.
10. Cómo realizar pruebas de unidad angular
Podemos usar Karam + Jasmine para pruebas unitarias. Presentamos la aplicación angular a través de NGMOCK y luego agregamos nuestros casos de prueba por nosotros mismos. Un simple código de prueba:
describir ('calculator', function () {antes que el módulo (módulo ('calculatorApp')); var $ controler; antes que el inyect (function (function (_ $ controlador _) {$ controler = _ $ controler_;})); describir ('sum', function () {it ('1 + 1 debería igual 2', function () {var $ spope = {}; var controler = $ Controlador ('CalculatorController', {$ alcance: $ alcance});11. Resumen
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el estudio y el trabajo de todos. Si tiene alguna pregunta, deje un mensaje para discutir.