If you have ever built a few Web applications, you must have heard the name Angular, a Javascript framework that helps us build full-featured Web applications from the client side.

Watching: What is Angular

1. What is Angular

?Angular is a javascript framework developed by google to build Single Page Applications (SPA) using JavaScript , HTML and TypeScript . Angular provides built-in features for animation , http service and has features like auto-complete , navigation , toolbar , menus , etc. The code is written in TypeScript , compiles to JavaScript and displays the same in the browser.

To learn angular, you need to know the following basic knowledge:

HTMLCSSJavaScriptTypeScriptDocument Object Model (DOM)

2. Versions of Angular

Angular js :

Model is the central component that demonstrates application behavior and data management. View is created based on Model information. Controller acts as an intermediary between Model and View and to handle logic.

Angular 2:

After angular js version, in March 2015 angular 2 version was born to replace Angular Js with new concepts to simplify and optimize the development process using this framework. Angular 2 completely changed from angular js by replacing Controllers and $scope ( Angular js ) with components and directives . Components = directives + template , which creates the view of the application and handles the logic on the view. Angular 2 is completely written in Typescript. Angular 2 is faster than angular js, supports cross-platform cross-browser, cdoe structure is organized simpler and easier to use.

Angular 4:

Released in March 2017 this is an upgraded version from Angular 2 so the architecture has not changed much other than minimizing the generated code thereby reducing the packaged file size by 60%, speeding up the development process. application development.

Angular 5:

Released on November 1, 2017 with the goal of changing speed and size so it’s faster and smaller than angular 4. New features compared to angular 4: Use HttpClient instead of using HTTP : because it’s faster, safer and more efficient. With default Angular 5 version use RxJs 5.5Multiple export aliases : A component can be exported using multiple aliases to ease the migration process.Internationalized Pipes for Number, Date, and Currency: New pipes introduced for better standardization. Optimize build production using the build optimizer built into the CLI. This tool optimizes the tree shark and eliminates redundant code. Improved compilation speed using TypeScript transforms, now when building will use the command “ng serve –aot”. AOT will improve the performance when loading the page and it is used to deploy the app to production

Angular 6:

Update CLI, command line interface: add some new commands like ng-update to switch from previous version to current version; ng-add to add application features to become a progressive web application.Angular Element: Allows Angular components to be implemented as web components, which can then be used in any HTML page easily.Multiple Validators: allows multiple Validators to be applied on form builder.Tree-shakeable providers: eliminates dead code.Using RxJS 6 with changed syntax.

READ MORE  E-wallet What is English, Microelectronics

Angular 7:

Released on October 18, 2018 with changes like :ScrollingModule : To scroll load data.Drag and Drop: We can easily add drag and drop to an itemAngular 7.0 updated RxJS 6.3

Angular 8:

Launched May 28, 2019 with CLI workflow improvements, Dynamic imports for lazy routes….

Angular 9:

Recently released February 6, 2020, Angular 9 migrates all applications to use the Ivy compiler and runtime by default. Angular has been updated to work with TypeScript 3.6 and 3.7

3. Request

Angular requires an understanding of JavaScript, HTML, and CSS. It also requires knowledge of OOP. Knowledge of AngularJS is not required. You will use TypeScript to code and if you have knowledge of C# or Java it will be easier to learn.

4. Why we should choose Angular

4.1. Angular helps improve developer productivity.

See also: Hack Tap Hack Mod Diamond/Through Wall, Hack Tap Size

Web development has changed dramatically over the past few years. With ECMAScript (ES) 2015 release – we are familiar with the name ES6, with classes or arrow functions. Angular 2+ applies these new features to make coding with Angular much clearer and easier to learn. Plus, with the application of Typescript – a language – or a worthwhile upgrade of Javascript. , Angular combined with Typescript, we have a great tool to help handle limited JS problems such as data type checking, safer code refactoring, etc. like helping Devs really understand their source code better.

