angularJS

propósito

  • notas sobre angularJS un framework de JavaScript de código abierto, mantenido por Google.

proyecto

  • en el directorio C:\proyectos\angularJS

libro de Pedro Gascón Campos

  • Sobre un curso de coursera y reutilizando parte del curso de juanda en CFGS-DAW
  • ejemplo en plunker
  • No es necesario un servidor para lanzar el programa (confirmarlo.!!!)
  • se usa bower como gestor de paquetes ?
    • creo que se usa npm
  • recursos
  • se arranca con npm run lite pues la instrucción que da el libro da un error
  • el ejemplo que funciona
C:\Angular2\libro_angular2\angular2-book-chapter03\app03-01>npm run lite

> app03-01@1.0.0 lite C:\Angular2\libro_angular2\angular2-book-chapter03\app03-01
> lite-server

CFGS-DAW-DWEC

  • del ciclo formativo con juanda
  • C:\nube\MEGA\CicloFormativoGradoSuperior\DAW_DWEC\tema_6_AngularJs
  • interesantes apuntes
  • un paquete completo de desarrollo

angularjs

de coursera

  • C:\nube\MEGA\cursos\coursera\SimplePageAngularJS

notas de David Clemente

Te mando las notas que me he hecho sobre Visual Studio y Angular

El IDE, sin instalar ninguna extensión, ya reconoce la sintaxis empleada en los proyectos angular (y tienen función autocompletar -->IntelliSense).

Para abrir un terminal (CTRL + Ñ), si queremos abrir más terminales (CTRL + Shift + Ñ)

Como anteriormente ya instalamos ANGULAR CLI  (npm install -g @angular/cli),

podemos utilizarlo desde terminal

-->ng new my-app    crear una nueva aplicación
-->ng serve -open   inicializar el servidor web y abrir la aplicación en el navegador
http://localhost:4200

Para abrir un proyecto ya creado:
-Archivo - Abrir carpeta


----DEBUG ANGULAR
Instalar la extensión Debugger for Chrome
En la izquierda de Visual Studio el último icono es el de las extensiones, la instalamos y recargamos 'Reload'
Prueba de debug:
-Ponemos puntos de ruptura en app.component.ts
-Desde terminal inicializamos el servidor:  ng serve
-En Visual Studio vamos al icono de debug (parte izquierda icono de Debug)
-En la parte de arriba vemos el icono de una tuerca y seleccionamos chrome
-Se genera un fichero 'launch.json'  --> cambiamos el puerto de debug a 4200
-Ejecutamos el icono verde del play 'Launch chrome against local host'
-Se abre un navegador chrome y podemos hacer debug Desde el propio navegador o con los iconos del Visual Studio
https://code.visualstudio.com/docs/nodejs/angular-tutorial


--------EXTENSIONES INTERESANTES:
https://medium.com/frontend-coach/7-must-have-visual-studio-code-extensions-for-angular-af9c476147fd

curso dga

Título: Desarrollo de Aplicaciones Web basadas en angular 2

Objetivos:

  • Ser capaz de desarrollar y analizar aplicaciones web utilizando un framework moderno de creación de interfaces web

  • Contenido:

    • Javascript
    • Typescript
    • Conceptos básicos. ¿Cómo funciona Angular?
    • Componentes
    • Directivas
    • Formularios
    • Inyección de dependencias
    • HTTP
    • Rutas
    • Arquitectura de datos

  • Horas: 20

    • Fechas y horario:
    • 6, 8, 13, 19 y 21 de marzo de 10:00 a 14:00 horas.

  • Lugar:

    • sala de formación

materiales

desplegando

en githubPages

tutorial de contraslash

  • ver como desplegar una aplicación angular
  • sigo este post
C:\cursos\DGA\cursoAngularDGA\app-final>git init
C:\cursos\DGA\cursoAngularDGA\app-final>git add -A
C:\cursos\DGA\cursoAngularDGA\app-final>git commit -m "para github pages"
C:\cursos\DGA\cursoAngularDGA\app-final>git remote add origin https://github.com/pelos6/biziZaragoza.git
C:\cursos\DGA\cursoAngularDGA\app-final>git push -u origin master
C:\cursos\DGA\cursoAngularDGA\app-final>ng build --prod --base-href=/biziZaragoza/
C:\cursos\DGA\cursoAngularDGA\app-final>angular-cli-ghpages
  • error
C:\cursos\DGA\cursoAngularDGA\app-final>angular-cli-ghpages -S
fatal: could not read Username for 'https://github.com': Invalid argument
  • una posible solución
