We will create a sample Angular application
- Angular CLI
- IDE of your choice
You can download Node.js from the below URL
Download | Node.js
npm will be downloaded along with Node.js. Next, install Angular CLI by executing the following command
npm install -g @angular/cli
Visual Studio Code is popularly recommended for developing Angular applications.
Execute the following commands to check if Node.js, npm, and angular CLI is installed correctly,
But, why Node.js and npm is required?
Execute the following command to create a new angular project.
ng new sampleApp
Next, it will ask you questions to add routing to the application, if you need it type “N” or type “Y”. Then, choose your stylesheet format and click enter. After a few seconds your project will be successfully created.
What happens when you try to create a project without any project name as below,
As soon as you execute the command it is asking to enter a project name. What happens when you don’t type anything but press enter? Will it create a project? The answer is no, enter doesn’t work until you type something. Give it a try.
Now, run the project from your terminal by executing the following command.
After a successful compilation, you will see something like below.
Now, open any browser of your choice and enter localhost:4200.
If you see the above screen in your browser, then you have successfully created your sample application. This is how you create a sample Angular application.
Below are some useful commands that come handy while developing applications in Angular.
ng g c componentName
ng generate component componentName
The above command is used to create a component, you can start using the component as soon as it is created without having to do any extra work with this command.
ng g s serviceName
ng g service serviceName
This command is used to create a service class for your application.
ng g m module-name — flat — module=app
ng g module module-name — flat — module=app
The above command has 2 hyphens before flat and module(we cannot enter 2 continuous hyphens on medium). The above command is used to create module classes be it routing module classes also. — flat puts the files into the src/app folder even when you are running the command from being in any folder. — module tells the CLI to register the newly creating module file in the imports array of the AppModule class. Now, you may have this doubt that why we are not using this — module=app thing while creating components and services? Yeah, we don’t do that because we add components to the declarations array of the AppModule, not to the imports array, the command we are executing for components automatically does this by adding it to the declarations array and for services we don’t need to register it in the AppModule for some reasons.
ng new — help
This shows some useful options.
These are some useful commands you need for faster development. If you face any errors during installation or creation of the project feel free to ask.