To keep me abreast with this framework, I am planning to make a series of posts as tutorials. This will be the first part. Other parts are here:
On this tutorial, we are going to go through a development of a common app. To start off, we need NPM installed.
Installing AngularJS CLI
Once you have NPM, you can install a global instance of Angular CLI:
> npm install -g @angular/cli
The above command may take a while to do its thing. Just be patient. This will install a global angular CLI (command line interface) that we can call to create our project. After that, you may now start.
First, let us confirm whether it is properly installed by checking its version. The appropriate command is
> ng --version
As of this writing, I’m using Angular 7.1.3. On your command line you should expect to see something like this:
Creating a AngularJS New Project
Now, lets go to creating a new project. Creating a project on our desired project folder is simply done with just one command. So, if you want to call your project my-app we can just do:
> ng new my-app
When we call this command, it will show us a dialog asking us whether we 1. use routes, 2. what css format we are going to use. For number 1, I answer yes because I’m going to use Angular routing. On the second dialog, I answer SCSS since I’m familiar with SASS or Syntactically Awesome Style Sheets.
As a result, we will see inside the my-app folder the following directory structure as shown:
Serving your Application
Once you verified that you get similar directory structure as above, you can now start your server. To start the server, we just do the command:
> ng serve
You can now open a browser and point it to http://localhost:4200. You may also add a switch -o to the command to open your default browser to that address.
If you see this image, you successfully created your AngularJS application. So, there you have it – Congratulations!