DEV Community

Cover image for STARTING OUT WITH ANGULAR
Alphaexcel
Alphaexcel

Posted on • Edited on

STARTING OUT WITH ANGULAR

#angular #programming #javascript #beginners

What is Angular?

Angular is a TypeScript-based JavaScript framework used for building web applications.

It is also described as a component-based framework that uses TypeScript, HTML, and CSS to build client-side Single Page Applications (SPAs).

Angular helps developers build structured, scalable applications by breaking the UI into reusable components.

Why Angular?

  • Angular is owned and maintained by Google, which means it receives regular updates and long-term support.

  • It is widely used for building enterprise-level applications.

  • It allows developers to build applications in a modular way, meaning you can focus on individual features without building everything at once.

  • Angular supports building Single Page Applications (SPA) where content updates dynamically without full page reloads.

  • It provides built-in tools for testing, routing, and state management, making development more organized.

Structure of Angular

Angular applications are built using modules and components.

Each component usually contains:

  • A TypeScript file (".ts") for logic
  • An HTML file for the view (what is displayed in the browser)
  • A CSS file for styling

Key Structure Concepts:

  • The TypeScript file handles logic and functionality.
  • The HTML template controls what the user sees.
  • Angular applications have a root module, which acts as the starting point of the application.
  • Different components communicate and work together to build the full application.

Standalone Components (Angular 14+)

With Angular 14 and above, standalone components were introduced.

These components:

  • Do not need to be declared inside a module
  • Can function independently like mini modules

This makes Angular applications more flexible and modern.

Main Concepts of Angular

  1. Components

A component is the basic building block of an Angular application.

It controls a part of the user interface. For example:

  • A Navbar component handles navigation
  • A Dashboard component handles the main content

Creating a component:

ng generate component componentName

Replace "componentName" with the name you want.

  1. Component Interaction

Component interaction is how components communicate with each other.

Parent → Child communication:

You use "@Input()" to pass data from parent to child.

Child → Parent communication:

You use "@Output()" with "EventEmitter".

NB:

Decorators are special functions that tell Angular how a class, property, or method should behave.

  1. Pipes

Pipes are simple functions used in Angular templates to transform data.

They take input and return a formatted output.

Example uses:

  • Dates
  • Currency
  • Text formatting

Example:

{{ '26/01/1997' | date:'dd/MM/yyyy' }}
Enter fullscreen mode Exit fullscreen mode

The "|" symbol is called a pipe operator.

  1. Directives

Directives are classes that add extra behavior to elements in Angular.

They help you control:

  • Structure
  • Appearance
  • Behavior of elements

Types of directives:

  1. Component Directives

These are the components themselves used in templates.

  1. Attribute Directives

Used to change appearance or behavior of elements.

Examples:

- "ngClass"
- "ngStyle"
- "ngModel"
Enter fullscreen mode Exit fullscreen mode
  1. Structural Directives

Used to change the structure of the DOM.

Examples:

- "*ngIf"
- "*ngFor"
- "*ngSwitch"
Enter fullscreen mode Exit fullscreen mode
  1. Routing

Routing is how you navigate between different pages or views in an Angular application.

It allows you to move between:

  • Home page
  • Login page
  • Dashboard
  • Other views

How routing works:

Angular uses a "router-outlet" to display matched components.

Example route configuration:

path: '',
component: ComponentName
Enter fullscreen mode Exit fullscreen mode
  • "path" defines the URL
  • "component" defines what should be displayed
  1. Services

Services are used to handle logic and data that should not be inside components.

They are commonly used for:

  • API calls
  • Data sharing
  • Business logic

Real-life example:

A service is like a data subscription—you use it to access external data without overloading your component.

Creating a service:

ng generate service photos/photos
Enter fullscreen mode Exit fullscreen mode

Using Dependency Injection:

To use a service inside a component:

constructor(private photoService: PhotoService) {}
Enter fullscreen mode Exit fullscreen mode

This is called Dependency Injection, and it allows Angular to provide the service where needed.

  1. Modules

Modules are containers that organize an Angular application.

They hold:

  • Components
  • Services
  • Pipes
  • Other modules

Creating a module:

ng generate module moduleName
Enter fullscreen mode Exit fullscreen mode

Important Note:

An Angular application has one root module, and all other modules are connected to it.

Conclusion

Angular is a powerful framework that helps you build structured and scalable web applications.

By understanding components, services, routing, directives, and modules, you can start building real-world applications step by step.

Keep practicing, and things will start to make more sense with time.

Happy coding 🚀

Top comments (0)