Simple Introduction to Angular 6

Background of Angular and its Releases

The first version of Angular was released in Oct 2010 by Google and it was JavaScript-based, open-source front-end web application framework. As you know it called AngularJS or sometimes Angular 1. It became popular because of its built in functions to create reactive and responsive web interfaces. But when it comes to 2012–14 time frameworks developed by facebook (ember.js and react.js) became very popular than AngularJS because of their better performance. They were also highlighting the drawbacks of AngularJS framework and the Angular team decided to create new framework instead of upgrading the Angular JS by considering all the experiences they learned through their first release. It made the Angular 2 release as a complete development of a new framework from scratch. Based on the core concept of Angular 2, up to now there are Angular 4, Angular 5 and Angular 6 releases which are having improved performance than Angular 2.

Angular 2 and Angular 4 will use the same concept and patterns. Angular 4 simply is the next version of Angular 2 with few changes and few performance improvements. If you know Angular 2 already then it is not a big deal to learn Angular 4 because the base concepts are still the same.

Talking about Angular 5 with Angular 2 are basically the same. The Angular project moved to Semantic Versioning, which means every breaking change results in the major version to be increased. Angular 5 is just a newer version of Angular 2.

The differences between Angular 2 vs Angular 6 are again very minimal where most of the changes are internal and largely updates focus involve performance, build size and tooling improvements. If you learn Angular 2 you know Angular 6 so those courses are still very applicable.

My advice is you to learn the newest version and to learn all applicable versions it is best to start with Angular 2. Therefore to learn everything I will start from the newest version which is Angular 6 at the moment. I will be explaining the core concepts which are common to Angular 2 , 4 and 6 first because it will help you to understand improvements and minor level changes among versions while learning core concepts completely.

What is TypeScript

TypeScript is a super set of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code. For a large JavaScript project, adopting TypeScript might result in more robust software, while still being deployable where a regular JavaScript application would run.

How to setup Angular 6

Setting up the Angular project will be a bit difficult task without Angular-CLI but with CLI it really is not. To setting up Angular CLI we need to install Node.js first. So to verify that you have Node.js already installed go to the command line and put in,

node -v

If your console does not recognize the command it means you need to install the latest version of Node.js. You can install it from here.

If you have already installed, it is better to have the latest version of Node.js and you can simply make you Node.js to latest version by following these instructions.

After updating the latest available stable version you good to go. Why do we need Node.js installed will be a question you may have. It is actually to get the use of node package manager (npm) to work with Angular CLI and to manage dependencies of the our Angular project. As we mentioned earlier, now we need the Angular CLI installed. To do that simply go to the command line and put,

Windows (with administrative privileges)

npm install -g @angular/cli

Linux

Sudo npm install -g @angular/cli

This will download the latest version of Angular CLI and install it locally in you machine automatically. -g stands for global and it will allow you to navigate into any folder and use it. Once the installation finished you are to create a new project. Navigate to wherever you want to create your project and put,

ng new first-app

Running this command will create a new folder where you navigated in order to create new Angular application named “first-app”. This will take couple of minutes to finish and when finished, navigate into the folder named “first-app” using,

cd first-app

Then to start our Angular application on local development server we can run,

ng serve

This will start the local server and compile the code into JavaScript. Because in Angular 6 we are using TypeScript, since browser is not able to run TypeScript it needs to compile / build the code to JavaScript. This local server will keep running and watch for the changes of the code. Whenever we do update the code this will automatically update the page.

After successfully compiling you can go into browser and type http://localhost:4200 and see whether your Angular 6 application is running correctly or not.

To edit our first Angular 6 application we need to use an IDE. here I will be using WebStorm and If you have not already configured an IDE use this link to download WebStorm. After downloading and installing you can navigate into the project folder and look at the folder structure of our new application.

Folder Structure of Angular 6 Application

e2e

e2e stands for end to end testing or also known as integration testing is a way to make sure that our application running and functioning correctly. Commonly we use this e2e testing to ensure our components are working correctly and cohesively together.

Node_modules library root

node package manager, which installs packages locally into a project, specifically, into the node_modules folder. In the IDE view, the grey folders appear to be direct dependencies listed in your package.json, while the red (orange) folders are indirect dependencies that required. In simple terms this will hold all the dependencies of the project. We should not change anything in that folder because it is maintaining by Angular CLI. Also this will be the place for the compiled code of the application when compiling TypeScript code to JavaScript.

src

When developing a certain application you will spend over 99% of your time in this folder. I mainly concerned about looking at the src/app folder, where all the actual logic is going to go. As I mentioned earlier Angular 6 is component based. Component will be the building block of an Angular 6 application. In app folder there five files which you can observe.

app.component.ts

This is the building block of the application. We can create more and more component upon to the requirement. Initially we can think this app.component.ts file is the parent of component files. And if you look at the file extension, you can see it is in TypeScript format. In this file there are three sections as follows.

import section

import {component} from ‘@angular/core’;

This is about the importing the component provided by the Angular framework.

decorator section

Selector here to uniquely identify the component anywhere in the application. Also this allows us to use the component for outer the application. If you are familiar with CSS selectors, this component selector is generally a something similar to that.

templateUrl contains the template which can load a html file from inside or outside of the project. Think if the component is having less than 3 or 4 lines of html code we can define it inside this app.component.ts file itself as an inline template. But if you have a bigger template file(html file) you should implement it in a different file which is the best practice of developing an Angular applications. stylesUrl is to load styling to the html code and it can also be defined inside the array above in this component.ts file if it having few lines but not a good practice when it comes more lines.

