Getting Started with Angular 5

In the previous article I introduced you to one of the most popular single page application frameworks called Angular. In this article I will teach you how to start programming with it. In this series of articles on Angular we are going to use Angular 5. This is the current major version at the time I am writing this article.

Before You Begin

Unlike various other JavaScript articles this article is not for the JavaScript beginners. If you want to use a framework or library you need to have good knowledge in the language the framework is based upon. We are going to write code using TypeScript for creating our Angular application. But that doesn't make you free from the obligation of learning JavaScript first. JavaScript is a prerequisite to learning TypeScript. So, I expect that you have good level of expertise in JavaScript and at least the basic idea of TypeScript. Don't worry if you do not have good knowledge in TypeScript—I will explain things for you during the code examples.

It is also expected that you have good knowledge in using command line on your system.

Installing NodeJS and npm

We need multiple tools, libraries and frameworks for developing our Angular applications. Everything we need is based on JavaScript and NodeJS so we need to install NodeJS first. For installing and managing modules in NodeJS environment we need to install Node Package Manager (npm) along with NodeJS.

To install NodeJS and npm on Debian based systems like Ubuntu you need to run the following command:

sudo apt-get install nodejs npm

On Arch Linux, run the following command:

pacman -S nodejs npm

On RHEL, CentOS and Fedora run the following command:

sudo yum -y install nodejs npm

Installing them on windows is easier. You need to install the pre-built package. Download here.

Angular CLI

Using build tools with JavaScript or TypeScript projects is wise. There are a lot of build tools available for JavaScript and the NodeJS environment. You can choose any of them. Choosing a tool also makes it necessary to learn it. Over the years we have seen that JavaScript build tools have short life spans. When Angular was in version 2 we saw that people used to like Gulp first and then they switched to Webpack (before that they preferred grunt). Again, sometimes one build tool or bundler does not satisfies all our needs. To work with Angular we have a very convenient tool called Angular CLI (CLI = Command Line Interface). Currently Angular CLI uses Webpack under the hood, but we do not need worry about what it is using. Again, Angular CLI does more work than Webpack alone could do. Angular CLI is available through npm. Run the following command to install it.

npm install -g @angular/cli

The -g option was used to instruct npm to install Angular CLI globally. After installing this globally ng command will be available from your command line on your system.

Starting a Project

With the help of Angular CLI or the ng command we can easily create a new Angular project. It will create the package file, add all the necessary libraries, create configuration files, and set up a lot of other boring stuff for you. It will also create a very simple hello world like angular application so that you can start coding right away or test by running a server to see that everything is alright. Choose or create a directory where you want to create your Angular application. Let's call our Angular application awesome-app. The format of creating a new application with the ng is: ng new <app-name>. Let's create our awesome app with the following command:

ng new awesome-app

Now change your directory to the application directory with the following command:

cd awesome-app

Running the application

We do not need to install any type of web servers to run our application. We can fire up a development server with the help of the command line tool like below:

ng serve

Point your browser to http://localhost:4200. 4200 is the default port for serving Angular application at development time. If nothing is wrong you will see a very simple Angular greeting page with some links and a logo.

If you want to have the link open automatically in the browser then you can use the optional command line argument --open like below:

ng serve --open

This will compile your application, bundle it and serve it to the browser.

Automatic Change Detection

At development time it is necessary to have change detection mechanism so that whenever some changes happen in the project the application automatically gets rebuilt and served to the browser. With ng serve you get that feature for free. You do not need to think about how to achieve the change detection feature—let Angular CLI do the heavy lifting for you.

Initial Application Files

With the help of ng new we get a bare minimum Angular application ready for you. Below are the files that were automatically created in my case:

e2e/app.e2e-spec.ts
e2e/app.po.ts
e2e/tsconfig.e2e.json
karma.conf.js
package.json
protractor.conf.js
README.md
tsconfig.json
tslint.json
.angular-cli.json
.editorconfig
.gitignore
src/assets/.gitkeep
src/environments/environment.prod.ts
src/environments/environment.ts
src/favicon.ico
src/index.html
src/main.ts
src/polyfills.ts
src/styles.css
src/test.ts
src/tsconfig.app.json
src/tsconfig.spec.json
src/typings.d.ts
src/app/app.module.ts
src/app/app.component.html
src/app/app.component.spec.ts
src/app/app.component.ts
src/app/app.component.css

For the beginners the files that we need to focus on are the followings ones:

src/app/app.module.ts
src/app/app.component.html
src/app/app.component.ts
src/app/app.component.css

Conclusion

Angular has a steep learning curve compared to other frontend web frameworks. In this article we have skipped a lot of the complexity of setting up and configuration with the help of Angular CLI. Once you start to advance in your learning of Angular I will start teaching you various internals of these thing gradually.

About the Author

My name is Md. Sabuj Sarker. I am a Software Engineer, Trainer and Writer. I have over 10 years of experience in software development, web design and development, training, writing and some other cool stuff including few years of experience in mobile application development. I am also an open source contributor. Visit my github repository with username SabujXi.