The Angular Series - Introduction And Setting Up The Environment - Part One

Introduction

Hi there, nice to see you here. In this Angular series, we’ll explore everything about Angular. We’ll make an e-commerce application using what we’ll learn in this series. So, let’s get started with Angular.

Angular is nothing but a framework for building client applications in HTML, CSS and Javascript/Typescript. Typescript compiles into Javascript. Typescript is more common in the Angular community because Angular is written itself in Typescript. If you never worked with Typescript before, don’t worry, we’ll explore it in this series.

Roadmap

This is the first article of our Angular Roadmap. Remaining articles are here

• Typescript in a Nutshell - Angular Series Part 2
• Building Blocks of Angular - Angular Series Part 3
• Binding Variations With Displaying Data - Angular Series Part 4

Why Angular when we already have Javascript/jQuery?

Can we not use plain old Javascript or jQuery? We certainly can, and there are a lot of web applications already working with Javascript and jQuery. As our application gets more complex, our Javascript and jQuery code is hard to maintain. We need a way to properly structure our application. Well, Javascript Patterns {Module Patterns, Prototype Patterns}  help us for structuring, but these patterns are hard to understand for the beginners to Javascript. We already know that Javascript and jQuery are hard to test so for a couple of years many frameworks have been built and evolved to make web application development easier. Angular is an example of such  a framework.

It gives our application a clean and loose structure that is easy to understand and easy to maintain. It also brings a lot of utility code that we can reuse in various applications especially when dealing with users' navigation and the browser history. Applications developed by Angular are more testable so we can easily write automated test (unit test) to test various parts of our application.

So, the final answer is Angular is not essential but it makes your life a lot easier.

The architecture of Angular Applications

A lot of modern application have at least 2 parts

• Frontend (UI)
  We use HTML, CSS, Javascript, TypeScript, Angular, JQuery to build the front end.

• Backend (Responsible for storing the data and apply operations)
  And both of them interact with each other to get and save the data.

How Do We Save Our Data In Angular?

We don't save the data in Client side because it can easily disappear as the user clears the browser data or moves to a different computer, that's why we store the data into the server. So, here we often have one or more databases as well as a bunch of HTTP services or APIs to make this data available to the client.

These HTTP services/APIs are the endpoints that are accessible via the HTTP Protocol. So we call the simple HTTP to get or to save the data.

Now, let’s make our environment ready for Angular.

Step 1

• Install node.js
  
  Actually, the node provides some tools that we need to build Angular projects.
  
  
  
  Download LTS (Recommended For Most Users) Windows Installer and install it.
  
  Current (Latest Features) has more features but it is not stable yet.

• Now open command prompt to make sure your node.js is installing.
  
  
  
  As we can see here, node and npm both have been installed in the system.
  
  NPM is basically used to install third party libraries like we do in Package Manager Console in .Net Environment.

Step 2

Now, we’ll install Angular CLI through npm. Angular CLI is a command line tool that we used to create a new Angular project or generate some boilerplate code (scaffolding) as well as deploy the packages on the server. So, let’s install Angular cli. The command pattern to install anything in the system with npm is.

npm install -g PackageName

-g means for global installation and if you don’t put (-g) here, Angular CLI will be installed only in the current folder and it will not be accessible anywhere else.

Run the command prompt as (Run as Administrator)

C:\Windows\system32> npm install -g @Angular/cli

After completing the process we need to make sure whether the package is installed or not. So, run the command.

C:\Windows\system32> ng --version

Step 3

Now, if you don’t have Visual Studio Code installed then install it, please. And if you’ve installed it then open the Visual Studio code.

And open the integrated terminal.

As we already know, one solution or one directory can have multiple projects. So, instead of making the project directly, let’s create a directory and then make the Angular project in that directory through the terminal.

PS C:\Users\Ami Jan> mkdir HelloWorld

PS C:\Users\Ami Jan> cd HelloWorld

PS C:\Users\Ami Jan\HelloWorld> ng new MyFirstAngularProject

During the project creation, you might see this error

In this scenario you just need to run these commands one by one, actually, we need here GitHub email address and username.

PS C:\Users\Ami Jan\HelloWorld> git config --global user.email [email protected]

PS C:\Users\Ami Jan\HelloWorld> git config --global user.name Usama

And then finally your project will be created when you again try to create the Angular project.

I’m still facing some warnings here, we should not be bothered about these warnings. These file flags are actually used by IDE under the hood. We can build and run our application without any issue.

PS C:\Users\Ami Jan\HelloWorld> code .

 It will open our project in Visual Studio code editor.

Now, we need to make sure whether it is running or not on the server. So, come back to the Visual Studio code terminal and make sure the directory folder is first.

PM > cd .\MyFirstAngularProject\
PM > ng serve

As we can see our project is compiled successfully with localhost:4200 and Angular has created the js and CSS files for us.

Step 4

Now, open the localhost link in the browser.

Angular Project Demonstration

• Here we have “e2e” folder. It stands from end to end and here we write the unit test. A unit test is also an automated test and it simulates the real user.
• Another folder is “node_modules” and here we store all the third party libraries which we use in our project.
  
  All these node_modules we don’t deploy on the server. So don’t worry about the complete size of our project which might be a 200 MB project. 
  
  Only a few chunks of code that we need in our application get added into the application code, and we just deploy it on the server.
  
  

