Steps to build your first Angular 2 Application.
Pasos para construir tu primera aplicación Angular2


Hey There!

First of all, I'd like show you How you can build your first Angular 2 Application, Ok Let's do it.

1.- You are going to need Visual Studio Code, Therefore you can download it from this URL. https://code.visualstudio.com/ , This IDE is very powerfull and lightweight.


visual studio code
Visual Studio Code

2.- Now you need install nodeJS you must download it from this url. https://nodejs.org/es/download/, NodeJs comes included with npm, npm allow us to install differents kinds of packages into ours angular 2 applications, After you install it, please check whether NodeJS was installed succesfully using the command below.

node -v


node js version
Node JS Version

3. Now follow the next steps to install an Angular 2 Application, you need open a command prompt.


  • Install Angular CLI using npm.
Run this command  npm install -g @angular/cli  it can spend some minutes. Angular CLI helps us to build an Angular2 Application more fast.
  • Create a New Angular 2 Proyect using angular CLI.
Using the command prompt, you must be in a directory like D:/myAngular2Application and then run these commands."Where MYFIRSTPROJECT you can change it"

ng new MYFIRSTPROYECT
cd MYFIRSTPROYECT

The Angular 2 project was created via Angular CLI
The Angular 2 Project was created

  • Now you have to install all the packages you project is going to need, Therefore you need to run this command.
npm install
  • Now your Angular2 Application is ready to run, now you only need to execute this command
ng serve


You have to open a browser to see the Application running, please navigate to http://localhost:4200/
AWESOME!!! is working.

The Angular 2 Project is running
The Angular 2 Project is running


Now we aregoing to use Visual Studio code to do some change, use visual studio code to open the project since this folder D:\myAngular2Application\MYFIRSTPROYECT


Visual Studio Code
Visual Studio Code

Visual Studio Code
Visual Studio Code


And we arrived to the end of this post, I hope you can write me some comments and if you have problem in any step feel free to ask me.


Comments

Post a Comment

Popular posts from this blog

Error al Iniciar Oracle SQL Developer 11g - Unable to find Java Virtual Machine

Image
Saludos amig@s , hoy quiero compartir con ustedes una experiencia que aveces suele pasarnos al momento de instalar algun SW, y se presentar errores que muchas veces investigamos y llegamos a resolverlos,entonces porque no compartirlo. En esta ocaciones despues de todo el Proceso de Instalacion del ORACLE SQL DEVELOPER 11g. tocaba iniciarlo y mando un error como este. Este error no permite iniciar nuestro ORACLE SQL DEVELOPER 11g, no se asusten, no le falta instalar nada, solo es un pequeño error de configuracion que debemos ajustarlo y nada mas, para ello vamos a la carpeta siguiente: c:\app\administrador\product\11.2.0\dbhome_1\sqldeveloper\sqldeveloper\bin OJO.: Esta ruta puede variar pero confio en su instinto para encontrarla, empiecen encontrando la carpeta "app". y abrimos el archivos SQLDEVELOPER.CONF.  Ahy dentro ubiquense en la linea donde dice SetJavaHome, y seguramente tendran la ruta que apunta a la carpeta de instalacion del JRE de Java. c:\ Pro
Read more

Como Mantener el Scroll despues de un PostBack ASP.net ( As Maintain Scroll after a PostBack ASP.net )

Saludos amig@s, Cuando trabajamos con ASP.net nos hemos dado cuenta que si tenemos una pagina muy extensa Horizontalmente y damos click en un boton que esta muy abajo de la página esto generará un PostBack, en termino simples "Refrescará la pagina" y nos llevará al Inicio de la Pagina, lo cual es incomodo porque nuevamente tendrémos que deslizar el Scroll de la pagina hacia abajo. OPCION 1: Agreguen la linea de codigo que se encuentra resaltada, indicandole que mantenga la posicion del Scroll en el PostBack <% @ Page Language ="C#" AutoEventWireup ="true" MaintainScrollPositionOnPostback ="true"     CodeFile ="Default.aspx.cs" Inherits ="_Default" %> <! DOCTYPE html > < html xmlns ="http://www.w3.org/1999/xhtml"> < head runat ="server"> < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8"/>
Read more

How to run ng serve in a different port
Como ejecutar ng serve en un puerto diferente

Image
Hello Everyone, In his post I'm going to explain How we can use a different port that ng use for default(4200). Maybe if we have an Angular 2 Project running, and then we also need another project running, and when we try to execute the ng serve command, CLI give us a message like this. Port 4200 is already in use. Use '-port' to specify a different port port 4200 is busy So we should execute a new command like this, it has to fix the problem. Altough you might use a different port 4202,4203 etc. ng serve --port 4201 ng serve running in a different port I hope this will help all of you in your amazing Angular 2 Project. See you next time.
Read more