A beginners guide that will give you basic understanding of Angular and how to get started with it.
Note: This will be series of articles where you will understand all aspects of Angular to build a production ready app.
Angular allows designers to use HTML as the template language and extension of HTML's syntax to convey the application's components effortlessly.
It is based on Model-View-Controller framework which allows separation of concerns while developing web applications.
I know, this is one of the most asked question in the Angular interviews. Allow me to throw some light on this.
So, it all started off as being Angular 2.0 when it was first built by Angular team. They had decided to use semantic versioning for releasing angular builds. Also, in parallel they were working on a new router independently which was initially set at version 2.0 as well, but then the Angular team made some breaking changes and revised the router to 3.0. At that point, they were now ready to create another version of Angular, which would be Angular 3.0.
This new version of Angular would also include changes to the router as well, so router itself needed a new version as well. That would've put the router at 4.0 and Angular itself at 3.0. So, instead of having the router always be one number ahead in its version number, the Angular team instead decided to make the next version of Angular 4.0, and they skipped 3. Of course, the router, as well, was incremented to 4.0 at this time.
So, now you know why Angular 3.0 was not released.
Enough of talks now lets get in some action 🔥
For developing Angular applications, we need to set up the development environment first. Setting up our development environment requires two basic steps. First step to install Node.js, and second step to set up the Angular application.
Now, we need to install angular-cli which is a command line helper for generating the boilerplate code and managing Angular application.
npm install -g @angular/cli
Check if angular-cli works by running the below command. (Here ‘ng’ is an acronym of Angular)
If you see something like this, you are good to go 🚀
Let’s generate an Angular project, by running below command and following the cli interface.
ng new my-dream-app
In new angular-cli, once you run this command, it will ask “Would you like to add Angular routing?”. If you press ‘y’, angular-cli will add all the default configuration files required for basic routing in you project. After that, it will ask “Which stylesheet format would you like to use?”. This option allows you select a format for CSS files in your project.
Once you are done, you will see a project created in the same directory where the command ran.
Next run the following command
cd my-dream-app ng serve
and you will see the below
NOTE: ng serve starts a development server up that watches our app’s source code for changes.
AND, IT’S DONE 😉
Open your browser and navigate to the URL shown on your terminal, in the above case http://localhost:4200
For the curious people, the next article is on the architecture of Angular 😊. You can read here.
If anything is not clear or you want to point out something, please comment down below.
You may also like other articles on overflowjs.com