Como crear un ambiente de trabajo para angular que no nos de errores en tiempo de ejecucion (node)

Entorno de trabajo NodeEnv menos errores

Generalmente cuando trabajamos en nuestro pc o laptop nos surgen muchos problemas derivados de herramientas de javascript como pueden ser bower, yeoman, entre otros.

Lo mas comun es que instalamos muchas herramientas en nuestro path de sistema y tarde o temprano deja de funcionar todo y surgen errores que quizas nunca lleguemos a entender, esto es muy comun cuando se trabaja con herramientas que corren en node (javascript) o npm, esto sucede por que muchas veces se termina instalando dependencias que tienen conflicto con la version de node que usamos en nuestro sistema.

Una solucion muy rapida y muy util para todo esto es poder hacer uso de herramientas como son nodeenv o mvn u otras.

4.- Como generar nuestra Plantilla de Administrador – Paso 4

Siguiendo la secuencia de pasos de generacion de una plantilla de administracion para nuestros proyectos web, lo que en consecuencia sigue es agregar una libreria de graficacion como es flot.

3.- Como generar nuestra Plantilla de Administrador – Paso 3

Siguiendo la secuencia de pasos de generacion de una plantilla de administracion para nuestros proyectos web, lo que en consecuencia sigue es agregar una libreria de graficacion como es morris.

2.- Como generar nuestra Plantilla de Administrador – Paso 2

Ya habiamos visto como obtener nuestras librerias base para nuestra plantilla, una vez tengamos las librerias y css base listos debemos proceder a colocar el html y agregar el css customizado que nos ayudara a dar la presentacion necesaria al administrador.

1.- Como generar nuestra Plantilla de Administrador – Paso 1

Todo cuanto es necesario para el trabajo de un proyecto web por lo general es hacer uso de una plantilla web como puede ser SB Admin 2, en este caso se hara la generacion de una plantilla basada en SB Admin.

Herramientas para acelerar el proceso de programacion con Angular2

Angular 2 ha comenzado a ser ampliamente usado en el desarrollo web, de esta forma se ha ido forjando tambien herramientas muy utiles para trabajar con Angular2.

Herramientas a usar para construir una web estatica

Dentro del desarrollo web hay muchas formas de probar nuestras paginas web, y tambien muchas herramientas para trabajo de proyectos, y construir una web estatica en linux generamente no suena algo muy facil puesto que las herramientas de linux son herramientas de linea de comandos. Si uno desea desarrollar una web debe seguir lineamientos base para el diseño y tambien debe establecer parametros de desarrollo.

Que novedades trae Sencha Extjs 6.2

• Uno de las principales ventajas de sencha son las grandes caracteristicas que mejoran con cada entrega. Todo con la unica finalidad de lograr que nuestras apps web puedan tener sensacion desktop con interfaces de usuario avanzadas.
• Dentro de las mejores contribuciones del desarrollo del framework sencha extjs 6.2 podemos encontrar:
  • D3 adapter, este adaptador nos permite hacer una integracion completa de nuestros desarrollos web basados en D3 con nuestros proyectos web actuales, para un uso completo y funcional con los componentes del framework sencha extjs 6.2.
  • Componente calendario.- nos provee de una herramienta con amplias capacidades de calendario para las aplicaciones basadas en extjs.
  • Exporter.- el exportador incluido en sencha extjs ahora soporta formato xlsx de excel asi como tambien el clasico formato csv.
  • Tema Material.- se sigue muy de cerca los parametros del diseño  Material para asegurar un diseño y apariencia muy similar en todos nuestros desarrollos con sencha extjs.
  • Tema ios.- muy similar a lo trabajado con el tema Material se siguen las especificaciones de ios para interfaces de usuario.
  • Grilla Pivot Modern.- se incluye las caracteristicas de Pivot del toolkit classic en el toolkit modern.
  • Zoom en vista y scroll nativo.- se habilita las caracteristicas para moviles.
  • Mejoras en grillas.- en ambos toolkits se incluyen funcionalidades de agregar componentes en filas de la grilla.
• • Todas estas funcionalidades descritas nos dan muchas mas opciones al momento de programar que deben ser tomadas en cuenta como razones fiables para el uso de Sencha extjs 6.2.

 

Post creado por :  Christian Portilla Pauca

Desarrollo de Aplicaciones Web Con AngularJS y Animaciones

Desarrollo de Aplicaciones Web Con AngularJS y Animaciones

Angularjs provee de transiciones animadas basadas en css, por medio de directivas que se pueden usar agregando a modo de propiedades del html de la plantilla a editar.

Desarrollo de Aplicaciones Web Con AngularJS e Includes

 

Con AngularJS se puede incluir HTML desde un archivo externo.

Includes de AngularJS
Con AngularJS se puede incluir contenidos HTML  usando la directiva ng-include:

Codigo de AngularJS Include
Los files que se incluyan con la directiva ng-include puede contener tambien codigo de AngularJS.

Contenido de dominios externos (cross-domain)
Por defecto la directiva ng-include no permite incluir archivos de los otros dominios.
Para incluir archivos de otro dominio, se debe añadir a la lista blanca de archivos permitidos desde la funcion deconfiguracion de la aplicacion:
Nota.- se debe estar seguro que el servidor de destino permite acceso a archivos de dominio cruzado.

