1. Introduction to Angular

1.1 History of the formation and development of Angular

Our people must know our history, if we don’t know something, Google it. Before learning Angular, you should know a little about it, right? Here is some information I have gathered after searching Google.

Angular was born in 2010 by two Google engineers, Misko Hevery and Adam Abrons. Originally, Angular was called “AngularJS”, and it was a very small set of JavaScript libraries, only about 10KB. However, gradually AngularJS evolved and became one of the most popular front-end frameworks.

However, later versions of Angular are not just improvements from AngularJS, they are actually completely new rebuilds. So people usually call them “Angular” instead of “AngularJS”.

1.2 Overview of Angular

So what is Angular? Angular is a platform and framework for building client-side web applications based on JavaScript and TypeScript. Angular helps developers to deploy Single Page Application (SPA) applications easily and quickly, with many modern features such as two-way data binding, modularization, AJAX, and dependency injection.

2. Benefits of using Angular

2.1 Effective in building Single Page Application (SPA)

For those of you who don’t know, Single Page Application (SPA) is a type of web application that has only a single HTML page. Other pages will be uploaded without reloading the entire site. This results in a smoother user experience and increased page loading speed. And Angular is a great tool for building such SPA applications.

2.2 The flexibility and convenience of Two-Way Data Binding

This is one of the features that you will love in Angular. Two-Way Data Binding means that any change in the data of the model (Model) will update immediately to the interface (View), and vice versa. With this feature, you don’t need to write lengthy code to synchronize data between model and interface, Angular will take care of it for you.

2.3 Modules and Dependency Injection in Angular

Angular divides the application into small modules, making it easier to organize the code and increase code reusability. Each module can contain components, directives, services, and other modules.

As for Dependency Injection, Angular helps to reduce dependencies between parts of the application, making the code easy to maintain and test.

3. Outstanding Features of Angular

3.1 Components in Angular

Angular builds apps based on “components”. Each component has its own interface (template) and its own behavior (class). They act as a separate block and can be easily reused throughout the application.

For example, I want to create a component that displays user information. I will create a component named “UserComponent”. Inside this component, I will have an HTML template to display information and a TypeScript class to process the data. When I need to display user information somewhere in the application, I just need to call “UserComponent” and that’s it.

3.2 Services and Dependency Injection

Services in Angular help to share logic or data between components. Instead of having to rewrite the same code in many different components, you can create a service and inject it into the components you need to use.

Dependency Injection (DI) is a common pattern in programming, which helps to reduce dependencies between parts of the code. Angular has a powerful DI system that makes it easy to inject services and other components into each other.

3.3 Directives

Directives is a powerful feature of Angular that helps you customize how HTML is displayed and handled. Angular provides a number of built-in directives like ngIf , ngFor , and ngSwitch , but you can also create your own directives.

3.4 Pipes

Pipes in Angular help you transform data before displaying it on the interface. For example, you can use pipe date to format dates, or pipe uppercase to convert strings to uppercase.

3.5 Routing and Navigation

Angular provides a powerful routing system that helps you build Single Page Applications (SPA) easily. You can define routes, navigate between pages, and even handle lazy loading for parts of your application.

4. How to Install and Use Angular

4.1 Installing Angular

First of all, you need to install Node.js and npm (Node Package Manager) on your computer. You can download Node.js and npm from the official Node.js site at https://nodejs.org/ .

Once you have installed Node.js and npm, you can install Angular CLI (Command Line Interface) by opening Terminal or Command Prompt and typing the following command:

The above command will install Angular CLI globally on your computer. The Angular CLI is a powerful tool that helps you create, develop, and manage Angular applications.

4.2 Creating a new Angular application

To create a new Angular application, you can use the ng new directive of the Angular CLI. For example, to create an application named “my-app”, you would type the following command:

The above command will create a new folder named “my-app”, with all the structure and files needed for an Angular application.

4.3 Run Angular Application

To run your Angular application, navigate to your application’s directory and type the command ng serve . For example:

After running the above command, you should be able to access your Angular application at http://localhost:4200 in your browser.

5. The Ultimate Guide to Using Angular

5.1 Creating Components

