https://github.com/nadirinab/angular_pokemonapi
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 ....
https://github.com/nadirinab/angular_pokemonapi
angular dependency-injection directive javascript routing
Last synced: 2 months ago
JSON representation
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 ....
- Host: GitHub
- URL: https://github.com/nadirinab/angular_pokemonapi
- Owner: NadirInab
- Created: 2023-12-04T00:25:03.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-04T08:13:08.000Z (over 2 years ago)
- Last Synced: 2024-01-27T03:41:25.927Z (about 2 years ago)
- Topics: angular, dependency-injection, directive, javascript, routing
- Language: TypeScript
- Homepage:
- Size: 230 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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 :
```md
ng new my-app
```
- Generate a new component::
```md
ng generate component my-component
```
- Serve the application locally: :
```md
ng serve
```
- Run unit tests: :
```md
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.
```md
Welcome, {{ username }}!
```
## Property Binding [property]="expression"
- Property binding allows you to set the value of an HTML element's property to the result of an expression.
```md
![Image]()
```
## Event Binding (event)="expression"
- Event binding allows you to respond to user events (e.g., clicks, mouseovers).
```md
Click me
```
# 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.
```md
Welcome, {{ username }}!
```
- ngFor: Iterating over a collection to generate a list of elements.
```md
- {{ item }}
```
- ngSwitch : Switching between multiple cases based on a condition.
```md
```
- ngStyle : Dynamically applying styles to an element.
```md
```
## 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.