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

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.

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

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.