4.2. Clear development structure.The importance of a Frameworks for development That programmer is its application development structure, and Angular provides a very clean architecture, based on three main elements: classes, added dependencies, and the MVVM (model-view-view/model) model ).Angular uses ES6 classes with a bunch of properties to build all the key structures, let’s say you want to create an Angular component – ​​Create a class and add the necessary properties. Or you want to create an Angular module – Let’s create a class and add the necessary attributes. Basically like that, Angular provides a clear structure to build each feature of your application. Powerful dependencies are used in the application as needed, and when any dependencies need to be integrated. Anyway, like HTTP or Router, we just need to add it inside the constructor of the class. The MVVM model also helps Angular take advantage of building client-side applications, usually we will have 3 main things to take care of: that is the user interface, the source code that controls the interface, and the data model for the interface. Angular with MVVM completely distinguishes the above factors thanks to the MVVM model:

READ MORE  How to Use Cooftech Correctly

The view is defined in a template that contains the HTML for a given component. Template can be the entire Layout or any of the pieces in that Layout.Model is defined as properties of the component class. Can be understood as data, based on that for the View to use to execute. view/model is the class that manages both the view as well as the model. The part of the code that will handle data retrieval, and also perform user interactions on the view. By applying the positives of the above components, Angular makes application development easy. and more efficient.4.3. Extensive binding Many Web applications work with data. App will retrieve data from Server and display that data to user on view, using template. And the user’s interactions will be changed data, recorded by the view and saved on the server. Data Binding in Angular helps you to perform the above process very easily. Simply bind the HTML element in the template to the attributes in the class and the data will automatically appear on the screen. For user interactions that require data changes, Angular uses two-way binding. Any data changes coming from the view will automatically update the “model” property inside the class. In addition, Angular also supports property binding – allowing us to manipulate the DOM by binding the HTML attribute to the property. property of the component class, the data will automatically appear inside the view. For example, we bind the hidden attribute for an img tag to the hideImg property inside the class. When hideImg property is set to true, img will be automatically hidden and vice versa when hideImg is false, img tag will be automatically displayed to the user. Finally, Angular supports event binding, which means we have can handle any event from view side, like HTML event. Basically we’re going to snap the event with a method inside the class. Every time the event occurs, the corresponding method will be executed.Extensive binding helps the process of displaying data, controlling the DOM, and executing events smoothly and easily.

4.4. Full support for routing features Most Web applications do not have only one view or a single page, but will provide many different views corresponding to the main functions. For example, a website with about pages, content pages, details pages, login pages, registration pages, etc. We will need to display the right view at the right time. That is the purpose of navigation. And Angular provides full functionality for this, we define routes for each page view of the application. And we will trigger the route based on user interaction. We can pass more data to the routes, make the view display content dynamically, can protect the route so that users can only access it after logged in or have access, can prevent the fact that users immediately leave a page while operations are unfinished until they actually confirm leaving or save usage progress, etc. Angular also supports child-routes for side navigation. in a route. Navigating between views inside an Angular application is really flexible and powerful.

READ MORE  Distinguishing Between Cc And Bcc In Email

4.5. Angular helps to minimize the size and maximize the performance of the application. Size and performance are closely related when we work on the Web platform. A smaller component improves startup performance – reducing both download time as well as time and compile time in the browser. Reducing component size and increasing performance is an advantage and goal that Angular wants to bring to developers. Reducing application size can be accomplished in many ways. First we can minimize the size of each component to the minimum possible. Next the components will be arranged side by side in the Angular Module in a way that allows groups of related logic to be downloaded together. And the third step, lazy loading inside the routes will only download necessary modules for displaying necessary content to the user, and will never download unnecessary content. We have a compiler. named AOT, this compiler will run once during app build time. The browser will then download the uncompiled version of the application and render the application to the user immediately, without first compiling it in the browser. In addition, there is no need to download the Angular compiler, which greatly reduces the size of the application to be downloaded.

See also: Fix Font Errors – 3 Simple Steps to In Office

4.6. Document and community (community)Document for Angular 2+ – angular.io – is very complete and detailed, includes a basic introduction to help you quickly get acquainted with Angular, a detailed introduction, from basic to advanced The Angular APIs, as well as a complete Tutorial Basic built by the Angular team, give you a quick grasp of the basic properties of the Framework.