La directiva ng-include no permite incluir archivos de los otros dominios.
Los dominios externos se debe añadir a la lista blanca.

Nota.- se debe asegurar el servidor de destino permita acceso de dominio cruzado.

 

Escrito Por Christian Portilla Pauca

 

Desarrollo de Aplicaciones Web Con AngularJS y Utilerias

• Utilerias Globales de AngularJS

 

Las utilerias de AngularJS es un conjunto de funciones javascript globales para tareas comunes de desempeño como:

• Comparar objetos
• Iterar Objetos
• Convertir datos

Las funciones de utileria global son accedidas usando el objeto angular.

Desarrollo de Aplicaciones Web Con AngularJS y Validacion de Formularios

 

AngularJS ofrece validacion de formularios del lado cliente, y es un framework que se adapta bien a los procesos de formularios y validaciones de datos.

AngularJS monitoriza el estado del formulario y los campos de entrada (input, textarea, select), y permite notificar al usuario acerca del estado actual.

AngularJS tambien puede tomar la informacion de eventos y estados como modificaciones, focus de campos de entrada etc, etc.

Se puede usar atributos standard de HTML5 para validar entradas, o tu puedes hacer tus propias funciones de tus validaciones.

Nota .- La validacion de lado cliente no puede asegurar la entrada de datos de usuario solo en el cliente. En el lado servidor es tambien necesario hacer validacion de datos.

Desarrollo de Aplicaciones Web Con AngularJS y Formularios

Los formularios en AngularJs tiene enlace de datosy validacion de datos de entrada.

Desarrollo de Aplicaciones Web con AngularJS – Eventos

 

 

• introduccion

• AngularJs tiene sus propias directivas de eventos.
• Estas directivas son muy utiles en el trabajo de HTML de las vistas cliente de nuestra aplicacion web, por tanto debemos hacer uso de este tipo de directivas que simplifican nuestra tarea de desarrollo web.

Desarrollo de Aplicaciones Web con AngularJS – DOM

DOM -> Document Object Model

Ejemplo en Vivo 

Angularjs tiene directivas para el enlace de datos de aplicación a los atributos de los elementos HTML DOM.

Desarrollo de Aplicaciones Web con AngularJS – Tablas

Desarrollo de Aplicaciones Web con AngularJS Tablas

Ejemplo en Vivo: https://angularjstable.herokuapp.com/

Video:

Introduccion

El desarrollo de aplicaciones tiene una forma especial de desarrollo en base a formas de vistas que deben mostrarse en multiples formas, una de tantas que se puede usar son las tablas de html que son muy utiles para presentar informacion listada o enumerada.

Desarrollo de Aplicaciones Web con AngularJS – HTTP

Desarrollo de Aplicaciones Web con AngularJS HTTP

Ejemplo en Vivo: http://angularjshttp.herokuapp.com/#/http

Introduccion

El uso de ajax en nuestras aplicaciones cliente web es muy importante puesto que con el uso de las tecnologias relacionadas a ajax se puede acelerar los procesos y ejecucion de scripts de javascript basados en datos provenientes de las fuentes directas de datos de servidores remotos de datos como pueden ser aplicaciones web basadas en php, python, csharp u otro lenguaje de backend.

Desarrollo de Aplicaciones Web con AngularJS – Filtros

Ejemplo en Vivo: https://angularjsfiltros.herokuapp.com/#/

El uso de filtros en AngularJS nos permite añadir formato o manipular los datos segun algunas necesidades especificas, y segun la vista deseada en el formato deseado.

Filtros AngularJS

Desarrollo de Aplicaciones Web con AngularJS – Controladores

Ejemplo en Vivo: https://angularjscontroladores.herokuapp.com/

Vista HTML de Ejemplo en Vivo: http://angularjscontroladores.herokuapp.com/views/aplicacion.html

Codigo Javascript Ejemplo en Vivo: http://angularjscontroladores.herokuapp.com/scripts/controllers/aplicacion.js

Desarrollo de Aplicaciones Web con AngularJS – Directivas

Ejemplo en Vivo:  http://angularjsdirectivas.herokuapp.com/#/

Directivas de AngularJS

Las directivas de AngularJS funcionan de un modo muy simple debemos usarlas a modo de atributo extra dentro de los tags de html para poder extender la funcionalidad de la vista en una aplicacion web.

Las directivas basicas que debemos aprender son :

• ng-app
• ng-init
• ng-model
• ng.repeat

Dentro del uso de estas tenemos que tener en cuenta que es importante para toda aplicacion web creada con angularjs que debemos siempre poner ng-app para que nuestra aplicacion web funcione correctamente.

ng-app .- lo que debemos saber sobre ng-app es que esta es la base de toda app web basada en angularjs

ng-init .- nos es util para inicializar data en la aplicacion web

ng-model .- nos es util para poder reutilizar los valores de los elementos web de entradas de datos (input, select, textarea)

ng-repeat .- nos es util para poder iterar datos y mostrarlos en la vista.

Ejemplo en Codigo

Si deseas ver ejemplos en codigo debes revisar el video en la descripcion esta el link del codigo fuente.

Escrito Por Christian Portilla Pauca

Video explicativo