Related Blogs
Despite the advent of various JavaScript frameworks in history, nothing has come close to the holy trinity of Angular, React, and Vue. This article compares Vue vs Angular to determine which is the superior framework for your needs.
Angular.js and Vue.js are both front-end JavaScript frameworks used to construct web interfaces. Vue is a more advanced, compact framework than Angular, which is a TypeScript-structured framework.
Therefore, let’s make this decision easy for you by pitting Vue against Angular. Let’s begin the debate of Vue vs Angular by understanding the fundamentals of both web frameworks.
1. What is Angular? – An Overview
Angular is a TypeScript-based programming platform. Angular includes the following features as a platform:
- A framework for creating extensible web applications built on components.
- A set of well-integrated modules that provide a wide range of functions, such as routing, form managing, customer interaction, and much more.
- A set of developer tools that aid you in the development, building, testing, and updating of your code.
You can find a set of more Angular features.
You can use Angular to create apps that expand from individual projects to enterprise-level solutions. Angular is built to make upgrading as simple as possible, so you can benefit from the new features with minimal effort. The Angular ecology, best of all, is made up of a varied community of million engineers, library publishers, and creators.
What is Angular?
— Angular (@angular) October 26, 2022
Angular is designed to help teams and developers build web apps with confidence. 💪@marktechson was at #AngularDay with the deets! https://t.co/7LnHK6c1Zt
2. What is Vue? – An Overview
Vue is a framework and platform for creation of websites that covers the majority of the standard functionality. However, the web is immensely diverse, and the things we construct on it can take on a wide range of shapes and sizes. Vue is built with this in mind, and it’s intended to be adaptable over time. Vue can be utilized in a variety of ways, depending on your needs:
- Static HTML enhancements without the need for a build step
- Web Components can be embedded on any page.
- Single-Page Application (SPA)
- Fullstack / Server-Side-Rendering (SSR)
- Jamstack / Static-Site-Generation (SSG)
- Targeting desktop, mobile, WebGL or even the terminal
Considering the versatility, the essential Vue knowledge is common across all of these application scenarios. Although if you are just getting started, the knowledge you gather along the way will help you achieve more ambitious goals in the future. If you’re an experienced user, you may choose the best approach to use Vue based on the challenges you’re attempting to address while maintaining the same level of performance.
3. Comparison between Angular and Vue
3.1 Learning Curve
If you wish to construct an Angular application, you must be familiar with MVC and TypeScript. Nonetheless, you won’t find this with Vue. Vue offers greater customisation and built-in templates, which make it easier to use than Angular.
Vue is created by combining React and Angular. Thus, Vue.js developers may implement Angular or React-based services on the Vue.js framework with relative ease.
Angular | Vue | |
---|---|---|
Prerequisites |
|
|
Best Practices to follow |
For more, click on the link. |
For more, click on the link. |
Check out technology enthusiast John Papa’s response when asked about which framework is easy to learn.
Q. Which framework is best to learn? Which framework is in demand for IT software jobs?
— John Papa (@John_Papa) July 2, 2018
A. Spend a few days trying all 3. Cap each at a day. Then compare the experience that suits you. I see more jobs for React and Angular now, but Vue seems on the rise
16/n
The verdict: Angular’s learning curve is much steeper compared to Vue.js From Vuejs.org
3.2 Ease of Testing
Testing is a fundamental component of the Angular ecosystem, and all JavaScript programs must pass through a set of checks. The testing ease allows us to construct the project from the beginning and test its components without difficulty.
Many advantages are provided by Angular’s quick unit and end-to-end testing integrations. You can protect your software from regressions and offer a firm basis for your application’s supportability and development by creating unit tests. Similarly, running end-to-end tests on your Angular project will guarantee that it works as planned. It will prevent you from introducing issues into operation and will make the construction and/or extension of agile development and deployment workflows for your app much easier.
Image source from Angular.io which shows the output of test result in Jasmine HTML responder.
Vue is an emerging star whose testing capabilities are standard, clear, and effective. It does not provide too lavish tools, nor does it compromise the testing capability of its software. Vue’s unit testing is quite similar to other frameworks and commonly uses Jest, Mocha, or Chai. Vue’s approved libraries are Vue Testing Library and Vue Test Utils. They facilitate restructuring and code debugging by providing entry to the software and user-specific APIs. This framework enables CI/CD and offers hot reloading capabilities, enabling the creation of faster feedback mechanisms.
The verdict: Since Angular is more mature than Vue, it provides a quick unit and end-to-end testing integrations. Therefore, Angular wins here!
3.3 Scalability
Angular is more flexible than Vue since its modular development framework is more suited. Vue, on the other contrary, employs template-based syntax to reduce code reuse in huge projects.
Angular | Vue | |
---|---|---|
Back Support | Supported by Google | Vue has its own supporting community |
Scalability | The framework’s scalability is a reflection of its robust command-line interface and functionalities that work best for enterprise-level apps. | Vue is a lightweight framework, therefore, it’s harder for it to build scalable applications. |
Key points to improve scalability | Establish a single file for all CRUD operations and structure the page data model with typescript interfaces. | Web packs and Mixin components given by Vue are used to circumvent the code extension limits in order to gain scalability. |
The verdict: In terms of scalability, again, Angular wins because of its robust functionalities compared to Vue.
3.4 Security
User-generated websites demand a high level of security and management. Cross-site scripting is one of the major risks against which the client-side system must be protected. These assaults can be thwarted by the framework’s inbuilt protections.
Because there is no assurance that a hacker would not inject malicious code via a field, variable, or any other supplied value, Angular regards each value as unreliable by nature. The framework includes inner HTML for displaying user-generated material and DomSanitizer as a safety precaution. Other security options include keeping up-to-date libraries, revising the information security policy and employing AOT to compile HTML layouts and modules. Consequently, Angular is a safe framework due to its implementation of best practices, internal security mechanisms, and external resources. Here are few suggestions to follow:
- Catch pace with the most recent Angular library updates.
- Don’t make any changes to your Angular version.
- Ignore Angular APIs labeled as “Security Risk” in the records.
Evan, the inventor of Vue, once remarked that “built-in sanitizer would add additional package load for an uncommon use case,” hence automated protection of Vue code against XSS and other bug assaults is not viable. However, using additional libraries or cleaning HTML code prior to putting it in the program database provides a fair shot against security concerns. However, Vue may also dynamically insert executable HTML, URL, and JS instructions before and after processing to make the application secure. As a best practice, you can follow these suggestions:
- Examine the source code of your applications for possibly hazardous patterns, especially if any of them contain 3rd-party elements or otherwise affect what is presented to the DOM.
The verdict: Angular evaluates each value as unreliable by default, and Vue can automatically inject executable HTML, URL, and JS instructions to make the application secure prior to and after loading.
3.5 Community Support
Angular is one of the most widely used front-end frameworks. This might be somewhat related to the relative youth of Vue, Angular being the older and better-recognized front-end framework.
Angular is significantly more popular and the following graph from the Stack Overflow study is also suggesting the same.
Both front-end frameworks get their respective devoted communities, skilled front-end developers, and online persons that can assist in resolving difficult topics, build plugins, and offer ready-made solutions. Following table will show you all the data from GitHub Angular and GitHub Vue.js.
Angular | Vue | |
---|---|---|
Release date | September, 2016 | February, 2014 |
Current Version | v14.0.2 | v2.6.14 |
Fork – Github | 21.7k+ | 32.3k+ |
Stars – Github | 82.1k+ | 197k+ |
Watchers – Github | 3.1k+ | 6.1k+ |
Contributors – Github | 1572+ | 325+ |
Moreover, you can find around 287,085 questions tagged with Angular on Stack Overflow.
And, you can find around 99,230 questions tagged with Vue.js on Stack Overflow.
While comparing angular with vue, Angular has a greater number of forks, watchers, and stars. This shows vue’s popularity among developers compared to angular.
The verdict – Clearly Angular is the winner here.
3.6 Application Size
Vue is a lighter, mini version of Angular. It incorporates a variety of required capabilities and functionalities through the usage of third-party components and apps. Because Vue has very few built-in core components, you’ll also need to incorporate extra third-party libraries. The size of a basic Vue app is typically between 50kB and 100kB, which is not excessive. Vue CLI may make the software seem to be enormous once it reads the script for the first time, but by adding lazy loading elements, the information can be divided up into smaller chunks and the load time may be sped up. This decreases both the code’s scale and complexity, making it simpler to use and browse. In comparison to other existing systems, the latest version of Vue is lighter and speedier.
The distinction with Angular is that it comes with a lot more built-in capabilities and libraries. Medium-sized Angular apps are typically around 250 KB and less than 500 KB in size, in comparison to other frontend frameworks and lower application sizes. Unsurprising as it may be that larger and more complicated programs might surpass these limits, reducing the bundle sizes requires the use of a translator. As a result, Angular is a large framework with a lot of storage requirements. While many of these aspects are beneficial and required, others are unlikely to be used. This brings a layer of complexity that isn’t essential.
The verdict: Vue is lighter than Angular. So, Angular apps are usually more in size than Vue apps.
3.7 TypeScript Support
Angular’s interaction with TypeScript, the enhanced version of JavaScript, is exact. Without TypeScript, it is impossible to write programming in the Angular environment.
Vue, considers JS for code authoring. However, it also provides developers with formal decorators and types for interacting with TypeScript’s development capabilities.
The verdict: Both Vue and Angular supports TypeScript.
3.8 Performance Comparison
Angular has demonstrated that it facilitates excellent responsiveness when it concerns high-performance frameworks. Ivy processor, which is a new version of Angular’s rendering engine providing connectivity to the framework. It claims to make apps very speedy and small for unparalleled performance, as well as cut its development time by compiling its components.
Angular CLI v12 includes the new Ivy Library Distribution process with no overheard to library owners and consumers ✨
— Angular (@angular) August 12, 2021
Your libraries will now be released for native Ivy distribution…and this all happens automatically, thanks to #ngUpdate
📚 https://t.co/3aQwmw6zRt
The enhanced change detecting method and forward compilation decrease the number of times DOM utilizes pre-compiled HTML and application components prior to the browser downloading and utilizing them. This may be the cause for the framework’s increased appeal as a JavaScript tool for developing high-performance applications.
With each new functionality or expansion of an element, The Vue app’s situation becomes unpredictable, making it more difficult for the program to load quicker. Fortunately, this framework includes a virtual DOM, which acts as the default tool for improving an application’s speed. Lazy loading is one of Vue’s most notable features. It helps to decrease load times. Vue handles a third-party library asynchronously by managing key dependencies automatically and separating libraries into those that must be included in the key program bundle and those that can be placed in routes outside the core bundle. As we can see in the tweet below by Vue.JS official twitter handle, virtual DOM automatically re-renders sub trees, so you don’t need to think about it.
What if you get a virtual dom that knows when to re-render and which sub trees to re-render without you having to think about it?
— Vue.js (@vuejs) April 20, 2016
The verdict: Vue is faster than Angular and it has smaller bundle size when it comes to smaller apps. However, Angular performs best when it comes to bigger and complex applications.
3.9 Rapid Development
The internal architecture and supporting network of a framework aids developers in comprehending its environment and working inside it. The eventual rate of development is influenced by a developer’s knowledge of a certain framework and his or her skill in using it proficiently and without error.
It is vital to highlight that Angular is managed by Google and a community of individuals and corporations. They’re continuously updating this framework with new features and versions.
Angular v15 will bring user interface code reuse to another level with the new Directive Composition API!
— Angular (@angular) September 30, 2022
Check the sneak peek below and stay tuned for the docs coming in v15 this fall 🔥#ngconf2022Announcements pic.twitter.com/d515YCbNs1
Vue is managed by an open-source community and a committed team. As a result, Angular offers more thorough information and in-built solutions. Furthermore, it is more established, resulting in a bigger professional community. Vue.js’s strengths include a lightweight design, an abundance of modules and third-party extensions, and interoperability with various technologies.
The verdict: In rapid development, Angular and Vue both are equally balanced as they both are continuously updating with new features and versions.
3.10 Use Cases
Use cases of Angular
Use cases | Examples |
---|---|
Online video streaming software | Youtube Playstation app, HBO, Netflix |
Ecommerce apps | T-mobile, Nike |
Real time data app | weather.com |
News websites | The Guardians |
User generated content web apps | Upwork |
Single page applications | Gmail |
Cloud based apps | Microsoft office |
Elearning platforms | Udacity |
Mobile banking apps | Standard bank |
Video Game apps | Rockstar games |
Use cases of Vue
Use cases | Examples |
---|---|
Progressive web apps | Quina.app |
Big scale business apps | Trivago |
Existing application functionality extension | Facebook NewsFeed |
Single page apps | 9Gag |
Big scale business apps | Behance |
Other than these, vue can be used in small projects, and existing software design extensions.
3.11 Application Architecture
Angular:
Angular is one of the most popular TypeScript-based frameworks. It is used by the Angular developers to create client applications in HTML. Languages like JavaScript or TypeScript compile the applications created using Angular. This means that Angular’s architecture enables the developers to write applications by composing HTML templates with the help of markup that is Angularized.
The Angular framework was originally embedded in MVC (Model-View-Controller) but it is more similar to the MVVM (Model-View-ViewModel) software architectural setup. This means that Angular doesn’t ask software developers to split the app into different components and create a code that has the capability to unite them like it’s generally done in an MVC setup. Here the framework uses the MVVM architecture better than an MVC one. And this enables two-way data binding between View and ViewModel which helps in automatically propagating change within the state to the view of ViewModel.
Angular architecture comes with three main things as Modules, Components, and Routing. Modules are known as building blocks of the application created in Angular and they are important as apps require root modules. Components here help the application define views, which are screen set elements that can be chosen by Angular to modify the application as per data and logic. Besides this, Routing is a concept that links various components with each other so that they can be navigated to different components.
Vue:
Vue prioritizes adhering to the ViewModel methodology and the MVVM design, especially when creating large-scale applications. The View component and the Model component are bound in both directions. In this framework, M, V, and VM stand for the following:
Model: Similar functionality as the Model JavaScript object. As soon as the information object approaches the Model section, the information is converted into reactive components for the creation of separate storage layers.
View: The real managing of DOM objects occurs in the View component of Vue. It employs DOM-based templates to produce root elements that correlate with the necessary DOM components.
ViewModel: Manages the necessary synchronization between the Model and View portions of the code. This object is the principal point of contact between the programmar and the program.
The design and DOM structures of Vue are separated into two components: Filters and Directives. Unlike other solutions, Vue is not a full-fledged framework; hence, the application development process is made adaptable and straightforward due to its View layer architecture.
The verdict: Vue follows MVVM architecture pattern while Angular architecture relies on certain fundamental concepts like Modules, Components, and Routing. Both have their own pros and cons.
3.12 User Experience
Angular has become a prominent frontend framework for building user interfaces and autonomously managing the frontend. As a result of the framework’s division into modules, classes, and segments for a clean code design, user interaction is managed by templates. The framework handles the presentation of data to users with sophistication. Furthermore, the library store is accountable for managing sensitivity, and asynchronous programming involved in creating the program reactive to users and their activities.
Including the template language aids in keeping the HTML data binding and rendering on the same page. Thus, whenever an application page is produced, the framework communicates with the template syntax and immediately adjusts the view. Again, there should be no delay between updating and delivering information to users.
Considering the technology stack it provides, Vue may be an excellent choice for designing an interactive and visually appealing user interface for a web application. Virtual DOM guarantees that modifications implemented within the program do not immediately reflect visibly, allowing for greater creativity with UI design. The data binding characteristic of this framework enables developers to simply create HTML properties and values that may be adjusted at any moment without affecting the current code.
The verdict: Both the frameworks provide great user experience. However, Vue will be an excellent choice to build light weight, interactive, and visually appealing user interfaces.
3.13 Integration
Integrating Angular with third-party components and other JavaScript modules is easy.
Angular integration with hosting providers ensures you can quickly deploy your app with:
— Angular (@angular) July 28, 2021
🔥 Firebase
💙 Netlify
▲ Vercel
💫 GitHub pages
✅ Azure Static Web Apps#AngularHasNeverBeenEasier
Even though development is already in progress, Vue makes it simple to incorporate several prominent front-end libraries.
The verdict: Vue has easy integration of third party components as compare to Angular.
3.14 Complexity Level
In regards to concept and API, Angular is more complicated than Vue. As opposed to Vue, Angular takes longer to create a complex app. The documentation for Angular is also a lot more difficult. To determine the core principles, developers must spend a significant amount of time reading the documentation. It’s difficult for someone who isn’t familiar with Angular to do it quickly and begin constructing an app.
Vue is more manageable, both in terms of architecture and API. Vue may be used to create single-page software in less than a day by anybody who understands HTML, CSS, and JavaScript.
The verdict: Angular is comparatively more complex than Vue.
3.15 Sample App Development in Angular and Vue
We’ll create a To-Do app in Angular and Vue so that developers can get more idea about coding standards.
Angular
Prerequisites: Node + npm are required before we start.
Step 1 : Create Angular app with following command
ng new <applicationname> |
ng new <applicationname>
Step 2 : To store the data we will use json server,so for that
install json server by this command npm install json-server.
After that need to run json server, below command is for that
json-server --watch db.json or npx json-server --watch db.json |
json-server --watch db.json or npx json-server --watch db.json
note : (here db.json is not already created, but when we hit the command and it will created) and it will run on localhost:3000- update db.json file according to your requirements
Step 3 : Create models
In App folder create new folder named “todoModule”,inside that folder create Another folder named “todo-list”.
Create new folder names “models”
And create task.ts file.
Write following code in that file
export class Tasks { id:number=0; task_description:string=""; isDone:boolean=false; } |
export class Tasks { id:number=0; task_description:string=""; isDone:boolean=false; }
Step 4 : Then create component for todo application
Inside todolist folder,create new folder named “component” then inside That folder use command for component creation : ng g c todolist
Above command created for files for us, mentioned in below image
In todo-list.component.html file,write the following code.
<div class="container-fluid bg-light h500"> <div class="container bg-light"> <div class="row mt-4 h500"> <div class="col"></div> <div class="col-md-6 bg-white shadow"> <div class="card bg-warning mt-4"> <h4 class="text-white ps-3 pt-2 pb-2">To Do List App</h4> </div> <div class="shadow"> <form [formGroup]="todolistForm"> <div class="input-group p-4"> <div class="form-group"> <input formControlName="taskDescription" type="text" class="w440 me-2 form-control" placeholder="Enter task description" name="taskDescription1" [(ngModel)]="addTaskDescrption" /> <span class="ml-6 text-danger" *ngIf="isSubmitted && !todolistForm.valid">This field is required</span> </div> <button type="button" class="h39 btn btn-outline-success" (click)="addTask()">+</button> </div> </form> </div> <h4 class="text-primary mt-4">Tasks:</h4> <div class="task-list"> <div class="m-3" *ngFor="let task of taskList"> <div class="p-2 shadow border"> <div class="input-group row ps-3"> <div class="card col-md-10 border-0"> <label [ngClass]="{'strikethrough':task.isDone}" id="{{task.id}}"> {{task.task_description}} </label> </div> <button *ngIf="!task.isDone" (click)="taskCompleted(task)" class="btn btn-outline-primary col w-10 me-2 "><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" /> </svg></button> <button (click)="deleteTask(task)" class="btn btn-outline-info col w-10 me-2" *ngIf="task.isDone"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"> <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" /> </svg></button> <button (click)="deleteTask(task)" class="btn btn-outline-danger col w-10"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16"> <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" /> </svg> </button> </div> </div> </div> </div> </div> <div class="col"></div> </div> </div> </div> |
<div class="container-fluid bg-light h500"> <div class="container bg-light"> <div class="row mt-4 h500"> <div class="col"></div> <div class="col-md-6 bg-white shadow"> <div class="card bg-warning mt-4"> <h4 class="text-white ps-3 pt-2 pb-2">To Do List App</h4> </div> <div class="shadow"> <form [formGroup]="todolistForm"> <div class="input-group p-4"> <div class="form-group"> <input formControlName="taskDescription" type="text" class="w440 me-2 form-control" placeholder="Enter task description" name="taskDescription1" [(ngModel)]="addTaskDescrption" /> <span class="ml-6 text-danger" *ngIf="isSubmitted && !todolistForm.valid">This field is required</span> </div> <button type="button" class="h39 btn btn-outline-success" (click)="addTask()">+</button> </div> </form> </div> <h4 class="text-primary mt-4">Tasks:</h4> <div class="task-list"> <div class="m-3" *ngFor="let task of taskList"> <div class="p-2 shadow border"> <div class="input-group row ps-3"> <div class="card col-md-10 border-0"> <label [ngClass]="{'strikethrough':task.isDone}" id="{{task.id}}"> {{task.task_description}} </label> </div> <button *ngIf="!task.isDone" (click)="taskCompleted(task)" class="btn btn-outline-primary col w-10 me-2 "><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16"> <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" /> </svg></button> <button (click)="deleteTask(task)" class="btn btn-outline-info col w-10 me-2" *ngIf="task.isDone"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16"> <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" /> </svg></button> <button (click)="deleteTask(task)" class="btn btn-outline-danger col w-10"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3" viewBox="0 0 16 16"> <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z" /> </svg> </button> </div> </div> </div> </div> </div> <div class="col"></div> </div> </div> </div>
In todolist.component.ts file, write following command
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Tasks } from '../../model/tasks'; import { TodolistService } from '../../services/todolist.service'; @Component({ selector: 'app-todo-list', templateUrl: './todo-list.component.html', styleUrls: ['./todo-list.component.css'] }) export class TodoListComponent implements OnInit { taskObj: Tasks = new Tasks(); taskList: Tasks[] = []; addTaskDescrption: string = ""; public todolistForm!: FormGroup; isSubmitted=false; constructor(private service: TodolistService,private fb: FormBuilder) { } ngOnInit(): void { this.taskList = []; this.initializeForm() this.getTask(); } initializeForm() { this.todolistForm=this.fb.group({ taskDescription:new FormControl(null, Validators.required) }) } getTask(): void { this.service.getTask().subscribe(response => { this.taskList = response; }); } addTask() { this.isSubmitted=true; if (this.todolistForm.valid) { this.taskObj.task_description = this.addTaskDescrption; this.taskObj.isDone = false; this.service.post_Put_Task(this.taskObj).subscribe(response => { this.ngOnInit(); this.addTaskDescrption = ""; this.isSubmitted=false; }) } } deleteTask(task: Tasks): void { this.service.deleteTask(task).subscribe(response => { this.ngOnInit(); }) } taskCompleted(task: Tasks): void { if (this.taskList) { const filterTask = this.taskList.filter(x => x.id === task.id); if (filterTask && filterTask[0]) { filterTask[0].isDone = true; this.service.taskDone(filterTask[0]).subscribe(response => { this.ngOnInit(); }) } } } } |
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { Tasks } from '../../model/tasks'; import { TodolistService } from '../../services/todolist.service'; @Component({ selector: 'app-todo-list', templateUrl: './todo-list.component.html', styleUrls: ['./todo-list.component.css'] }) export class TodoListComponent implements OnInit { taskObj: Tasks = new Tasks(); taskList: Tasks[] = []; addTaskDescrption: string = ""; public todolistForm!: FormGroup; isSubmitted=false; constructor(private service: TodolistService,private fb: FormBuilder) { } ngOnInit(): void { this.taskList = []; this.initializeForm() this.getTask(); } initializeForm() { this.todolistForm=this.fb.group({ taskDescription:new FormControl(null, Validators.required) }) } getTask(): void { this.service.getTask().subscribe(response => { this.taskList = response; }); } addTask() { this.isSubmitted=true; if (this.todolistForm.valid) { this.taskObj.task_description = this.addTaskDescrption; this.taskObj.isDone = false; this.service.post_Put_Task(this.taskObj).subscribe(response => { this.ngOnInit(); this.addTaskDescrption = ""; this.isSubmitted=false; }) } } deleteTask(task: Tasks): void { this.service.deleteTask(task).subscribe(response => { this.ngOnInit(); }) } taskCompleted(task: Tasks): void { if (this.taskList) { const filterTask = this.taskList.filter(x => x.id === task.id); if (filterTask && filterTask[0]) { filterTask[0].isDone = true; this.service.taskDone(filterTask[0]).subscribe(response => { this.ngOnInit(); }) } } } }
In todolist.component.css write following command
.h500{ height: 500px !important; } .task-list{ overflow-y:auto ; height: 350px; } .w-10{ width: 10px; } .strikethrough { text-decoration: line-through; } .w440{ width:440px; } .h39{ height: 39px; } .ml-6{ margin-left: 6px; } |
.h500{ height: 500px !important; } .task-list{ overflow-y:auto ; height: 350px; } .w-10{ width: 10px; } .strikethrough { text-decoration: line-through; } .w440{ width:440px; } .h39{ height: 39px; } .ml-6{ margin-left: 6px; }
Step 5 : Create service for todo application
Under todoModule folder create new folder named “Services”.
Use command for service : ng g s todolistService
Above command will create two files one of them is service file.
Write following code in service file
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { Tasks } from '../model/tasks'; @Injectable({ providedIn: 'root' }) export class TodolistService { serviceURL: string; constructor(private http: HttpClient) { this.serviceURL = "http://localhost:3000/task"; } post_Put_Task(task: Tasks): Observable<Tasks> { if (task.id > 0) { return this.http.put<Tasks>(this.serviceURL + "/" + task.id, task); } else { return this.http.post<Tasks>(this.serviceURL, task); } } getTask(): Observable<Tasks[]> { return this.http.get<Tasks[]>(this.serviceURL); } deleteTask(task: Tasks): Observable<Tasks> { return this.http.delete<Tasks>(this.serviceURL + "/" + task.id); } taskDone(task:Tasks):Observable<Tasks>{ return this.http.put<Tasks>(this.serviceURL + "/" + task.id, task); } } |
import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { Tasks } from '../model/tasks'; @Injectable({ providedIn: 'root' }) export class TodolistService { serviceURL: string; constructor(private http: HttpClient) { this.serviceURL = "http://localhost:3000/task"; } post_Put_Task(task: Tasks): Observable<Tasks> { if (task.id > 0) { return this.http.put<Tasks>(this.serviceURL + "/" + task.id, task); } else { return this.http.post<Tasks>(this.serviceURL, task); } } getTask(): Observable<Tasks[]> { return this.http.get<Tasks[]>(this.serviceURL); } deleteTask(task: Tasks): Observable<Tasks> { return this.http.delete<Tasks>(this.serviceURL + "/" + task.id); } taskDone(task:Tasks):Observable<Tasks>{ return this.http.put<Tasks>(this.serviceURL + "/" + task.id, task); } }
Step 6 : Run the application with following command
npm start |
npm start
Folder Structure
Step 7: A new window will popup in browser . add task here
Folder Structure
Vue
Prerequisites: Presence of Node.js and Vue is required in the system.
Step 1: Create a new vue app with the following command. Also select version 3 for our application.
vue create vuetify-todo |
vue create vuetify-todo
Step 2: Now install the vuetify package for better UI. so run the command below in the terminal.
npm install vuetify |
npm install vuetify
Step 3: Install router package with the help of following command.
npm install vue-router |
npm install vue-router
Step 4: Create router folder within src folder. Also create index.js file within router folder and add the following code.
import { createRouter, createWebHashHistory } from 'vue-router' import Todo from '../views/Todo.vue' const routes = [ { path: '/', name: 'Todo', component: Todo } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router |
import { createRouter, createWebHashHistory } from 'vue-router' import Todo from '../views/Todo.vue' const routes = [ { path: '/', name: 'Todo', component: Todo } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router
Step 5: Now we can edit the code in the App.vue file for route. Removed all the preloaded code and replaced it with the following.
<router-view></router-view> |
<router-view></router-view>
Step 6: Update the “main.js” file with the following code.
import { createApp } from 'vue' import App from './App.vue' import router from './router' import vuetify from './plugins/vuetify' import { loadFonts } from './plugins/webfontloader' loadFonts() createApp(App) .use(router) .use(vuetify) .mount('#app') |
import { createApp } from 'vue' import App from './App.vue' import router from './router' import vuetify from './plugins/vuetify' import { loadFonts } from './plugins/webfontloader' loadFonts() createApp(App) .use(router) .use(vuetify) .mount('#app')
Step 7: Create “Views” folder in the “src” folder. Create a “Todo.vue” file in this folder.
<template> <div class="home"> <v-text-field clearable hide-details v-model="newTaskTitle" class="pa-3" variant="outlined" label="Add Task" @click:appendInner="addTask" @keyup.enter="addTask" :append-inner-icon="newTaskTitle ? 'mdi-plus' : ''" ></v-text-field> <v-list class="pt-0" flat> <div v-for="task in tasks" :key="task.id"> <v-list-item @click="doneTask(task.id)" :class="{ 'bg-blue-lighten-5': task.done }" > <template v-slot:prepend> <v-list-item-action start> <v-checkbox-btn :model-value="task.done"></v-checkbox-btn> </v-list-item-action> </template> <v-list-item-title :class="{ 'text-decoration-line-through': task.done }" > {{ task.title }} </v-list-item-title> <template v-slot:append> <v-btn @click.stop="deleteTask(task.id)" color="primary lighten-1" icon="mdi-delete" variant="text" ></v-btn> </template> </v-list-item> <v-divider></v-divider> </div> </v-list> </div> </template> <script> export default { name: "Home", data() { return { newTaskTitle: "", tasks: [ { id: 1, title: "Wake up", done: false, }, { id: 2, title: "Get bananas", done: true, }, { id: 3, title: "Eat bananas", done: false, }, ], }; }, methods: { addTask() { let newTask = { id: Date.now(), title: this.newTaskTitle, done: false, }; this.tasks.push(newTask); this.newTaskTitle = ""; }, doneTask(id) { let task = this.tasks.filter((task) => task.id === id)[0]; task.done = !task.done; }, deleteTask(id) { this.tasks = this.tasks.filter((task) => task.id !== id); }, }, }; </script> |
<template> <div class="home"> <v-text-field clearable hide-details v-model="newTaskTitle" class="pa-3" variant="outlined" label="Add Task" @click:appendInner="addTask" @keyup.enter="addTask" :append-inner-icon="newTaskTitle ? 'mdi-plus' : ''" ></v-text-field> <v-list class="pt-0" flat> <div v-for="task in tasks" :key="task.id"> <v-list-item @click="doneTask(task.id)" :class="{ 'bg-blue-lighten-5': task.done }" > <template v-slot:prepend> <v-list-item-action start> <v-checkbox-btn :model-value="task.done"></v-checkbox-btn> </v-list-item-action> </template> <v-list-item-title :class="{ 'text-decoration-line-through': task.done }" > {{ task.title }} </v-list-item-title> <template v-slot:append> <v-btn @click.stop="deleteTask(task.id)" color="primary lighten-1" icon="mdi-delete" variant="text" ></v-btn> </template> </v-list-item> <v-divider></v-divider> </div> </v-list> </div> </template> <script> export default { name: "Home", data() { return { newTaskTitle: "", tasks: [ { id: 1, title: "Wake up", done: false, }, { id: 2, title: "Get bananas", done: true, }, { id: 3, title: "Eat bananas", done: false, }, ], }; }, methods: { addTask() { let newTask = { id: Date.now(), title: this.newTaskTitle, done: false, }; this.tasks.push(newTask); this.newTaskTitle = ""; }, doneTask(id) { let task = this.tasks.filter((task) => task.id === id)[0]; task.done = !task.done; }, deleteTask(id) { this.tasks = this.tasks.filter((task) => task.id !== id); }, }, }; </script>
Step 8: Run the application using the below command.
npm run serve |
npm run serve
Step 9: Output:
4. Let’s Look at the Advantages and Disadvantages of Angular
4.1 Advantages of Angular
The most advanced JavaScript framework is Angular, which receives frequent upgrades every six months. It is supported by Google and offers a comprehensive web application development bundle.
A member from Google Angular team Minko Gechev specifically mentioned this in his tweet-
A major release every 6 months and 1-2 minors in between 🙂
— Minko Gechev (@mgechev) July 21, 2022
Predictable and allows us to move the Web ecosystem forward.
Are you able to follow with `ng update`?
1. Complete Framework Package
Because it incorporates the MEAN stack, Angular is regarded as a comprehensive solution for any web development project.
MongoDB is a NoSQL database, Express.JS is back-end middleware, Angular is a JavaScript front-end framework, and Node.JS is the runtime environment.
Angular encompasses every facet of software development. Even though the majority of visitors may just utilize the Angular framework, it has the operational capabilities of comprehensive web development resources.
2. Directives
In AngularJS, directives were initially presented, and their use has risen with each version. It enables designers to enhance HTML component capabilities. Document object model trees’ behavior and data may be altered using directives.
This contributes to the creation of more engaging user interfaces and improves the performance of online and desktop apps.
3. Data Binding
Two-way data-binding is utilized by Angular, making it simpler to keep data across several levels. A bidirectional information flow across the various components is advantageous.
It will assure that the display elements and logic layers are constantly in sync without the need for further work. This may be accomplished with an Angular ngModel directive.
4. Cross-Platform
Angular is a framework for cross-platform web development. You may create modern online apps, smartphone apps, and desktop apps for different OSs.
5. TypeScript Based JavaScript Framework
It is a more sophisticated variant of JavaScript. TypeScript increases efficiency by offering testing while typing, unlike other front-end frameworks that translate the script to JavaScript.
Developers may detect and correct grammatical problems as they type, hence accelerating the process. It is also handy for repeated use of templates, which reduces the amount of time spent coding.
6. Core Library
Numerous created Angular libraries simplify the job of developers. The Angular-CLI project incorporates core libraries, such as RxJS.
Therefore, there is no requirement to install libraries from other sources. It also includes several API and frontend-specific packages.
Run #Angular CLI repositories from GitHub directly in your browser with @stackblitz https://t.co/doxVJp1VHf pic.twitter.com/niWGlMQXLU
— Angular (@angular) February 9, 2018
4.2 Disadvantages of Angular
1. SEO Possibilities are Limited
The limited SEO choices and low availability of search engine crawlers are two main disadvantages of utilizing Angular.
2. Angular is a Verbose and Complicated Language
The verbosity of the tool is one of the most common complaints among Angular developers. And this issue hasn’t altered much despite the introduction of AngularJS.
3. The Learning Curve is Steep
Onboarding software engineers who are acquainted with JavaScript to utilize new Angular will be more challenging than onboarding new programmers who are acquainted with Vue. This is due to the enormous number of subjects and issues to be covered.
4. The Documentation for the CLI is Lacking in Specifics
The present status of CLI documentation has some programmers concerned. Whereas the command line is really beneficial for Angular developers, there is n’t sufficient material on their official paperwork on GitHub, so you’ll have to invest additional time scouring GitHub forums for solutions.
5. Let’s Look at the Advantages and Disadvantages of Vue.JS
5.1 Advantages of Vue
Vue.js is the fastest-growing JavaScript framework, given that it is completely functional in the open-source ecosystem without any sponsorship.
Some programmers believe Vue.js to be an illegitimate offspring of Angular since it inherits the majority of its favorable characteristics.
1. Compact and Effective
Due to its limited number of built-in functionality, Vue’s diminutive size is a huge benefit. Instead, its usefulness is extended by third-party programs.
Therefore, Vue utilizes far less memory than competing frameworks like Angular.
2. Declarative Templates
Vue.js templates are created in HTML, allowing them to be viewed without an understanding of other computer languages. This HTML design syntax enables declarative binding of the displayed DOM to case data.
3. Virtual DOM
Vue utilizes virtual DOMs to minimize page load times and improve performance. Owing to its use of virtual DOMs, server-side processing is reduced, and therefore its performance is increased. Vue holds the highest position among all current front-end frameworks.
4. Data Binding
Vue.js, like Angular, employs two-way data binding to synchronize all the data across its many components. However, Vue also supports the custom attribute Prop, which may be provided to any element that uses one-way data binding.
When a family connection exists, the props provide a unidirectional data flow from the parental to the child elements.
5. State Management
Vue provides a library for state management named Pinia. This unified state management facilitates the development and management of complicated programs.
There is a single-end communication across the application’s many components. As opposed to the Angular frameworks, this facilitates the testing and maintenance of Vue web apps.
6. Pure JavaScript
Vue utilizes pure JavaScript, which eliminates the need for vue developers or test engineers to master any other computer language, resulting in a flatter learning curve and a quicker rate of adoption.
5.2 Disadvantages of Vue
If it weren’t for some of its drawbacks, the Vue.js framework could appear great for various development projects. There is no such thing as a flawless framework. Vue.js, on the other hand, has a few shortcomings that we think are worth highlighting.
1. Limitations in Utilizing the Community
Many of the framework’s components are only accessible in Chinese. The biggest impediment to adopting this system is the language barrier. Nonetheless, the Vue community is regarded as resourceful when it comes to tackling non-trivial problems by consumers.
2. Insufficiency in Terms of Scalability
In comparison to other well-known frameworks, Vue.js has a tiny yet dedicated developer community. It’s not extensible, thus, it’s not appropriate for large-scale projects. A framework that will be utilized in big projects must be robust and offer huge backing for quick problem resolution. Large corporations, on the other hand, do not actively support the Vue.js framework. As a result, Vue.js is still predominantly utilized for single-page apps and user interfaces.
3. Plugins are Very Few
In comparison to Angular, Vue.js has far fewer plugins. This is vital to examine since Vue’s absence of frequently used plugins means that developers can’t entirely rely on it. Developers must continually switch to different languages in order to acquire the support they require.
4. Scarcity of Highly Qualified Professionals
Because Vue is a new framework, there are not that many experts with substantial expertise in it. Furthermore, this framework is often changed, which is inconvenient; even experienced developers must retrain or learn new capabilities from the ground up in order to get the most of Vue.
5. Problems with Two-way Binding
Binding is one of the disadvantages of the Vue.js framework that the development team may encounter. The reality is that the reactive system in two-way binding merely re-renders the code that was triggered, and it frequently makes reading errors. As a result, they must be flattened for proper data processing.
6. Excessive Flexibility in the Code
On the one hand, coding flexibility gives programmers a lot of options. Flexibility, on the other side, might lead to greater inconsistency and faults in the code. The majority of code delays are due to excessive flexibility, which occurs when many programming methodologies may be employed at the same time within the same team.
6. Vue vs Angular: Which One To Choose?
Angular is the most developed framework, has a strong contributor base, and is a full bundle. Therefore it is a fantastic option for firms with large teams and TypeScript-using engineers. Whereas Vue is the youngest entrant without the support of a large corporation.
However, with the introduction of Vue 3.0, it has performed exceptionally well over the past several years to emerge as a formidable challenger to Angular. Therefore, Vue should be your best pick if you value simplicity and adaptability.
Angular | Vue | |
---|---|---|
Reliable community support and assistance | ||
Compact and lightweight | ||
Offer object-oriented coding | ||
Possibilities of clean coding | ||
Straightforward learning curve | ||
Scalability for large apps | ||
Complexity level | ||
Easy integration |
7. Conclusion
With frequent updates and the release of additional functionality to accelerate development, Angular has swiftly evolved to provide a simple development environment and a pleasant user experience.
Particularly following the introduction of Angular 2, it has developed as a key frontend framework for designing user interfaces and controlling the frontend independently. By bringing the Ivy processor into its mature form, Angular is on the verge of delivering a superb development experience.
Despite the framework’s seeming antiquity in comparison to recently developed frameworks such as Vue, it is catching pace with the most recent user engagement and development trends. Because of its rich built-in capabilities and support networks, Angular is a natural choice for developing enterprise-level apps.
Vue is a technically solid framework for developing user interfaces and tackling difficult challenges. Despite having a good framework, Vue is not as widespread as Angular. However, this does not dictate the future of Vue, as the framework has a healthy community and decent syntax.
In nutshell, rather than sticking to the statistics, it is more advisable to filter out your project requirements and decide on a solution accordingly. Good Luck!
Vishal Shah
Vishal Shah has an extensive understanding of multiple application development frameworks and holds an upper hand with newer trends in order to strive and thrive in the dynamic market. He has nurtured his managerial growth in both technical and business aspects and gives his expertise through his blog posts.
Related Service
Web Development Services
Learn more about web application development services
Know moreSubscribe to our Newsletter
Signup for our newsletter and join 2700+ global business executives and technology experts to receive handpicked industry insights and latest news
Build your Team
Want to Hire Skilled Developers?
Comments
Leave a message...