Angular as a Frontend Framework, Evolution and Getting Started.
Why do we need framework?
If you are a web developer you definitely have a great knowledge about HTML, CSS, JavaScript. Because browsers can read and understand HTML, CSS, JS files only. Other than that browsers can’t understand anything. If you are developing something you can use HTML for your basic structure. CSS for enhance your web page’s outlook make it attractive for users.
In a advanced web application users should allowed for made some action with the frontend. Suppose you want to send a feedback to give a review to some website. Then you type something and hit Enter. Then developer need to get that message form the textbox and send it to the backend. That interaction part will be handled by JavaScript. We can use JS for program our web application and manage interaction in your frontend application while browsing.
Suppose you are a beginner in web developing. you need to develop a frontend web application. You can do it in two ways,
You can open your text editor and start writing HTML, CSS, JS codes separately. If you choose that way you must hard code every single commands, queries. If we want to build our application more user friendly and attractive, this coding part will be more complex and hard to maintain. Some important JavaScript patterns such like Structural & behavioural patterns are hard to understand and write correctly. If somehow, we manage to complete all our logic part correctly but we will face a executing problem. Because those patterns are hared to test they require special requirements.
So, we need a better functional way to create and structure our web application properly. For that you can use frontend framework such as Angular, React, ViewJS like that. These frameworks include advanced libraries and document files.
Arrangement in which software provides greater functional that can be extended by additional user written codes. It also allow standers way of creating web applications. Frameworks can use to simplify the process of creating web application. They have inbuild functions libraries which are reusable. This means if you want to use same functionality in multiple places inside your projects you can use prewritten function or library inside the framework for that and complete your project more easily and efficiently. In that case framework will complete more task for you. That why those frameworks are so popular among web developers.
Suppose you building a website from scratch you have to start create a empty directory and code some HTML, CSS, JS files. And think you are a professional developer. Then you have to create this scratch files again and again. You have to repeat same process again and again if you choose that method. If you use a framework for your project you can use inbuild function inside the framework and complete your project quickly. You don’t want to code everything. So you can focus bigger factors that make your project more advanced. That method save your time and bring your project high level.
Angular as a framework
In a simple words angular is a framework for building client application based on HTML, CSS and Java Script / TypeScript is a advanced level of java script that complies to JavaScript in the compiling process. Most angular application rends with typescript. Angular is one of the most well-known solutions for SPA (single-page application) growth. Always render a single page no all the pages that we have when we are going some routing only single page is loading that is the architecture of angular. Also it is an open source Model-View-Controller framework It is the most functional method to create single page applications. For almost 10 years, it has been around and since then it has gone through numerous changes. The first version of the project — AngularJS — began back in 2009 and laid the groundwork for the development of today’s front-end application.
Evolution of Angular
AngularJS was originally developed in 2009 by Misko Hevery at Brat Tech LLC as the software behind an online JSON storage service, that would have been priced by the megabyte, for easy-to-make applications for the enterprise.
AngularJS was introduced to the market in 2010 as a JavaScript framework for building client application. Soon it came more popular angular team was decided to add new features to the core. But the framework was not designed with need of today’s applications. And 1st AngularJS framework was more complex and it hard to understand and testing. They gather worlds best web developers and decide to rewrite the original code(framework) using Typescript. As a result, Angular 2 was released in May 2016. This new version was entirely different from angular vision. Actually, it is a completely different framework externally. This conversion effect more developers. They had lot of application written by AngularJS and they had to rewrite their exciting application from Angular 2 again. This is a much better framework compare with previous version. And it is easier to understand and work with. After few upgrades of Angular 2 (2.3) suddenly they release Angular 4. They never released Angular 3. But unlike Angular 2 Angular 4 was not like any other framework developers used before. There was lot of breaking changers and it was not a major upgrade. There was only one major change in angular 4. They include new Router library package (@angular/router-3.3.0) inside Angular 4. Before that Angular 2 had @angular/complier-2.3.0, @angular/core-2.3.0, @angular/http-2.3.0 packagers only. If we consider overview of those variations, we can think angular 4 as Angular 2.4. The latest version of angular is Angular 11.0.0 it was released last year (Nov 11 2020). After all the confusion in the world community about Angular versions Angular development team decided to drop the version suffix and simply called all angular framework as “Angular”. If we want to speak about Angular 2 or later versions in any discussions or articles, we should really use word angular.
Let’s discuss about the architecture and special features in AngularJS.
We can recognize mainly two features in AngularJS
· MVC (Model-View-Controller)
· Data Model Binding
MVC Architecture in Angular
AngularJS is built on the famous concept of MVC (Model-View-Controller), a design pattern used in all modern-day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different layers helps to manage the application more easily and effectively. Let’s discuss about those divisions separately
1)Model
The model is the heart of the application. The application’s business logic, or, in simpler terms, the application’s capabilities as a whole, can be represented as the application’s model part. In order to preserve the state of the application, the logic within the model layer could deal with storing and managing data. The model layer contains all the network interactions that your application makes, the sorting and complex calculations that it performs on the received data.
2)View
The View is the user interface of the application. The view reflects the state of the application. Views should not have any logical part in their implementation other than the ones needed to take inputs or display data on a screen in order to improve decoupling in the application architecture.
2)Controller
Communication between the view and the model is handled by the controller. It also encapsulates the functionality unique only to regulating the interaction between different logical components, as an effect of which subsystems of model and view remain decoupled. It is possible to name the controller as the linking factor between the model and the views.
Angular virtue that MVC exhibits is modularity, which helps developers to manage the complexity of developing an application. It allows the model, view, and controller modules to focus on a limited range of functionality. In short, it allows them to specialize.
Components and Modules in Angular
Components
At the heart of every angular app there are one or more components. In fact in a real world app we have hundreds of components. But what is the components?
Component is a encapsulation of data the data html mark-up and the logic for the view. Which is the area of a screen that the user see. Think you design a web page. You can take all the full page as a one view/section or you can divide that full page into smaller more maintainable and potential re-useable components.
Angular develop based on a component base architecture. Which allow us to work on smaller and more maintainable sections that an also use in many different places.
Every application has at least one component that called App Components or Route Components. In a real-world angular app probably is a tree structure component starting with a app components/Route components.
Modules
Also, angular have another concept called modules a container for a group of related components. Every angular app has at least one module which we call app module. As your application grows you may have to break that module into smaller more maintainable sub modules. If you can’t understand the logic of module concept, think about a supermarket. In a supermarket we have different sections and products. In each section it has their own related products. Ex- food section, electric section, grocery section….. We can find any product easily because of this section architecture is more effective and easier to maintain. We can think our application as the supermarket also those section as modules. When we create a modules 1st we should create app module and break it to smaller sub modules. Each module responsible for a specific area of our application. In those sub modules we have bunch of related components.
Create a small project using Angular
I use VS Code text editor to code my application. Make sure you familiar with VS code. Before creating a angular app. You must need to download and install NodeJS into your computer. NodeJS is a runtime environment for Angular application.
Here is a simple step by step guide to getting your Angular application setup with Visual Studio Code and Node. This guide will simply help you know what to install, the commands to run in PowerShell, and some basics about where to start building your app using Visual Studio Code.
- Download and Install Node JS with default settings.
- Open PowerShell in admin mode. Install Angular CLI.
npm install -g @angular/cli3. Navigate to the folder where you want to create your angular app. I went to my C: / directory in my PowerShell to run the following command. I call mine “hello-world”, but you can name it anything you want.
ng new hello-world4. cd into your new app directory that you just created, in this case.
cd hello-world5. Build app and start server.
ng serve
6. Navigate to http://localhost:4200
7. Open VS code and you can see multiple packages are there. In the package.json has all of your angular dependencies and other packages.
8. You can add all your components in the app folder.
After finishing those basic steps, we can create components and modules. I provide you some video materials describes how to create and organize components and modules step by step. Please refer that videos carefully.
The Conclusion
So, this is an introduction to get a clear idea of what is Angular and why should we learn Angular. If you are a beginner at Angular, this article may very helpful and hopefully will be an inspiration to get started your web development career.
