Angular Getting Started

What is Angular?

Angular is a modern MVVC framework and platform that is used to build enterprise Single-page Web Applications (or SPAs) using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your apps. Angular is an opinionated framework which means that it specifies a certain style and certain rules that developers need to follow and adhere to while developing apps with Angular, therefore you need to learn Angular and the various components that make up an Angular app.

Angular vs AngularJS

A lot of beginners get confused with so many different versions out there for the same framework. You must have heard AngularJS, Angular 2, Angular 4, Angular 5, Angular 6 and now Angular 7. Well, in reality, there are two different frameworks - AngularJS and Angular.

AngularJS is the JavaScript-based web development framework which was first released in 2010 and is maintained by Google. Later, in September 2016, Angular 2 was announced which was a complete rewrite of the whole framework using TypeScript, a super-set language of JavaScript.

Since modern browsers (as of now) do not understand TypeScript, a TS compiler or transpiler is required to convert the TS code to regular JS code.

Why do we use Angular that uses TypeScript as the primary programming language when it comes with the overhead of transpilation? Well, the answer lies in the list of advantages that TypeScript offers over traditional JavaScript. With TypeScript, developers can use data types, syntax highlighting, code completion all the other modern features that help them code faster and more efficient. Since TypeScript is an object oriented programming language, developers can use the advantages of classes, objects, inheritance and similar features that all other OOPLs offer.

Angular, therefore, is the framework that uses TypeScript as the primary programming language. Since the Angular team opted for semantic versioning, Angular 2, 4, 5, 6 and 7 are all the versions of the same framework, each version being better than the previous one, while AngularJS is a completely different framework that uses JavaScript as the primary programming language.

Installing Angular CLI

Angular CLI is a command-line tool that is used to perform various operations related to an Angular project. It lets developers create, run, test and build Angular projects using simple commands. It also lets developers create components, services, guards, etc.

Angular CLI is available as a NodeJS module and therefore, to use it, we need to download and install NodeJS first.

Head over to node.org and download the latest version of NodeJS for your operating system.

The installation is pretty straightforward and simple to follow. Along with NodeJS, is installed NPM - the Node Package Manager. NPM is used to manage all the node packages on a system or within a project. Now that you have downloaded and installed NodeJS (which also installed NPM), you can go ahead with the installation of the Angular CLI. 

 Use the following command within a terminal to install the Angular CLI globally on your system. 

 npm install @angular/cli -g 

 -g flag is used to install the package named “@angular/cli” globally on the system. Installing a module or package globally ensures that the functionality offered by the package is available throughout the system. 

Note: On a Mac, you may need to use the Sudo command to install the module/package globally.

In the above screenshots, you can see that after a few warnings (that we can ignore safely), the @angular/cli package has been installed. Specifically, the version of the package installed is 7.3.4.

Note: Do not worry if the version installed for you is different. Nothing major changes between these versions.

You can verify that the Angular CLI package is installed successfully. To do so, after the installation has finished successfully, you can execute the following command in the terminal or in the command prompt.

ng version

This command shows the version of Angular CLI installed. For us, as you can see in the screenshot above, is it 7.3.4. Yours could be slightly different.

Creating a Project

So now that the Angular CLI is installed, we are ready to create our very first Angular project using the CLI. The CLI will create all the required files and folders, download the required packages and set up the project locally. It will also allow us to run the project locally by setting up a development server when we run the project locally. We will have a look at doing that in the next steps. To create a new project, run the following command.

ng new Test

The above command will prompt you a few questions and then create a new folder with the name “Test” and set up the new Angular project (with the name “Test”) inside the folder. You can use any name of your choice if you are not a fan of the word “Test”. The generalized command is ng new <project-name>.

The first question prompts you if you want to use Angular routing. Enter Yes and press enter/return. This will enable routing in your project. We will not be using or learning about routing right now but we will do it eventually.

The second prompt your what stylesheet format you want to use. You can make a choice here. For now, we will select CSS. Press enter/return and the project creation starts.

Note: Make sure you are connected to the internet as the project creation process downloads some files off the internet.

Once the project is created successfully, you can have a look at the newly created project files and folders inside the project folder.

Running the Project

Now that the project is created, let’s use the Angular CLI to run the project locally. The step is really simple. All we need to do is execute a simple command and that’s it. The command is

ng serve --open

The serve command will compile all the project source files, build the project and spin up a development server as well so you can test the app locally and debug it. The --open flag will ensure that the application is launched in the browser as soon as the build process is complete.

As the build process finishes, the application is automatically launched in the browser.

The serve command spins up a development server (see the URL in the browser http://localhost:4200) that lets you test and debug the app during development. This development server also refreshes the application immediately as soon as any of the source files of the project are changed. This forms a very smooth workflow during development.

Let’s open the file src/app/app.component.html and change the code near line#4 from

Welcome to {{ title }}!

to

Hello {{ title }}!

or to anything that you feel like and save the file.

As you can see in the above screencast, as soon as we change the code and save the file (by pressing Ctrl + C or CMD + C), the application source is immediately recompiled and the application is refreshed in the browser to reflect the changes. Isn’t it so cool?

Note: The CLI watches the files only inside the src folder. If you change any other files, you may need to stop the development server altogether and re-serve the application to see the changes in effect.

Feel free to play around with all the other HTML inside the file src/app/app.component.html and you can see the actual output in the browser.