Skip to content

this repo provide a clear vision and a raodmap as a starter of angular, it cover many notions such as : CLI, Components, Services, Directives, Dependecy Injection ....

Notifications You must be signed in to change notification settings

NadirInab/Angular_PokemonApi

Repository files navigation

Image Alt Text

Javascript Javascript Javascript Javascript Javascript Javascript Javascript

Angular :

  • Angular is a platform for building web applications using TypeScript, HTML, and CSS.
  • It provides tools and structures to create interactive, dynamic, and single-page applications. Angular simplifies development by offering a framework that organizes code, manages data, handles user interactions, and helps create a seamless user experience on the web.

Few notions :

Components:

  • Components are the individual parts of an Angular application that encapsulate specific features or sections.
  • They consist of : TypeScript code, HTML templates, and styles.

Modules

  • Modules are containers that group related components, directives, pipes, and services in an Angular application. They help organize and manage the overall structure of the app.

Services:

  • Services are reusable pieces of code that perform specific tasks or provide shared data and functionality across components.
  • They promote code reuse and maintain a separation of concerns.

Angular CLI :

Angular CLI provides many commands for various tasks, such as generating services, pipes, modules, and more. Here some the most common used ones :

  • Create a new Angular application :
  ng new my-app
  • Generate a new component::
  ng generate component my-component

  • Serve the application locally: :
  ng serve
  • Run unit tests: :
 ng test

Angular templates :

Angular templates involves data binding and interpolation.

interpolation {{ expression }}

  • Interpolation is a way to output the result of an expression in the HTML template.
<p>Welcome, {{ username }}!</p>

Property Binding [property]="expression"

  • Property binding allows you to set the value of an HTML element's property to the result of an expression.
<img [src]="imageUrl" alt="Image">

Event Binding (event)="expression"

  • Event binding allows you to respond to user events (e.g., clicks, mouseovers).
<button (click)="onButtonClick()">Click me</button>

Directives :

  • Directives play a crucial role in enhancing the declarative nature of Angular templates and making it easier to build dynamic and interactive web applications, Angular has several built-in directives :
  • ngIf: Conditionally rendering elements.
<div *ngIf="isLoggedIn">Welcome, {{ username }}!</div>
  • ngFor: Iterating over a collection to generate a list of elements.
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
  • ngSwitch : Switching between multiple cases based on a condition.
<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Red</div>
  <div *ngSwitchCase="'blue'">Blue</div>
  <div *ngSwitchDefault>Other</div>
</div>

  • ngStyle : Dynamically applying styles to an element.
<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize + 'px' }">Styled Text</div>


OnInit :

  • The OnInit interface in Angular is used to define a lifecycle hook for a component.

  • Specifically, the OnInit interface has a single method called ngOnInit(), which is a lifecycle hook that is called after the component has been initialized.

  • this hook to perform any initialization logic needed for the component, such as fetching data, setting up subscriptions.

  • The Component decorator is used to define the metadata for the component, including the selector, template, and style URLs.

About

this repo provide a clear vision and a raodmap as a starter of angular, it cover many notions such as : CLI, Components, Services, Directives, Dependecy Injection ....

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published