Why do we need framework?
Suppose you are a beginner in web developing. you need to develop a frontend web application. You can do it in two ways,
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
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.
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
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.
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.
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
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.
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/cli
3. 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-world
4. cd into your new app directory that you just created, in this case.
5. Build app and start server.
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.
Meet Google Drive - One place for all your files
Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start…
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.