First steps with angular CLI

Angular CLI stands for Angular Command Line Interface and it’s a very good tool for creating angular applications. It will save you a lot of time when creating your projects, components and adding new controllers or services, etc.

Now that we have a basic idea of angular cli, we are going to create a small project to see how it works.

This is available as an NPM package, so the first thing we are going to do is:

npm install @angular/cli

The next step is to create a new project, using:

ng new angular-example

This will create a folder named angular-example. In that folder you’ll have the following structure:

If we look inside the src subfolder we will find the main implementation parts:

the app subfolder is where all the components, controllers and services are going to be, so lets create one of each using the next commands:

To create a new component use:

ng generate component <component-name> or ng g component <component-name>

In our example we created:

ng g component first-component

This command will create this new component but it will also import it and inject it in the app.module.ts.

Now supose, we want to create a component inside another one, for that you need to include the path where this new one has to be created, like this:

ng g component first-component/second-component

The result will be:

In a similarly way, you can create services, interfaces, etc. You only need to replace the word component like below:

ng g service my-component

Now, to run our app we only need to execute the ng serve command. Once this is finished,
we can access our app using the following url: http://localhost:4200, you will see something like this:

As you can see the default port is 4200, if you want you can change it, follow this example:

ng serve --host 0.0.0.0 --port 4201

Another useful commands are related to the deploy of your project. If you look into the enviroment folder, you will notice that there are two files:
One is for test enviroment and one is for production. In these files you can do some configurations, for example you may want to use different webapi depending on the enviroment you will do the deploy.
For example: