Tutorial Angular 8: entendre l'estructura del directori i crear l'aplicació CRUD

Bloc

Tutorial Angular 8: entendre l'estructura del directori i crear l'aplicació CRUD

Tutorial Angular 8: entendre l'estructura del directori i crear l'aplicació CRUD

Publicat originalment per Lalit Aggarwal a https://overflowjs.com

Abans de crear una aplicació angular, hem d’entendre l’estructura de directoris del projecte Angular.

Estructura del directori

Un cop hàgiu creat un projecte nou amb @ angular-cli. A continuació es mostra l’estructura de directori per defecte.

Estructura del directori

Anem un per un i vegem quin és el propòsit de cada fitxer i carpeta.

1. e2e (de punta a punta) - Aquesta carpeta conté casos de prova per provar l'aplicació completa juntament amb els fitxers de configuració específics.

2. mòduls_node - Conté tots els mòduls de node que s’utilitzen a l’aplicació angular.

3. src - El codi font complet de l'aplicació resideix a la carpeta src.

  • aplicació - component arrel de l'aplicació.
  • actius - conté totes les imatges o recursos utilitzats a l'aplicació.
  • entorns - conté entorns de configuració de construcció de l'aplicació. Podem crear qualsevol entorn de destinació i especificar-ne la configuració aquí.
  • index.html - Aquesta és la pàgina HTML principal que es mostra quan algú obre el vostre lloc web o aplicació.
  • main.ts - Aquest és el punt d'entrada principal de l'aplicació angular que compila l'AppModule i fa que el component d'arrencada especificat al navegador.
  • styles.css - Conté tots els estils que s’utilitzaran de manera global a l’aplicació.

4. .editorconfig - Aquest fitxer s'utilitza per definir una configuració coherent.

5. angular.json - Aquest fitxer s'utilitza principalment per especificar la configuració de CLI. Inclou la configuració d’ordres build, serve, test, lint, e2e que fan servir @ angular-cli.

6. karma.conf.js - Especifica la configuració del karma, que s’utilitza per provar aplicacions angulars.

7. package.json - Especifica totes les dependències del projecte.

8. tsconfig.json - defineix la configuració de TypeScript al projecte.

9. tslint.json - defineix la configuració de TSLint per al projecte. TSLint és una eina d’anàlisi estàtica extensible per a TypeScript.

Ara, definim l’enunciat del problema de l’aplicació que desenvoluparem.

Plantejament del problema:

Creeu una aplicació Angular 8 que gestioni els empleats d'una organització. L'usuari pot realitzar les operacions següents:

1. Enumereu tots els empleats

2. Afegiu un empleat nou

activació de minibox cox com

3. Modifiqueu l’empleat existent

4. Suprimeix l’empleat existent

5. Cerca d'empleats

Nota: no afegirem suport de validació per als camps de l'aplicació perquè això farà que aquest article sigui més llarg. Explicaré la validació en un altre article d'aquesta sèrie.

Comencem

# Requisits previs

1. Node.js

