Saltar al contenido

¿Cómo puedo agregar algunas funciones de utilidad pequeñas a mi aplicación AngularJS?

Investigamos en todo el mundo online y así de este modo traerte la solución para tu duda, si continúas con dudas puedes dejarnos la pregunta y te responderemos con gusto, porque estamos para ayudarte.

Solución:

EDITAR 1/7/15:

Escribí esta respuesta hace bastante tiempo y no me he mantenido mucho al día con angular durante un tiempo, pero parece que esta respuesta todavía es relativamente popular, así que quería señalar que algunos de los puntos @nicolas las marcas a continuación son buenas. Por un lado, inyectar $ rootScope y adjuntar los ayudantes allí evitará que tenga que agregarlos para cada controlador. Además, estoy de acuerdo en que si lo que está agregando debe considerarse como servicios angulares O filtros, deben adoptarse en el código de esa manera.

Además, a partir de la versión actual 1.4.2, Angular expone una API de “Proveedor”, que puede inyectarse en bloques de configuración. Consulte estos recursos para obtener más información:

https://docs.angularjs.org/guide/module#module-loading-dependencies

Inyección de valor de dependencia de AngularJS dentro de module.config

No creo que vaya a actualizar los bloques de código reales a continuación, porque no estoy usando Angular de manera realmente activa en estos días y realmente no quiero arriesgarme con una nueva respuesta sin sentirme cómodo de que en realidad se ajusta a la nueva mejor prácticas. Si alguien más se siente capaz de hacerlo, hágalo.

EDITAR 2/3/14:

Después de pensar en esto y leer algunas de las otras respuestas, creo que prefiero una variación del método presentado por @Brent Washburne y @Amogh Talpallikar. Especialmente si está buscando utilidades como isNotString () o similar. Una de las claras ventajas aquí es que puede reutilizarlos fuera de su código angular y puede usarlos dentro de su función de configuración (lo que no puede hacer con los servicios).

Dicho esto, si está buscando una forma genérica de reutilizar lo que deberían ser servicios, creo que la respuesta anterior sigue siendo buena.

Lo que haría ahora es:

app.js:

var MyNamespace = MyNamespace || ;

 MyNamespace.helpers = 
   isNotString: function(str) 
     return (typeof str !== "string");
   
 ;

 angular.module('app', ['app.controllers', 'app.services']).                             
   config(['$routeProvider', function($routeProvider) 
     // Routing stuff here...
   ]);

controller.js:

angular.module ('app.controllers', []).  controlador ('firstCtrl', ['$scope', function($scope) 
    $scope.helpers = MyNamespace.helpers;
  );

Then in your partial you can use:


Old answer below:

It might be best to include them as a service. If you’re going to re-use them across multiple controllers, including them as a service will keep you from having to repeat code.

If you’d like to use the service functions in your html partial, then you should add them to that controller’s scope:

$scope.doSomething = ServiceName.functionName;

Then in your partial you can use:


Here’s a way you might keep this all organized and free from too much hassle:

Separate your controller, service and routing code/config into three files: controllers.js, services.js, and app.js. The top layer module is “app”, which has app.controllers and app.services as dependencies. Then app.controllers and app.services can be declared as modules in their own files. This organizational structure is just taken from Angular Seed:

app.js:

 angular.module('app', ['app.controllers', 'app.services']).  config (['$routeProvider', function($routeProvider) 
     // Routing stuff here...
   ]);  

services.js:

 /* Generic Services */                                                                                                                                                                                                    
 angular.module('app.services', [])                                                                                                                                                                        
   .factory("genericServices", function() {                                                                                                                                                   
     return                                                                                                                                                                                                               
       doSomething: function()    
         //Do something here
       ,
       doSomethingElse: function() 
         //Do something else here
       
    );

controller.js:

angular.module('app.controllers', []).                                                                                                                                                                                  
  controller('firstCtrl', ['$scope', 'genericServices', function($scope, genericServices) 
    $scope.genericServices = genericServices;
  );

Luego, en su parcial, puede usar:



De esa manera, solo agrega una línea de código a cada controlador y puede acceder a cualquiera de las funciones de servicios donde sea que se pueda acceder a ese alcance.

Al llegar a este viejo hilo, quería enfatizar que

1 °) las funciones de utilidad pueden (¿deberían?) Agregarse al radiómetro a través de module.run. No es necesario instanciar un controlador de nivel raíz específico para este propósito.

angular.module('myApp').run(function($rootScope)
  $rootScope.isNotString = function(str) 
   return (typeof str !== "string");
  
);

2 °) Si organiza su código en módulos separados, debe usar los servicios angulares o la fábrica y luego inyectarlos en la función pasada al bloque de ejecución, de la siguiente manera:

angular.module('myApp').factory('myHelperMethods', function()
  return 
    isNotString: function(str) 
      return (typeof str !== 'string');
    
  
);

angular.module('myApp').run(function($rootScope, myHelperMethods) 
  $rootScope.helpers = myHelperMethods;
);

3 °) Tengo entendido que en las vistas, en la mayoría de los casos, necesita estas funciones auxiliares para aplicar algún tipo de formato a las cadenas que muestra. Lo que necesitas en este último caso es usar filtros angulares

Y si ha estructurado algunos métodos auxiliares de bajo nivel en servicios angulares o fábrica, simplemente inyéctelos dentro de su constructor de filtros:

angular.module('myApp').filter('myFilter', function(myHelperMethods){ 
  return function(aString)
    if (myHelperMethods.isNotString(aString))
      return 
    
    else
      // something else 
    
  
);

Y en tu opinión:

 aString    

¿Entiendo correctamente que solo desea definir algunos métodos de utilidad y hacerlos disponibles en plantillas?

No tiene que agregarlos a todos los controladores. Simplemente defina un solo controlador para todos los métodos de utilidad y conecte ese controlador a o (usando la directiva ngController). Cualquier otro controlador que conecte en cualquier lugar debajo (es decir, en cualquier lugar, punto) o (en cualquier lugar menos ) heredará ese $ scope y tendrá acceso a esos métodos.

Si te ha sido de utilidad este artículo, te agradeceríamos que lo compartas con otros entusiastas de la programación así contrubuyes a dar difusión a nuestra información.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *