Nos aproximaremos por primera vez a Angular de forma desenfadada y con cierto ritmo, siguiendo las indicaciones que nos brindan varios «tutoriales» escritos por aficionados y profesionales que ya conocen el framework.

Hemos consultado las siguientes fuentes:

https://medium.com/williambastidasblog/angular-5-inicio-r%C3%A1pido-con-angular-cli-y-angular-material-e52e4ab0df3a

https://gustavodohara.com/blogangular/como-crear-tu-primera-aplicacion-angular-en-una-hora

Paso 1: instalar Node

Descarga: https://nodejs.org/es/

Node: Programa que ejecuta el código javascript necesario para bajar y usar módulos escritos en javascript. Junto con Node se instala Npm, que te facilita la gestión de módulos de Node.

Paso 2: instalar Angular-cli

Angular-cli es un módulo que sirve para crear aplicaciones de forma muy rápida, y lo instalaremos con Npm escribiendo en nuestra consola de comandos la siguiente línea:

npm install -g @angular/cli

Una vez que nuestra consola nos ha informado de que el módulo se instalo con éxito, estamos listos para el siguiente paso.

Paso 3: crear el primer proyecto

Desde la consola, esta línea nos creará nuestro primer proyecto:

ng new primer-proyecto

Ante la pregunta: ¿Would you like to add Angular routing? Respondemos «sí».

Luego se nos invita a elegir qué formato de hoja de estilo preferimos para nuestro proyecto. Elegimos la primera opción, CSS, con la que estamos más familiarizados. En una de nuestras fuentes se nos invita a cambiar manualmente de la opción CSS a SCSS tan sólo renombrando un archivo. de momento crearemos este proyecto con CSS.

El módulo creará los archivos del proyecto e instalará los paquetes necesarios.

Debemos navegar hasta el directorio del proyecto para continuar, con la línea:

cd primer-proyecto

Y para compilarlo, tenemos que ejecutar este comando:

ng serve

Lo cual compila el proyecto y nos informa de que podemos visitarlo en la dirección http://localhost:4200. Se nos informa así:

Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Más detalles

El comando:

ng -v

Nos mostrará comandos disponibles:

ng -v
Available Commands:
  add Adds support for an external library to your project.
  analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering.
  build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  deploy Invokes the deploy builder for a specified project or for the default project in the workspace.
  config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular app.
  run Runs an Architect target with an optional custom builder configuration defined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angular.io/
  version (v) Outputs Angular CLI version.
  xi18n (i18n-extract) Extracts i18n messages from source code.