git remote set-url https://pelos6:pelos678@github.com/pelos6/biziZaragoza.git
  • pero no funciona el comando
git remote rm origin
git config remote.origin.url https://pelos6:pelos678@github.com/pelos6/biziZaragoza.git
  • ahora funciona el comando
C:\cursos\DGA\cursoAngularDGA\app-final>git remote set-url https://pelos6:pelos678@github.com/pelos6/biziZaragoza.git
usage: git remote set-url [--push] <name> <newurl> [<oldurl>]
   or: git remote set-url --add <name> <newurl>
   or: git remote set-url --delete <name> <url>

    --push                manipulate push URLs
    --add                 add URL
    --delete              delete URLs


C:\cursos\DGA\cursoAngularDGA\app-final>git remote rm origin

C:\cursos\DGA\cursoAngularDGA\app-final>git config remote.origin.url https://pelos6:pelos678@github.com/pelos6/biziZaragoza.git

C:\cursos\DGA\cursoAngularDGA\app-final>git remote -v
origin  https://pelos6:pelos678@github.com/pelos6/biziZaragoza.git (fetch)
origin  https://pelos6:pelos678@github.com/pelos6/biziZaragoza.git (push)

C:\cursos\DGA\cursoAngularDGA\app-final>angular-cli-ghpages -SCloning https://pelos6:pelos678@github.com/pelos6/biziZaragoza.git into ..\..\..\..\Users\javie\AppData\Roaming\npm\node_modules\angular-cli-ghpages\node_modules\gh-pages\.cache

Cleaning

Fetching origin

Checking out origin/gh-pages

Removing files

Copying files

Adding all

Committing

Pushing

Successfully published!

tutorial de gitHub pages

  • mejores resultados sin necesidad de usar angular-cli-ghpages
  • desde la propia página de github
  • con un ejemplo simple
C:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>git init
C:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>git add -A
C:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>git remote add origin https://github.com/pelos6/hello-world.git
C:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>ng build --prod --output-path docs --base-href hello-world
  • da un error
ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts
  • lanzo sin la opción --prov y se crea el directorio docs
c:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>ng build --output-path docs --base-href hello-world
c:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>copy docs\index.html docs\404.html
c:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>git add -A
c:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>git commit -m "para github pages"
c:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\hello-world>git push -u origin master

  • al rato se puede ver en https://pelos6.github.io/hello-world/ lo mismo que en file:///C:/cursos/DGA/cursoAngularDGA/02_MATERIAL/MATERIAL/hello-world/docs/index.html

  • funciona con hello-world

  • funciona con routing

  • funciona con rxjs el chat

  • lo intento con biziZaragoza

git remote add origin https://github.com/pelos6/biziZaragoza.git
ng build --output-path docs --base-href biziZaragoza

problemas

  • en algunos proyectos me da este error
c:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\calculadora>ng serve
Your global Angular CLI version (1.7.1) is greater than your local
version (1.6.0). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".
module.js:538
    throw err;
    ^

Error: Cannot find module '@angular-devkit/core'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (c:\cursos\DGA\cursoAngularDGA\02_MATERIAL\MATERIAL\calculadora\node_modules\@angular-devkit\schematics\src\tree\virtual.js:10:16)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)

  • cuando pasa esto borro package.lock.json y el directorio node-modules y vuelvo a lanar npm install pero en el caso de arriba no se soluciona

  • falta el install del paquete @angular-devkit/core

    • en el curso lo corregimos

correo de Pedro

Buenos días.

Por si alguno no lo tiene, está disponible en 
H:\ecinform\Formación\Cursos\Angular el esqueleto y la solución final 
del proyecto de fin de curso (BIZIS). Los ficheros correspondientes son:

- esqueleto.zip

- app-final.zip

Además he incluido el fichero forms-CORRECCION.zip, que incluye la 
práctica forms que ya nos pasó Raúl, pero con la corrección de ese 
formulario en que no le aparecía el error cuando el formulario no era 
válido.

En concreto la corrección está en la plantilla HTML correspondiente al 
directorio 'demo-form-ng-model' y la única diferencia está en el "class" 
del formulario. Había que incluir el estilo "error" en el formulario 
para que el estilo "error" del bloque div interno sepa que tiene que 
mostrarse en rojo. Nada que ver con Angular, sino que era un problema de 
CSS de Bootstrap

correo de Pedro final

Buenos días.
Última documentación del curso.
He dejado en H:\ecinform\Formación\Cursos\Angular\app-final-api.zip el API REST con los servicios que utiliza la aplicación del proyecto final del curso. 
Contiene un fichero README.md con indicaciones para su ejecución. 
Un saludo.