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:

newProject

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

srcFolder

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:

subcomponent

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:

RunningApp

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:

testenviroment

prodenviroment

So, to use these files in the build process, you need to run:

ng build--env=prod

and for test just:

ng build
 These commands will generate a folder called ‘dist’ into the project folder, with your project ready to  deploy.
I hope this blog was helpful for you and thanks for reading us! Let us know if you have any doubts!

Related posts

Leave a Comment