![\"Vue](\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2021-12-22-o-09.45.15.png\" "\\"Vue")
<\/figure>\n\n\n\nAngular<\/a><\/strong> comes with a generator which allows you to create components, services, interfaces and directives right from the console, which from my experience is very handy as there is no need to manually set up folders, files and redundant code<\/a> by hand, especially when you use i.e., MVC pattern. Typescript comes out of the box with Angular<\/strong> and kind of pressures you to use it. If you haven\u2019t done it yet, here is a handy introduction why you should try it out – you can check it out here<\/a>.<\/p>\n\n\n\n At the start, Angular\u2019s CLI <\/strong> asks you only about routing or preferred CSS preprocessors which, in comparison to Vue<\/strong>, doesn\u2019t leave you much space to decide about the structure and style of your application. But if you are going to follow the convention it asks you to use, the CLI is going to lead you all the way.<\/p>\n\n\n\n Vue<\/strong> uses SFC (Single File Components) which makes it quite simple for a new developer to start using a framework and find their feet in the code.<\/p>\n\n\n\n Vue<\/strong> also comes out of the box with directives such as `v-if, v-for`, which is very intuitive to use as it is almost a copy of the Angular<\/strong> ones. Vue<\/strong> uses the same convention for two-way data<\/a> binding (just by prefixing it with, i.e., v- in `v-model`) and adding the @\/v-on indicating that we are reacting to something. Angular<\/strong> separates this by indicating which way we are going by using parentheses for event binding and square brackets for property binding, i.e. ,`(change), [ngStyle], [(ngModel)]`.<\/p>\n\n\n\n In Vue<\/strong>, the structure itself is simple, there is no need to make separate files for stylesheets and logic, so it\u2019s all organized and approachable. Of course, Vue<\/strong> comes with a style guide where you can find recommended rules to follow when creating a project; however, there are only a few that are mandatory. <\/p>\n\n\n\n I this case, Vue<\/strong> comes again with a more handy solution; namely, to emit an event from the child component to its parent all you need to do is (using Vue 3 Composition API<\/a> <\/strong>) take a method from the context object in the setup and simply emit whatever you need at the moment:<\/p>\n\n\n\n You can also do it directly in the template as a response to some other event.<\/p>\n\n\n\n In Angular<\/strong>, you need to first define an EventEmitter as follows:<\/p>\n\n\n\n Then you need to call an emit method on the EventEmitter:<\/p>\n\n\n\n In both frameworks, you can easily move the content (single as well as multiple) from the parent component to its child just by adding additional html inside the child tags, with slight differences:<\/p>\n\n\n\n Vue:<\/p>\n\n\n\n Angular:<\/p>\n\n\n\n However, if you want to conditionally render some parts of your application, Vue<\/strong> is more intuitive than Angular<\/strong> and lets you do it faster by adding the While the and because of the name you give to your Also, within the component, you want to project your template to be used in the Angular<\/strong> at its core encourages you to use the MVC design pattern where you can use services for the model. Because of that, you need to learn the dependency injection pattern to freely operate data in your application. It lets you separate side effects of your, i.e., API calls and use the same logic across the whole project by injecting the parts you need at the moment, which also makes it a modular approach.<\/p>\n\n\n\n Angular<\/strong> also comes with the Ngrx\/store framework based on the Redux pattern in case you want to use a more reactive approach with RxJs observables. It comes with Actions that are used for dispatching unique events from components and\/or services, Effects that handle side effects or async actions you want to perform and Reducers that mutate your state.<\/p>\n\n\n\n In Vue<\/strong>, the popular approach is to use the Vuex library for state management which also comes with tools like Actions, Mutations and Getters, just like Ngrx\/store, to help you manage and organize the state of your application. You can modularize it by setting different stores for your views, i.e., a user store or a cart store, but it can lead to name-spacing problems, unless you use the Here is a comparison of services-based approach and the Vuex one when the task is to fetch some product<\/a> data for your shop:<\/p>\n\n\n\n Then, in the component, we inject our service to be used: In Vue<\/strong>, we simple dispatch an action that makes a backend call for us<\/a>:<\/p>\n\n\n\n and in the With Vue<\/strong>, you can use Axios\/Fetch or whatever library you want to use, it is really straightforward \u2013 you just handle asynchronous calls with promises or whatever approach suits you best.<\/p>\n\n\n\n Angular<\/strong> comes with the HttpClient library that uses observables leading you to another perk \u2013 to use it properly and\/or manipulate data, you need to learn RxJs. Again, it can be quite overwhelming to get fluent and feel familiar with this abstract construct at the very beginning.<\/p>\n\n\n\n You can use Axios if that\u2019s what you want to do but as the Axios GitHub page says: \u2018Axios is heavily inspired by the $http service provided in Angular<\/strong>\u2019<\/p>\n\n\n\n | Vue | Angular | Read more:<\/b><\/p>\n\n\n\n JavaScript Is Totally Dead. Some Dude on the Internet<\/a><\/p>\n\n\n\n Deploy GraphQL\/MongoDB API Using Netlify Functions<\/a><\/p>\n\n\n\n![\"Angular](\"\/app\/uploads\/2024\/05\/zrzut-ekranu-2021-12-22-o-09.53.51.png\" "\\"Angular")
<\/figure>\n\n\n\nProject structure<\/h2>\n\n\n\n
Directives<\/h3>\n\n\n\n
Events<\/h3>\n\n\n\n
setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit(\u2018customNameOfYourEvent\u2019, dataYouWantToPass); } }<\/code><\/p>\n\n\n\n@Output() customNameForYourEmitter = new EventEmitter<Data>();<\/code><\/p>\n\n\n\nthis.customNameForYourEmitter.emit(this.theDataYouWantToPass);<\/code><\/p>\n\n\n\nSlots\/content projection<\/h3>\n\n\n\n
`<slot name=\"header\"><\/slot>` <\/span><\/code><\/pre>\n\n\n\nDefault:\n <ng-content><\/ng-content>\n\nNamed slot:\n <ng-content select=\"[yourName]\"><\/ng-content><\/code><\/pre>\n\n\n\n<p yourName>\n This is a named slot\n <\/p>\n <p>This is a default slot<\/p><\/code><\/pre>\n\n\n\nv-if<\/code> directive to your <template><\/code> tag, which allows you to render only the parts that are currently needed.<\/p>\n\n\n\n<template v-if=\"someConditionToBeMet\u201d>\n <!-- render this part if condition is met -->\n<\/template>\n<template v-else>\n <!-- render this if first condition isn\u2019t met -->\n<\/template><\/code><\/pre>\n\n\n\nng-content<\/code> is always rendered, you need to use in this case the ng-template<\/code>, and later create your own custom directive:<\/p>\n\n\n\n<div *ngIf=\"conditionToBeMet\" [id]=\"contentId\">\n <ng-container [ngTemplateOutlet]=\"content.templateRef\"><\/ng-container>\n<\/div><\/code><\/pre>\n\n\n\n@Directive({\n selector: '[customDirectiveName]'\n})\nexport class CustomDirective {\n constructor(public templateRef: TemplateRef<unknown>) {}\n}<\/code><\/pre>\n\n\n\nng-template<\/code> attribute, Angular will know what should be rendered:<\/p>\n\n\n\n<ng-template customDirectiveName>\n <!-- content goes here -->\n<\/ng-template><\/code><\/pre>\n\n\n\n@ContentChild<\/code> to get the proper template:<\/p>\n\n\n\n@ContentChild(CustomDirective) content!: CustomDirective;<\/code><\/p>\n\n\n\nService vs store<\/h3>\n\n\n\n
![\"\"\/](\"\/app\/uploads\/2024\/05\/blog.webp\")
<\/a><\/figure>\n\n\n\nnamespaced: true<\/code> property in your store declaration.<\/p>\n\n\n\n@Injectable() \/\/ decorator to indicate we want to use it in DI later on\nexport class ProductsService {\n private products: Product[] = [];\n\n constructor(private backend: BackendService) { }\n\n getProducts() {\n this.backend.getAll(Product).then( (products: Product[]) => {\n \/\/do whatever you like with your products\n });\n return this.products;\n }\n}<\/code><\/pre>\n\n\n\nconstructor(private service: HeroService) { }<\/code><\/p>\n\n\n\nstore.dispatch(getAllProducts)<\/code><\/p>\n\n\n\nactions.ts<\/code> file we define an action:<\/p>\n\n\n\nactions: {\ngetAllProducts ({ commit }){\n commit(\u2018setProducts\u2019, await getProducts();); \/\/ fetch data and put the results in the store\n}}<\/code><\/pre>\n\n\n\nFetching data<\/h2>\n\n\n\n
try {\nhttp.get(\u2018https:\/\/url.to.get.data\u2019)\n .then(res => res.json())\n .then(data => console.log(\u2018do whatever is needed\u2019))\n} catch (e) {\n \/\/handle error\n}<\/code><\/pre>\n\n\n\nprivate getAllItems(): void {\nthis.http\n.get<Item>(\u2018https:\/\/url.to.fetch.data\u2019)\n\n.pipe(\npluck(\u2018results\u2019),\ntap(console.log(\u2018do whatever side effect you want to use here\u2019)\ncatchError((error) => {\n \/\/handle error\n})\n)\n.subscribe((result: ResultType[])\n \/\/final operation on given output\n)\n}<\/code><\/pre>\n\n\n\nSumming up<\/h2>\n\n\n\n
| ———– | ———– |
| Does not push you to follow very strict rules | Requires using Typescript, class-based components\/services |
| Flat learning curve, easy to start with | High learning curve (Typescript, RxJs, Dependency Injection) |
| A lot of things to configure during project setup| Not much to set up front but it lets you generate project structure through console |
| Community-driven framework based on both Angular and React<\/a> | Created and maintained by Google |
| Not much is included, need to install external libraries| State management, HttpClient included in the framework |<\/p>\n\n\n\n