A framework from the world's largest search engine. What is Angular?

Contents:

• What is Angular
• How it appeared
• How it differs from other frameworks
• What is the architecture of the framework?
• How to create your first project in Angular
• Where is it used?
• What are the pros and cons?
• Useful materials from the editors of Skillbox.by

What is Angular

Angularis a framework for creating dynamic and interactive web applications in the TypeScript and JavaScript programming languages. The platform was developed by Google. The framework quickly gained popularity in the world of web development.

The framework is used to create SPAs - web applications that function as a single page. This is a single-page application where the content is updated immediately without reloading the entire page. Because of this, the transition between its sections is instantaneous. This operating principle is the basis of Angular.

Today, the platform occupies one of the leading places among technologies for front-end development. According to Stack Overflow research, AngularJS is among the top ten most popular frameworks.

How it appeared

In 2009, Google developer Miško Hevery and his colleague and friend Adam Abrons decided to make life easier for developers. They came up with a way to turn simple HTML forms into dynamic ones, that is, forms that can change and interact with the user.

In 2010, Miško Heveri used AngularJS for an internal Google project, the Google Feedback Tool. This is a tool for collecting feedback on the company's products. Mishko wrote the code in AngularJS in three weeks, although previously, using another tool, he spent six months. Then AngularJS received official status at Google and became available to all developers.

In 2014Google released the second version of the framework, which they called Angular. It included many changes that made the tool modern. For example, the developers rewrote Angular in TypeScript - a programming language similar to JavaScript, but structured.

The changes in Angular 2 were significant; it could hardly be called a successor to AngularJS. That's why the old version was called AngularJS, and the new one - simply Angular.

How it differs from other frameworks

• Two-way data binding.Imagine that you are creating an online store. You need product information to be displayed on the website and simultaneously updated in the database. Angular allows you to link website information to the database. If you change the product name on the website, it will automatically be updated in the database and vice versa;
• Modular architecture. Angular divides the application into separate blocks called modules. Each module is responsible for its own part of the application. For example, user registration, a shopping cart, or displaying news. This simplifies development and makes it easy to add new features;
• Dependency Injection.Dependency Injection is like grocery delivery from the store. Instead of going shopping yourself, you can order them and have them delivered. The same is true for developers. They don't have to create all the application components themselves. Angular allows you to "order" ready-made components that other developers use;
• TypeScript.This is a programming language similar to JavaScript, but with the addition of strong typing. This means you need to specify data types for each variable. For example, text, number, or date. This makes the code understandable and helps to avoid errors.

What is the framework's architecture?

Angular has elements that work together like gears in a clock:

• Components.These are the building blocks of an application. Imagine building a house out of LEGO blocks. A component is one such block. It contains code that controls a specific area of ​​the application. For example, the Cart component is responsible for the cart in an online store;
• Modules.These are groups of components that are connected to each other. Imagine assembling entire machines from LEGO blocks, not individual parts—that's a module. A module combines several components that work together. For example, the "Product Module" combines the "Product List", "Product Cards" and "Product Filter" components;

• Directives.These are special commands that specify the behavior of elements on the page. For example, the ngIf directive shows an element only if a certain condition is met. This is like an instruction that says: "If this condition is true, show the element, if not, hide it." For example, a directive can show a product in the list of purchased ones only if the user is in the product's buyers database;
• Services.This is the code that is used by different components to perform certain actions. For example, the Authorization service is responsible for checking the username and password;
  
• Templates.The code that determines how the application page looks. Templates use HTML with the addition of special Angular commands. Imagine you are building a house out of bricks. Then the template is a house plan that shows where which bricks should be.

How to create your first project in Angular

The Skillbox.by editorial team asked the development team to help create the project. Follow these steps:

1. Install the software.To work with Angular, you need Node.js - an open-source software platform for working with the JavaScript language. It can be downloaded from official website.

2. Create a new project.You can create a project using the Angular CLI. The Angular CLI is a tool that allows you to create projects with Angular. To install the tool, enter the following in the command line:npm install -g @angular/cli

Now we create a new project using ng new my-first-project:

Then go to the project folder and start the server using the commands cd my-first-project and ng serve:

Now you can follow the link and view your site:

3. Write the first component.A component is the basic building block in Angular. Each component is a separate piece of code that is responsible for a specific part of the application. You can create a new component using the command ng generate component my-component.

The official Angular documentation is available on the website. Here you will find the necessary materials and learn how to work with the framework.

Where it is used

Many companies use Angular:

• Google.Google uses Angular to build its internal tools and services. For example, Google Cloud Platform and Google Analytics run on Angular;

• PayPal.The framework helps create secure and reliable applications. For example, Venmo and Xoom, which work for millions of users around the world;
• Upwork and Freelancer.Popular freelance marketplaces also use Angular. Angular helps manage projects, interact with clients, and get paid.

What are the pros and cons?

Pros

• Modularity.Angular allows you to assemble applications from separate blocks — components. Each component is responsible for its own task. This approach helps to create applications faster. After all, developers can work on individual parts without interfering with each other. Individual components are easy to test. And the chance of bugs appearing in the project is also reduced. The same component code can be used in different parts of the application - it's like ready-made blocks that can be rearranged in different ways.
• MVC Architecture. Angular uses the MVC architecture, which divides the application into three parts.

• Abundance of development tools. AngularJS offers many tools and libraries. They will help you cope with any task when creating complex web applications.
• Scalability.Thanks to component architecture and strong typing, Angular allows you to extend applications, add new features and change existing ones.

• Powered by Google. Google regularly releases new versions of Angular, adding new features and improving existing ones. A large and active community of Angular developers provides additional support and assistance. Documentation, tutorials, and forums for communication are available online.

Cons

• Complex structure. Angular is more difficult to learn than similar frameworks. For example, React or Vue.js. Because in addition to components, it includes additional structures. It's like assembling a large construction set - more parts and more time to understand.
• Compatibility issues. Angular has an older version of AngularJS, which is incompatible with the new one. Programmers who work with AngularJS must study it separately. After all, the operating principles of the old Angular do not coincide with the new ones.

Useful materials from the editors of Skillbox.by

Angular is a powerful tool for creating web applications. It allows you to create applications that:

• Work on different devices: from a computer to a smartphone.
• Load quickly and work without delays.
• Easy to update.

If you want to become a developer or already have experience, learning Angular is a great way to improve your skills. These helpful resources will help you learn:

Official Angular documentation:

• Angular Documentation — Here you will find everything from a basic introduction to advanced topics.

Articles and guides:

• Tour of Heroes — the official training tour on creating an application with Angular;
• Angular University — Courses and articles about all the features of Angular.

Blogs and communities:

• Stack Overflow — A place to find answers to specific questions.
• Reddit: r/Angular2 — An active community where you can get advice and discuss the latest news.
• Angular Blog — official blog with news and announcements.