Com instal·lar i executar amb Angular al Windows

Bloc

Com instal·lar i executar amb Angular al Windows

Com instal·lar i executar amb Angular al Windows

Angular és un marc de desenvolupament d'aplicacions web de codi obert, basat en TypeScript, dirigit per Angular Team de Google i per una comunitat d'individus i corporacions.

Requisits previs

Aquesta guia suposa que utilitzeu Windows 10. Abans de començar, heu de tenir un compte d'usuari amb privilegis d'instal·lació i tenir accés sense restriccions a tots els llocs web esmentats en aquest document.

Públic:

Tothom que vulgui instal·lar els darrers nodejs a Windows 10 pot fer referència a aquest document

Requisits del sistema

  • Sistema operatiu Windows 10
  • 4 GB de RAM
  • 10 GB d’espai lliure

Procediment d'instal·lació

Per instal·lar cli angular necessitem nodejs i npm . Primer, entenem què són i per què els necessitem.

Què és Nodejs i per què necessiteu un desenvolupament angular?

Node.js és un entorn de temps d’execució de JavaScript de codi obert multiplataforma que executa codi JavaScript fora d’un navegador. Node.js permet als desenvolupadors utilitzar JavaScript per desenvolupar una gran varietat d'aplicacions com ara aplicacions de xarxa, eines de línia d'ordres, API web, aplicacions web. Necessiteu nodejs per a eines de desenvolupament (com ara un servidor web local amb funcions de recàrrega en viu) i experiència de dev, no necessiteu nodejs per executar reaccionar a la producció.

Què és el npm i per què necessiteu un desenvolupament angular?

Npm significa gestor de paquets de nodes, és una eina de gestió de dependències per a aplicacions JavaScript. Aquesta eina us ajudarà a instal·lar les biblioteques i altres eines per donar suport al desenvolupament angular.

Comencem amb la instal·lació de nodejs després de la finalització de nodejs, instal·larem cli angular i crearem un nou projecte angular

1. Descarregueu nodejs

1. Visiteu la pàgina de descàrrega de nodejs aquí

2. Feu clic a Windows Installer per descarregar la versió més recent de l'instal·lador de nodes.

2. Instal·leu nodejs

1. Feu clic al node-vxx.xx.xx.msi descarregat (per exemple, node-v10.15.0.msi) al pas anterior per iniciar la instal·lació que apareix a sota de la pantalla. Feu clic a Pròxim

2.By fent clic a continuació en el pas anterior, se us demanarà que accepteu la llicència. Si us plau, accepteu fent clic a la casella de selecció i feu clic a Pròxim

3.Click Pròxim

4.Click Pròxim

5. Feu clic a ** Instal·la, ** és possible que necessiteu permisos elevats, sempre que es demanin els drets necessaris

6. Feu clic a Finalitza

3. Instal·lació de proves

  • Obriu l'indicador d'ordres i executeu-lo sota l'ordre per provar el node
node -v

Hauríeu de veure una sortida com la següent (Nota: la vostra versió pot variar en funció de la data d’instal·lació, ja que l’equip de nodejs fa una versió agressiva, però assegureu-vos que la versió del node sigui> v10.0.0)

  • Obriu l'indicador d'ordres i executeu-lo sota l'ordre per provar npm
npm -v

Hauríeu de veure una sortida com la següent (Nota: la vostra versió pot variar en funció de la data d’instal·lació, ja que l’equip de nodejs fa una versió agressiva, però assegureu-vos que la versió de npm sigui> 5)

Instal·leu el cli angular

La configuració d’un entorn de desenvolupament angular productiu hauria de configurar eines com Typescript, webpack i altres dependències angulars que són complexes de configurar per a un principiant al món angular. Hi ha diverses eines que ajuden a pal·liar aquest problema, de les quals el cli angular és l'eina més fàcil i senzilla amb configuracions de producció predefinides. Angular cli inclou una àmplia gamma d’ordres que ajuden a gestionar el desenvolupament angular, les proves i el procés de construcció

Instal·larem cli angular mitjançant npm. Al terminal executeu l'ordre d'instal·lació que es mostra a continuació

npm install -g @angular/cli