class section

As you can see the third section is the class section which is having the logic defined by the component.

app.component.html (template file)

While each and every component takes the logic of the application it needs to have templates for user to interact with the front-end of the application. This html code defines the template of the component and every component must have a template file. As mentioned this can be defined inline of the component.ts or defined in a new file inside or outside of the project.

app.component.css

This will contains the styling that is required to go with the template file. This is not a necessary file. There can be template files without styling and all you have to do is leave it blank. Or otherwise as mentioned this can be defined inline of the component.ts file or defined in a new file inside or outside of the project.

app.module.ts

This describes how the application parts fit together. Every application has at least one Angular module which you bootstrap to launch the application. You can call it anything you want. The conventional name is AppModule.

After the import statements, you come to a class adorned with the @NgModule decorator. @NgModule takes a metadata object that tells Angular how to compile and launch the application. Inside that decorator we can observe imports, declartions and bootstrap statements.

imports in @NgModule Decorator.

Add a module to the imports array when the application requires its features and here the BrowserModule that this and every application needs to run in a browser. The import statements at the top of the file and the Angular module’s imports array are unrelated and have completely different jobs. Simply it says which are the modules that you use in your application.

declarations in @NgModule Decorator.

Each and every component created is added automatically to this array. For now it will contain the lone component of the application. You tell Angular which components belong to the AppModule by listing it in the module’s declarations array. As you create more components, you’ll add them to declarations. Simply this array declares which directives (pipes) that you use in your application. Then you may definitely have a question of what do the directives means? Directives are instructions that defines what to do. Components are such something like instructions.

bootstrap in @NgModule Decorator.

This will contain the root component that Angular creates and inserts into the index.html to host web page. Still you are not aware of index.html file but don’t worry I will explain it below in a descriptive way. For now think it as a single html file which we use for hosting in a production web server. While you can put more than one component tree on a host web page, that’s not typical. Most applications have only one component tree and they bootstrap a single root component.You launch the application by bootstrapping the root AppModule. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM. simply it tells which module that your application get starts with.

app.component.spec.ts

The spec files are unit tests for your source files. The convention for Angular applications is to have a .spec.ts file for each .ts file. They are run using the Jasmine javascript test framework through the Karma task runner when you use the ng test command. Simply you don’t need to go deep with this file because at the beginner stage we will not use this test file.

When we come out from the app folder, we will look at what are the important files and folders we should get to know.

assets

There might be occasions where we need to serve files which aren’t part of the Angular process, like static files or images. Those files are referred to as assets.

environments

Angular CLI have the concept of different environments like development (dev) and production (prod). Those two environments are inside the environments folder. Keep in mind that you can create new environments too.

index.html

As I mentioned in App.module.ts file initially index.html loads on server. When you look at the code of index.html file it the selector of our root component inside the body tags. As I explained putting multiple selectors inside the index.html is not the procedure but referring through the root component is the best practice.

But how do we tell Angular to start and how do the Angular know about the components. You might think if there is a selector and then Angular should be able to know about the component. It is true but without knowing which selector refers to which component Angular 6 will not be able to identify the component. Also by looking at the index.html file you can see there are no any scripts or imports declared. As the solution to all of these what Angular 6 does is adding those scripts, imports which we need to manage our project dynamically whenever you run the application.

To understand how Angular CLI is doing this dynamically adding task let’s look at the running index.html file (when you execute ‘ng serve’ and then it will load on your browser using local server). When you go into the page source by inspecting the any element you can see there, you may observe dynamically added JS files which we can not see at the index.html file. inline.js, style.bundle.js, vendor.bundle.js and polyfills.bundle.js are 3rd party related and CLI based scripts. main.bundle.js here is to start our Angular application. This will use our code, all the Angular 6 codes and additional Angular 6 third parity files to make our application run. In Angular codes there is a file named as main.ts and this script file use that file to start our application at the very beginning.

main.ts

This will execute at first and initiated from the bundle.js file and also bootstrap our application. On the above of the file there are imports and a condition to check the mode (development or production). Basically this condition checker will change the debug messages generated by Angular CLI.

There is an imported method at the bottom to call appModule.ts file in our application which makes Angular CLI know about our application.

When index.html loads it looks at the selector of the root component and recognizes it by the above knowledge and loads its html template file which is app.component.html in our application.

polyfills.ts

Polyfills in Angular are few lines of code which make your application compatible for different browsers. polyfills.ts was provided by Angular to help you do away with need to specifically set up everything.

styles.css

This will contain global CSS stylings if we need to add to all templates in our application. As an example consider a certain application containing footer and a navigation bar as static component during all pages in the application. We can insert styling for those components in to this global styling file.

package.json

Node package manager installs packages that are identified in a package.json file. The CLI, ng new command creates a default package.json file for your project. This package.json specifies a starter set of packages that work well together and jointly support many common application scenarios. You will add packages to package.json as your application evolves. You may even remove some.

The package.json includes two sets of packages, dependencies and devDependencies. The dependencies are essential to running the application. The devDependencies are only necessary to develop the application. Keep in mind that package.json file can be manually edited on requirement.

Summary

Angular is a great start for you to do front-end developing. it has so many features and benefits which are like cross platform support, improved speed and performance, productivity and full development story support. This will help you to understand the core concept behind the Angular application by understanding the folder structure and relations among then. From here you good to go with implementation of small Angular applications to get familiar with coding stuffs like TypeScript syntaxes and all. If you correctly understand the core concept you can be a pro in Angular 6 putting less effort within short period of time.