2. Angular-Cli (També es pot crear l'aplicació sense cli, això depèn completament de les vostres preferències)

Nota: Abans de començar, aquí teniu el enllaç del repositori de Github del projecte.

#Pas 1: Creeu un codi d'angular Boilerplate mitjançant @ angular-cli

Creeu un projecte nou amb el nom 'empleat-gestió' mitjançant l'ordre següent:

ng new employee-management 

A la nova angular-cli, una vegada que executeu aquesta ordre, us preguntarà Voleu afegir l'encaminament angular ?. Si premeu 'y', angular-cli afegirà tots els fitxers de configuració per defecte necessaris per a l'encaminament bàsic del vostre projecte. Després, us preguntarà quin format de full d'estil voleu utilitzar ?. Aquesta opció us permet seleccionar un format per als fitxers CSS del vostre projecte. Per tant, ara per ara no he optat per l’encaminament angular predeterminat i he seleccionat ‘CSS’ com a format de full d’estil.

Un cop hàgiu acabat, veureu un projecte creat al mateix directori on va executar l'ordre.

mit data bootcamp

Ara, obriu el projecte de nova creació a Visual Studio Code o a qualsevol altre editor que trieu.

# Pas 2: Creeu un fitxer d'entitat o model

Creeu una nova carpeta 'entitat' dins de la carpeta 'aplicació'. En aquesta carpeta, creeu un fitxer nou 'empleat.ts'.

Es tracta d’una classe de model simple amb un constructor per inicialitzar l’objecte.

# Pas 3: Creeu un servei angular

Com sabem, els serveis en angular ens proporcionen accés compartit a dades i lògica a través de múltiples components.

Per tant, afegiu ‘employeeservice.service.ts’ mitjançant l’ordre següent

ng generate service servicesemployeeservice 

S’afegirà el fitxer ‘employeeservice.service.ts’ a la carpeta ‘app services’. Especificarem tots els mètodes CRUD d’aquest servei.

Nota: Per simplificar, he utilitzat la llista de treballadors en memòria per gestionar Operacions CRUD .

Tampoc no necessitem registrar aquest servei a la matriu de proveïdors d’app.module.ts ja que hem passat la variable ‘root’ a la variable ‘providedIn’ de l’atribut @Injectable ().

# Pas 4: Creeu components angulars

Ara hem d’analitzar els diferents components angulars en què es pot dividir la nostra aplicació. A continuació es detallen els components que cal crear:

  1. Component de l'aplicació - component root ja afegit per @ angular-cli
  2. EmployeeListComponent - Mostra tots els empleats
  3. EmployeeDetailsComponent - Mostra tots els detalls d'un empleat
  4. AddEmployeeComponent - Afegiu empleat a la llista d'empleats
  5. EditEmployeeComponent - Editeu els empleats de la llista

Per generar tots aquests components, executarem les ordres següents.

ng generate component employeelist –skipTests=true ng generate component employeedetail –skipTests=true ng generate component addemployee –skipTests=true ng generate component editemplyee –skipTests=true 

El paràmetre '–skipTests = true' s'utilitza per evitar crear fitxers de prova del component.

Un cop executem aquestes ordres, @ angular-cli registra automàticament els components a app.module.ts.

Registre de mòduls

Creem cada component

4.1. Component de detall dels empleats

En primer lloc, crearem el component de detall dels empleats, ja que es pot reutilitzar per mostrar la llista d'empleats. Obriu ‘employeedetail.component.html’ i afegiu el codi següent.

Component HTML de detalls dels empleats

Aquest és el fitxer de plantilla que conté HTML per mostrar les propietats dels empleats al navegador. Aquí hem utilitzat la interpolació per lligar propietats a plantilla.

Ara obriu el fitxer ‘employeedetail.component.ts’ i el codi següent.

Component de dades dels empleats

Aquest component espera un valor @Input () a la variable 'empleat' del component principal. Totes les propietats associades s'inicialitzaran i es renderitzaran al navegador després d'això.

4.2. Component de la llista d’empleats

Aquest component utilitzarà el component employeedetail per representar una llista d'empleats. Afegiu el codi de plantilla següent al fitxer ‘employeelist.component.html’.

Llista d'empleats HTML

Hem afegit un quadre de cerca i un botó d'afegir en aquest component. A més, la variable @Input () es passa al component fill i es gestiona el seu esdeveniment @Output () al component pare.

Ara, obriu el fitxer ‘employeelist.component.ts’ per obtenir la llista d’empleats del servei d’empleats i afegir la lògica del quadre de cerca.

Lògica de quadre de cerca en servei

4.3. Afegeix un component d'empleat

Obriu ‘addemployee.component.html’ i afegiu camps senzills per obtenir la informació necessària per a un empleat.

Afegiu un component HTML per a empleats

Aquesta plantilla també conté dos botons per desar i cancel·lar l'operació. Manejarem la seva lògica al fitxer ‘addemployee.component.ts’.

Afegiu servei de components per a empleats

visual studio 2017 corrector ortogràfic

En prémer el botó de cancel·lació, navegarem per l’usuari fins a la nostra pàgina d’inici que mostra la llista d’empleats.

4.4. Edita el component dels empleats

Això és com 'addemployee.component.html'. En lloc d'afegir un empleat, aquest component editarà els detalls d'un empleat existent. Obriu ‘editemployee.component.html’ i el codi següent:

Edita l'HTML del component empleat

Aquí hem utilitzat [(ngModel)] també conegut com a 'Banana in a box' per enllaçar a variables de 'editemployee.component.ts'.

Edita el servei de components dels empleats

Aquí hem aconseguit editar la identificació d’un empleat des de la mateixa ruta. Aquest identificador s’utilitzarà per obtenir dades del treballador del servei i mostrar-ne les dades al navegador. Un cop l’usuari actualitzi l’empleat, aquesta instància es passarà al servei per actualitzar-lo a la llista de memòria dels empleats.

# Pas 5: Configuració de l'encaminament de components

Sé que aquest és un dels temes que he de tractar. Creieu-me, en aquesta aplicació de mostra no estic utilitzant gran part de la funcionalitat de l'encaminament. Vegem primer els conceptes bàsics de l’encaminament.

Què és l'encaminament angular?

El router Angular és una part bàsica de la plataforma Angular. Permet als desenvolupadors construir SPA amb diverses vistes i permetre la navegació entre aquestes vistes.

Una ruta angular consisteix principalment en dos valors, és a dir, ruta i component. El camí representa el camí real de l'URL i el component especifica el component angular que s'ha de representar quan el navegador accedeixi al camí especificat.

Encaminament a Angular 8

Tingueu en compte que l'última ruta té el camí d'accés: **, que indica que l'encaminador seleccionarà el component especificat si l'URL sol·licitat no coincideix amb cap de les rutes definides.

Registre aquestes rutes a app.module.ts important RouterModule des de @ angular / router.

Registre de rutes

Després de configurar les rutes, hem d’afegir la sortida de l’encaminador a la nostra aplicació que insereix el component que coincideix en funció de l’URL del navegador actual. A la nostra aplicació afegirem la sortida del router al fitxer html del component de l’aplicació.

Etiqueta de ruta

# Pas 6: executeu l'aplicació

Hem acabat amb la part de codificació. Ara simplement executeu l'ordre següent per executar la nostra aplicació impressionant.

npm start 

Després de la compilació amb èxit, podem veure la nostra aplicació a http: // localhost: 4200 / Empleats

Funcionament i funcionament Angular 8 CRUD

Ara podeu jugar amb l'aplicació afegint, editant o eliminant els empleats de la llista.

Per tant, en aquest tutorial hem completat la funcionalitat CRUD a Angular 8. Podeu trobar el codi a la nostra pàgina Dipòsit de Github . Si teniu cap dubte mentre creeu l'aplicació, feu un comentari.

Gràcies per llegir

Si us ha agradat aquest missatge, compartiu-lo amb tots els vostres amics de programació.

Segueix-nos a Facebook | Twitter

Més informació sobre Angular

Angular 8 (anteriorment Angular 2): la guia completa

Angular & NodeJS: la guia de pila MEAN

El curs complet per a desenvolupadors de Node.js (3a edició)

El Bootcamp per a desenvolupadors web

Les millors 50 preguntes d’entrevistes angulars per a desenvolupadors de frontend el 2019

☞ Com es crea una aplicació web CRUD amb Angular 8.0

☞ React vs Angular: una comparació profunda

React vs Angular vs Vue.js per exemple

☞ Microfrontends: connectar conjunts de marcs JavaScript (React, Angular, Vue, etc.)

☞ Creació d'aplicacions mòbils CRUD mitjançant Ionic 4, Angular 8

123 hp com dj2600

☞ Com construir aplicacions mòbils amb Angular, Ionic 4 i Spring Boot

☞ Tutorial iònic 4 i angular per a principiants: curs accidentat

#angular # desenvolupament web #javascript