En instal·lar-la amb èxit, hauríeu de veure la sortida anterior (tingueu en compte que la vostra versió angular / cli pot variar en el moment en què executeu aquesta comanda d'instal·lació)

Prova @ angular / cli

To test the @angular/cli run ng version command

Enhorabona, heu instal·lat correctament @ angular / cli

Execució de la primera aplicació Hello World

  1. Creeu una aplicació angular mitjançant una nova ordre, tal com es mostra a continuació

Aquesta ordre crea una nova carpeta anomenada hola-angular i crea tots els fitxers i configura les biblioteques necessàries dins d'aquesta carpeta i prepara el projecte angular per executar-se sense cap configuració addicional

2. Un cop creat el projecte, canvieu-lo al directori del projecte i executeu l’aplicació mitjançant l’ordre ng serve com es mostra a continuació

de servei -o L'ordre inicia el servidor de desenvolupament de paquets web que al seu torn realitza tot el procés de compilació i obre una finestra del navegador i carrega l'URL de l'aplicació que s'executa per defecte.

Si es realitza amb èxit, hauríeu de veure la sortida següent al navegador

Com es va comentar, el cli angular ve amb eines excel·lents, una de les funcions productives és la recàrrega en calent de webpack, que implementa el canvi en directe i estalvia molt de temps al desenvolupador per tornar a desplegar i recarregar la feina.

Obrim el projecte i fem alguns canvis per veure l’experiència d’aquesta gran característica. Revisarem l’estructura del projecte per comprendre la importància dels fitxers i carpetes creats

Obriu el projecte que es va crear en el pas anterior en qualsevol editor de JS; aquí veieu que el projecte està obert a l'editor vscode. A l'esquerra, a la secció de l'explorador, veureu l'explorador de fitxers que us mostra diverses carpetes i fitxers creats per ng new command. Anem a través d’ells

** e2e: ** aquesta carpeta conté el codi font i el codi de configuració de les proves de punta a punta. Si voleu escriure el codi d'automatització de proves d'extrem a extrem, us endinsareu en aquesta carpeta

** node_modules: ** Aquesta carpeta està gestionada pel gestor de paquets (npm) i conté totes les dependències de la biblioteca del projecte. Els fitxers d’aquesta carpeta no s’han de modificar, ja que no es garanteix que els canvis fets siguin segurs, ja que l’actualització / instal·lació de qualsevol altra biblioteca pot sobreescriure els canvis realitzats.

** src: ** Aquesta és la carpeta que conté tot el vostre esforç de desenvolupament. Com a desenvolupador angular, vau passar molt de temps en aquesta carpeta creant mòduls, components, serveis, directives, etc.,

www bellsouth net login

Altres fitxers que es troben fora de la carpeta src i els fitxers de configuració per a cli angular, editor, mecanoscrit, linting i npm

Ara entrem a la carpeta src. Dins d'aquesta carpeta hi ha diverses altres carpetes com

aplicació - aquesta carpeta conté tot el vostre codi font, i aquí és on es dedica tot el vostre esforç de desenvolupament

actius - conté els asses estàtics per agradar imatges, etc.,

entorns - conté el fitxer de configuració per entorn que conté els paràmetres que s’utilitzaran per a entorns dev / test i prod

Altres fitxers són els fitxers de configuració i la configuració.

Tots els fitxers main.ts és el fitxer inicial i l'execució del codi del projecte comença a partir d'aquest fitxer.

Permet fer un canvi de codi a AppComponent, obrir app.component.html i fer els canvis tal com es mostra a continuació del codi

Deseu el fitxer i torneu al navegador per veure els canvis desplegats i carregats tal com es va comentar, aquesta és una de les característiques de la configuració d'eines de cli angular.

Amb els canvis nous, la finestra del navegador hauria de ser la següent

Felicitats!! Heu configurat un projecte angular

Desinstal·leu el cli angular

Podeu desinstal·lar qualsevol configuració de biblioteca o eina mitjançant npm install i es pot desinstal·lar mitjançant npm uninstall. Seguiu el pas següent per eliminar el cli angular instal·lat anteriorment

  • S’executa l’indicatiu de comanda
npm uninstall -g @angular/cli

Desinstal·leu nodejs

  • Premeu Windows + R per obrir l'execució i escriviu appwiz.cpl i premeu OK.

Això obrirà Programes i funcions amb l’aspecte de node.js

  • Feu doble clic a node.js o feu clic amb el botó dret del ratolí i seleccioneu desinstal·lació que us demanarà com es mostra a continuació i, a continuació, trieu Sí

S'iniciarà el procés de desinstal·lació de Nodejs i us demanarà que autoritzeu el mateix mitjançant el control de l'usuari. Trieu Sí, això trigarà una estona i es completarà

#angular # desenvolupament web # node-js