Introduction to Angular

Angular is one of the most extensively used full-fledged JavaScript framework. 

In comparison to different frameworks, like React or Vue, it can seem that Angular requires more time and effort to learn, however, Angular is different - it's a monolith framework meaning you can developer entire app with state management, AJAX requests and write tests, while such as React is only a Library and you need to use other code libraries to handle state, make AJAX requests, write tests, etc.

Prerequisites for a first Angular app:

  • Newer version of node.js needs to be installed. If you need to update node.js, the most convenient way is to use nvm (node version manager):
    nvm ls command lists the available installed versions of node.js
    You can run nvm install node --reinstall-packages-from=node command to install the newest version of node.js. Now if you run nvm ls command one more time you can see response like this:   ->      v13.5.0
  • You also need npm(node package manager) to handle all of the necessary node packages.
    We can install npm by running either nvm install-latest-npm or nvm install --latest-npm commands. 
    You'll see that we'll need to install @angular/cli package in the beginning by using npm.

Now we can start creating first app:

$ npm install -g @angular/cli

This command installs the Angular CLI, which is a command-line interface to initialize and run Angular based applications.

After it has been installed, we can run another command to create the actual app: 

$ ng new my-app

This will create the my-app subfolder in the current folder with all of the necessary files needed to begin developing your app. It also contains test related structure for the future tests.

Now if we cd to the my-app directory and run the following command:

$ ng serve

, you'll see a response looking like this:

Date: 2020-01-07T18:00:46.706Z - Hash: a281f1e72cbd7d4966f9 - Time: 7514ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Compiled successfully.

You can now open http://localhost:4200/ to find “hello world” of Angular, which means the app is up and running.

From now on you can continue to use the Angular CLI capabilities and generate new components, but this is beyond this article.