Components are the basic building blocks of an Angular application. To create a new component, you use the command ng generate component (or ng gc for short) followed by the name of the component:

This will create a new folder named “my-component” with 4 files: my-component.component.css (for CSS or SCSS depending on the option you selected at new app), my-component.component.html (for templates), my-component.component.spec.ts (for testing), and my-component.component.ts (for classes).

5.2 Using Services

Services in Angular help to share code and data between components. To create a new service, you use the command ng generate service (or ng gs for short):

This command will create two new files: my-service.service.spec.ts (for testing) and my-service.service.ts (for classes). You can add logic or data to the service class and then inject the service into the components you need to use.

5.3 Using Directives

Directives allow you to customize how HTML is displayed and processed. For example, you can use a built-in directive such as ngIf to show or hide part of the HTML based on a condition (Or create your own in the following articles, the following images will guide specifically):

In the above example, the greeting line will be displayed only if isLoggedIn is true .

5.4 Using Pipes

Pipes help you transform data before displaying it to the interface. For example, you can use pipe date to format dates:

In the above example, today will be converted to a date string before being displayed on the interface.

6. Consolidate knowledge with a simple project

Now let’s practice creating a simple web application with Angular.

6.1 Create a new Project

First, I will create a new project called “angular-practice”. Use the following command:

6.2 Creating Components

Next, I will create a new component called “hello-world”. Open a terminal in the project directory and type the command:

After running this command, Angular CLI will create a new folder named “hello-world” containing 4 files: hello-world.component.css , hello-world.component.html , hello-world.component.spec.ts , and hello-world.component.ts .

6.3 Writing Code for Component

Open the file hello-world.component.ts and change the content to:

I created a variable message and set the value to ‘Hello guys!’.

Next, open the file hello-world.component.html and change the content to:

This is Angular’s data binding syntax. Angular will take the value of the message variable and display it on the interface.

6.4 Displaying Components

To display the “hello-world” component, you need to add it to another component’s template. Normally, you would add it to the “app” component (Angular’s default component).

Open the file app.component.html and change the content to:

The <app-hello-world> tag is the selector of the “hello-world” component you defined earlier.

6.5 Run the application

To run the application, open a terminal and type the command:

Open a browser and access the address http://localhost:4200 . You should see the words ‘Hello guys!’ displayed on the screen.

That’s it, you’ve finished your first application with Angular!

7. Conclusion

Programming languages ​​are not always easy to understand, but Angular is an exception (Easy to understand – easy to read code <> easy to learn). It provides a unified, coherent way to build client-side web applications. Strongly backed by Google and a large developer community, Angular stands up to many challenges from other frameworks.

With the powerful capabilities of Angular, you can build complex applications while remaining modular and easy to manage. Angular provides you with a complete framework for you to focus on developing the functionality of your application without worrying about other complexities.

However, like every other tool, Angular is not always the best choice. For light and simple applications, you can use React or Vue.js to save time. But for large applications that need complex state management, Angular is the first choice.

So, if you’re looking to learn a powerful, multipurpose JavaScript framework that has great power in building single-page apps, then don’t hesitate, get started with Angular today.

8. Common questions about Angular made by myself 

Is Angular difficult to learn? This depends on your knowledge and experience of JavaScript and web programming. If you are familiar with JavaScript, HTML, CSS and have a basic understanding of MVC (Model-View-Controller) then learning Angular will be easier. If you are just starting out, it might be a bit difficult for you, but don’t worry, because the Angular programming community is huge and supportive.

Why should I choose Angular over React or Vue.js? Angular is a complete framework that gives you everything you need to build a front-end application, from routing, forms, to http requests. Meanwhile, React and Vue.js usually focus only on building interfaces, and you will need to add external libraries to build other functionality.

Can Angular use any other programming language? Angular is built with TypeScript, but you can also use ES5 or ES6 JavaScript. However, to take full advantage of Angular’s powerful features, you should use TypeScript.

Does Angular support server-side rendering (SSR)? Yes, Angular supports SSR through Angular Universal. SSR can help improve the performance and SEO of your application.

Is Angular suitable for building mobile apps? Angular isn’t the most ideal tool for building mobile apps, but you can use Ionic, an Angular-based framework, to build mobile apps.