Hey everyone, today we will learn how to create an Angular 8 application using angular-cli, I've created this tutorial to explain the step by step process on scaffolding an angular application and will also point out the core files that contains the configurations needed by Angular.
So, before we start we need to install the prerequisites in creating an Angular App.
Prerequisites:
1. Node Js : https://nodejs.org/en/
2. angular-cli: install using npm (to install run on cmd npm install -g angular-cli@latest)
3. Code Editor or IDE (I recommend Visual Studio Code because this is free and lightweight)
*Note Nodejs should be installed first before installing angular-cli
And that's just it, the only two core required steps before creating an Angular App.
To check if the installation of nodejs and angular-cli is successful, we can run the following commands.
node -v
- this will check the version of the installed nodejs on your terminal.
ng --version
- this will check the version of your cli as well as the installed dependencies.
If all results shown above is prompted on your terminal, we are all set!
Using Angular-CLI to scaffold the angular project
Now we are ready to scaffold an angular project, in our terminal, execute the following command:
ng new <project-name>
this will scaffold all the required dependencies for developing an Angular Application, there are also other options available in creating an angular project using ng new, you can refer to the documentation for more information. https://angular.io/cli/new#options
Execute the example command below, the name of the project will be first-angular-app.
this will prompt the following questions:
let's answer Y as we need routing on our development, I will explain more on this through the course.
lets choose SCSS for our styling.
After these steps, this will now create all the necessary files for Angular application, this will take a while as this will download all needed packages from npm.
We can see above that all package are installed and yeah, git is also initialized, all we have to do is add our origin for this project.
Now, to test if our project is working, navigate to the created angular project and execute the following command on your terminal.
ng serve or just ng s.
the angular app should run on http://localhost:4200 and we should see this page upon visiting the url.
and that's it! we have created our very first Angular Application, easy as pie, we are now ready to explore the generated files inside our app and this will be covered on my next tutorial Understanding Angular and its dependencies.