Como implementar unha aplicación en febre de lume con un cli angular

angular CLI é unha interface de liña de comandos para angular e unha das formas máis sinxelas de iniciar a súa aplicación. Angular CLI ten a vantaxe de permitir que te enfocas no teu código, sen ter que preocuparte pola estrutura da túa solicitude, porque todos os ficheiros necesarios son xerados para ti.

É moi sinxelo crear listo fixo aplicacións con Cli angular. Ademais, Firebase permítelle acoller rapidamente aplicacións. Ademais, Firebase ten moitas características e un paquete gratuíto que permite experimentar coa plataforma sen estar ligado a un paquete pago.

O plan gratuíto ten as seguintes características:

  • proba a / b
  • analítica
  • indexación aplicación
  • autenticación
  • mensaxes Nube
  • a análise de colisión
  • Pregunta
  • Seguimento de rendemento
  • Previsións

condicións previas

para executar cli angular, vostede Debe ter instalado node.js 6.9 e NPM 3 ou superior no seu sistema. Se non instalou Node.js, visite o sitio web de Node.js para atopar instrucións sobre a instalación de Node.js no seu sistema operativo.

Tamén debe ter unha comprensión básica do seguinte:

  • Programación orientada a obxectos
  • JavaScript ou tipo de escritorio

Instalación do cli angular

Instalar cli angular é tan sinxelo Como:

npm install -g @ angular / cli