• In the third folder we have “src” folder where the actual code of our application is stored.
  
  
  • Inside this “src” folder we have “app” folder and it has module and component files. Every application has at least 1 module and 1 component.
  • Here, we also have “assets” folder where we store the static files of our application. These static files can be images, icons, text files etc.
  • Here we have “environment” folder and here we store configuration settings for the different environments.
    
    
  • 1^st file is for the production environment.
  • 2^nd file is for the development environment.

• Here, we also have favicon file and index.html file which loads into the browser.
• Here we have “main.ts” file which is the starting point of our application. It is written in typescript.
  
  In a lot of programming languages, we have the concept of the main method where the application starts its execution. We have the same concept in Angular applications. So here in Angular, we’re actually bootstrapping the main module of our application which is “AppModule”. Angular loads this module and surely everything starts with this main method.

• Here we’ve “polyfills.ts” files which imports some scripts that are required for running Angular applications. As we already know that there is an issue in Javascript support in different browsers, so we need to write the polyfills to make it responsive on all the browsers. And Angular is the JS framework, to run the application on different environments we need polyfills under the hood.
• Here we have “style.css” for the global application styling. Each page and each component can have its own style we’ll explore it later on.
• Here we’ve “test.ts”, it is basically used for setting up and testing the environment.

• Outside of the “src” folder, we have:
  
  
  • angular.json
    Related to the Angular configuration.
    
    
  • .editorconfig
    It is important when you’re working in a team environment, all the team members should have the same settings in this file.
    
    
  • .gitignore
    It is used to ignore or exclude certain files and folders from your git repository. Git basically is nothing but managing and versioning your source code.
    
    
  • package.json
    This is a standard and basic file which is included in every single node the project has. It has the information about the dependencies (package and libraries) and their version numbers as well.
    
    
     
    As we can see each library starts with @angular and then its own names comes. And if you aren't going to use any library in your project, you can delete it from here.
    Here we also have “devDependencies”, these are the libraries that we need to develop this application. These libraries are purely important for the developer machine, not for the purpose of running the application and deploying on the server.

• Here we have “tsconfig.json” which is a configuration file of typescript. Typescript compiler looks at these settings and on the basis of these settings, we compile our typescript code into Javascript. In the future, if you’re working with the complex application then you can change your typescript configuration here in this file.
  
  
• And in the end, we have “tslint.json”, it is basically a static analysis tool for typescript code. It helps us for typescript code in readability, maintainability and functionality errors.

Webpack

Now let’s make some changes here in this application and let me show you the magic of Angular.

• Open the “app.component.ts” in-app folder.
• Make some changes in title’s value in AppComponent class
• Open the VS Code Terminal
• And hit save (Ctrl + S)
  
  

AngularCLI uses the tool web pack which is actually the automation tool, it gets all our stylesheets and javascript and combines them in a bundle and then minifies that bundle for optimization purposes. Web pack runs whenever we save any changes in the project and updates the data on the server without refreshing the application. This feature of web pack is called Hot Module Replacement (HMR).

Now, if we open our browser and inspect the page, then we’ll see the references on the page.

And if we open our index.html page from “src” folder, we have no file reference in the file.

These references are dynamically added by web pack into the HTML file.

Notice

If you see the page view source, we have styles.js which means all our stylesheets are compiled into the JavaScript bundle. All our styles work inside the JavaScript.

The difference of Angular Version History

AngularJS was first introduced in 2010 as a JS Framework for building a client application. Soon it gained popularity. And Angular team started adding new features to the core. But the framework was not designed with the needs of today’s applications in mind and it was overly complex. So Angular team decided to rewrite the original framework using typescript.

And as a result, Angular 2 came out in mid-2016. This new version is an entirely different version from Angular 1. And you can feel that it is an entirely different thing. This made a lot of developers unhappy because they had a lot of applications built with Angular 1 and with each application over a few thousand lines of code had to be rewritten. But this new framework is a much cleaner framework and it is a lot easier to understand and to work with.

And after a few minor upgrades to Angular 2, something strange happened eventually.

2.0     ->      2.1     ->      2.2     ->      2.3     ->      4 ( suddenly Angular 4 came out)

This made developers wonder what happen to Angular 3. But unlike Angular 2, Angular4 was not a new framework with a lot of breaking changes. In fact, it wasn't even a major upgrade.

Let's see what happens.

Angular consists of few libraries that are distributed as a separate node package via npm i.e.

          @angular/code                         2.3.0

          @angular/compiler                   2.3.0

          @angular/HTTP                       2.3.0

          @angular/router                       3.3.0

and a few other libraries. All these libraries were the same version except the router library. So in order to align these versions and avoid confusion in the future, the Angular team decided to create Angular version 4.

So Angular 4 is not the major upgrade to Angular 2 and you can even think of it as Angular 2.4 simply.

After all these confusions in the community about Angular versions, the team decided to drop the version suffix and simply call the framework Angular.

So now, we have 2 kinds of Angular

AngularJS    (1.x)              1st gen of Angular, written JS and it is going to die sooner or later

Angular        (2+)          

Conclusion

We’ve learned a lot about Angular here. We’ve created the Angular 6 application using Visual Studio Code Terminal and with the help of Angular cli. We’ve also displayed the custom message on the screen and we’ve explored web pack and different versions of Angular. See you in the next part of the series.