O comando anterior instala a última versión de Angular. Para validar a instalación exitosa de CLI angular, simplemente inicia o seguinte comando:

ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | | (_ | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | __, | \ __, | __, _ | _ | _ | _, _ | _ | \ ____ | _____ | ___ | | ___ / CLI angulaire: 6.0.8 nœud: 10.7.0 OS: linux x64 angulaire:… Version du package ------------------- ----------------------------------- @ angular-devkit / architect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schémas 0.6.8 @ schémas / angulaire 0.6.8 @ schémas / mise à jour 0.6.8 rxjs 6.2.2 dactylographié 2.7.2 

creando unha aplicación angular

Agora que ten instalado Cli angular, podemos comezar a desenvolver a nosa aplicación. Neste tutorial, non imos detallar os compoñentes dun proxecto angular CLI porque este artigo céntrase na implementación de Firebase.

Para crear unha nova aplicación, simplemente comece ng new , onde substitúe nom_du_projet co nome da súa aplicación.

ng new bucketlist

Isto fará Crea todos os ficheiros necesarios para comezar. Como podes ver, Angular CLI creou moitos ficheiros que tería creado en versións anteriores, é dicir, Angular V1.

Iniciar a súa aplicación

Para ver a súa aplicación no navegador , navega ata o cartafol do proxecto e execute ng -serve. Este comando úsase para servir a unha aplicación localmente.

cd bucketlist ng -serve

Agora, vai a http: // localhost: 4200 / para ver a súa aplicación en acción .. Todos os cambios que realices para a túa aplicación son recargados no teu navegador, polo que non necesitas continuar a executar a aplicación.

Despliegue

Agora que creamos a nosa aplicación, é tempo para desplegarlo. Seguiremos os seguintes pasos:

  • Crear un proxecto de Firebase
  • Instalar ferramentas de Firebase
  • Construír para a produción
  • Implantar sobre Firebase

Creación dunha aplicación de Firebase

Para comezar, debe ter unha conta de Firebase. Se non ten un, cree unha conta gratuíta agora.

No taboleiro de Firebase, cree un novo proxecto como se mostra a continuación. Podes simplemente darlle o mesmo nome que a túa aplicación angular. Isto facilitará as cousas, especialmente se ten moitos proxectos no taboleiro de Firebase ..

Instalar as ferramentas de control de Firebase

Firebase facilita a configuración do aloxamento porque lle proporciona todos os pasos a seguir. Para instalar as ferramentas de control de Firebase, simplemente execute:

npm install -g firebase-tools

Nota: Debe estar no directorio do seu proxecto cando execute este comando para que as ferramentas instaladas No seu proxecto ..

Autenticar Firebase

Iniciar sesión en Firebase.

connexion firebase

Responder Si ao indicador interactivo.

? Autoriser Firebase à collecter des informations anonymes sur l’utilisation de la CLI et les rapports d’erreur? Oui Visitez cette URL sur n'importe quel appareil pour vous connecter: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20penid%20+ .googleapis.com% 2Fauth% 2Fcloudplatformprojects.readonly% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% 2F% %Fauth% 2%% 2%% 3%%%%%%%%%%% également aussi % 3A% 2F% 2Flocalhost% 3A9005 En attente d'authentification… 

A continuación, a ferramenta de Firebase CLI abrirá un navegador no que se lle pedirá que permita a autenticación de Firebase a través de Google Mail ..

Se a autenticación ten éxito, aparece a seguinte interface no seu navegador en http: // localhost: 9005 //// p>

Inicializar o proxecto

O seguinte paso é inicializar o seu proxecto de Firstebase. Isto vinculará a súa aplicación angular local á aplicación Firstabase que acaba de crear. Para iso, simplemente se inicia:

firebase init 

Escolla o aloxamento como característica que desexa configurar para o proxecto porque estamos interesados só polo aloxamento de Firebase ..

######## #### ######## ######## ####### ### ###### ##### ### ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ### ##### ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## # ######## ## ## ###### ######## Vous êtes sur le point d'initialiser une base Firebase projet dans ce répertoire: / home / vaatiesther / Desktop / bucketlist? Quelles fonctionnalités CLI de Firebase souhaitez-vous configurer pour ce dossier? Appuyez sur Espace pour sélectionner les fonctionnalités, puis sur Entrée pour confirmer vos choix. Base de données: déployer Firebas e Règles de base de données en temps réel, hébergement: configurer et déployer des sites d'hébergement Firebase === Configuration du projet Associons tout d'abord ce répertoire de projet à un projet Firebase. Vous pouvez créer plusieurs alias de projet en exécutant firebase use --add, mais pour l'instant, nous allons simplement configurer un projet par défaut. ? Sélectionnez un projet Firebase par défaut pour ce répertoire: Bucketlist (bucketlist-7 2e57) === Configuration de la base de données Les règles de base de données Firebase Realtime vous permettent de définir la manière dont vos données doivent être structurées et le moment où elles peuvent être lues et écrites. ? Quel fichier doit être utilisé pour les règles de base de données? database.rules.json ✔ Les règles de base de données pour bucketlist-72e57 ont été téléchargées sur database.rules.json. Les futures modifications apportées à database.rules.json mettront à jour les règles de base de données lorsque vous exécuterez firebase deploy. === Configuration de l'hébergement Votre répertoire public est le dossier (par rapport à votre répertoire de projet) qui contiendra les ressources d'hébergement à télécharger avec firebase deploy. Si vous avez un processus de génération pour vos actifs, utilisez le répertoire de sortie de votre génération. ? Que voulez-vous utiliser comme répertoire public? Publique ? Configurer comme une application d'une seule page (réécrire toutes les URL dans /index.html)? Oui ✔ Écrit public / index.html i Écriture des informations de configuration sur firebase.json… i Écriture des informations de projet sur .firebaserc… ✔ Initialisation de Firebase terminée!

Este comando creará dous ficheiros:

  • .firebaser
  • . Firebase .JSON

Estes dous ficheiros conteñen configuracións de Firebase e información importante sobre a súa aplicación.

O ficheiro JSON debería ser así:

"hosting": "public": "public", "ignorer": , "réécrit": [ "source": "**", "destination": "/index.html" 

Construción para a produción

Angular CLI fornece o comando ng build --prod que lanza unha construción de produción. Este comando crea un cartafol

que contén todos os ficheiros para servir a aplicación. Este proceso é importante para facer a súa aplicación máis lixeiro e máis rápido ao cargar páxinas web. Para facelo, só tes que publicar:

ng build --prod

Desplegar a aplicación!

Se seguiches todos os pasos ata o presente, o noso local A aplicación angular está agora ligada á Firebase e pode transferir facilmente os seus ficheiros a medida que fagas con git. Simplemente executa o firebase deploy para implantar a túa solicitude.

firebase deploy === Déploiement sur 'bucketlist-72e57'… déploiement de la base de données, hébergement de la base de données: vérification de la syntaxe des règles… ✔ base de données: syntaxe des règles pour la base de données bucketlist-72e57 est valide i hébergement: préparation du répertoire public pour le téléchargement… ✔ hébergement: 1 fichiers chargés avec succès dans la base de données: libération des règles… ✔ base de données: règles de la base de données bucketlist-72e57 publiées avec succès ✔ déploiement complet! 

A súa aplicación agora está implementada e pode vela lanzando o seguinte comando.

firebase open hosting: site

Conclusión

Como xa viu, é moi sinxelo comezar con Firebase porque se necesita moi pouca configuración para albergar a súa aplicación. E leva moito menos tempo que configurar aloxamento tradicional! Angular é un marco excelente para o desenvolvemento de aplicacións. Realmente evolucionou ao longo dos anos e cada actualización está acompañada por características máis avanzadas e correccións de erros ..

Para obter máis información, visite o sitio web oficial angular e de Firebase e explora as posibilidades. Uso conxunto destas dúas tecnoloxías …

Deixa unha resposta

O teu enderezo electrónico non se publicará Os campos obrigatorios están marcados con *