Top Related Projects
Deliver web apps with confidence 🚀
Angular, NgRx, Angular CLI & Angular Material Starter Project
Exemplary real world application built with Angular
Customizable admin dashboard template based on Angular 10+
Angular and TypeScript JumpStart example application
Quick Overview
Ismaestro/angular-example-app is a comprehensive Angular application showcasing best practices and modern development techniques. It serves as a learning resource and reference implementation for developers working with Angular, demonstrating various features and architectural patterns.
Pros
- Implements a wide range of Angular features and best practices
- Regularly updated to keep up with the latest Angular versions
- Includes extensive documentation and comments for easy understanding
- Demonstrates integration with external services and APIs
Cons
- May be overwhelming for beginners due to its comprehensive nature
- Some advanced concepts might require additional learning for full understanding
- The large scope of the project could make it challenging to navigate for specific examples
- Occasional delays in updates for the latest Angular versions
Code Examples
Here are a few code examples from the project:
- Component with dependency injection:
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
constructor(
private heroService: HeroService,
private route: ActivatedRoute,
private location: Location
) {}
ngOnInit(): void {
this.getHero();
}
getHero(): void {
const id = +this.route.snapshot.paramMap.get('id');
this.heroService.getHero(id)
.subscribe(hero => this.hero = hero);
}
}
- Service with HTTP requests:
@Injectable({
providedIn: 'root'
})
export class HeroService {
private heroesUrl = 'api/heroes';
constructor(
private http: HttpClient,
private messageService: MessageService
) {}
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
tap(_ => this.log('fetched heroes')),
catchError(this.handleError<Hero[]>('getHeroes', []))
);
}
}
- Reactive form example:
@Component({
selector: 'app-hero-form',
templateUrl: './hero-form.component.html'
})
export class HeroFormComponent implements OnInit {
heroForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.heroForm = this.fb.group({
name: ['', Validators.required],
power: ['', Validators.required],
alterEgo: ''
});
}
onSubmit() {
if (this.heroForm.valid) {
console.log(this.heroForm.value);
}
}
}
Getting Started
To get started with this project:
-
Clone the repository:
git clone https://github.com/Ismaestro/angular-example-app.git
-
Install dependencies:
cd angular-example-app npm install
-
Run the development server:
ng serve
-
Open your browser and navigate to
http://localhost:4200
to view the application.
Competitor Comparisons
Deliver web apps with confidence 🚀
Pros of angular
- Official Angular framework repository with comprehensive documentation
- Larger community support and more frequent updates
- Contains core Angular libraries and tools for development
Cons of angular
- More complex and overwhelming for beginners
- Lacks practical, ready-to-use application examples
- Steeper learning curve for new developers
Code comparison
angular-example-app:
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.scss']
})
export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
angular:
@Component({
selector: 'example-component',
template: `<h1>Hello, {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class ExampleComponent {
@Input() name: string;
The angular-example-app repository provides a more comprehensive, real-world example of component implementation, while the angular repository showcases a simpler, bare-bones component structure. This difference highlights how angular-example-app is more focused on practical application, whereas angular serves as the foundation for Angular development.
Angular, NgRx, Angular CLI & Angular Material Starter Project
Pros of angular-ngrx-material-starter
- Implements NgRx for state management, providing a more robust solution for complex applications
- Includes a wider range of Angular Material components and features
- Offers more comprehensive documentation and a detailed wiki
Cons of angular-ngrx-material-starter
- Higher learning curve due to NgRx integration
- More complex project structure, which may be overwhelming for beginners
- Less focus on internationalization (i18n) compared to angular-example-app
Code Comparison
angular-ngrx-material-starter:
@Effect()
login = this.actions$.pipe(
ofType(AuthActionTypes.LOGIN),
map((action: Login) => action.payload),
exhaustMap((auth) =>
this.authService.login(auth).pipe(
map(user => new LoginSuccess({ user })),
catchError(error => of(new LoginFailure({ error })))
)
)
);
angular-example-app:
login(email: string, password: string): Observable<User> {
return this.http.post<User>(`${environment.apiUrl}/login`, { email, password })
.pipe(
tap(user => this.setSession(user)),
shareReplay()
);
}
The code snippets demonstrate the difference in state management approaches. angular-ngrx-material-starter uses NgRx effects for handling authentication, while angular-example-app uses a more straightforward service-based approach.
Exemplary real world application built with Angular
Pros of angular-realworld-example-app
- Implements a real-world application (Medium clone) with more complex features
- Follows RealWorld spec, making it easier to compare with other framework implementations
- Includes authentication and API integration
Cons of angular-realworld-example-app
- Less focus on Angular-specific best practices and optimizations
- Fewer examples of advanced Angular features like custom directives or pipes
- Less comprehensive documentation and comments in the codebase
Code Comparison
angular-realworld-example-app:
export class ArticleListComponent implements OnInit {
constructor(
private articlesService: ArticlesService,
private route: ActivatedRoute
) {}
ngOnInit() {
this.route.data.subscribe(
(data: { articles: Article[] }) => {
this.articles = data.articles;
}
);
}
}
angular-example-app:
export class HeroesComponent implements OnInit {
constructor(
private heroService: HeroService,
private translateService: TranslateService
) {}
ngOnInit() {
this.getHeroes();
this.translateService.onLangChange.subscribe(() => {
this.getHeroes();
});
}
}
The angular-realworld-example-app focuses on implementing a real-world application with API integration, while angular-example-app emphasizes Angular-specific features like internationalization. Both examples demonstrate proper use of dependency injection and component lifecycle hooks.
Customizable admin dashboard template based on Angular 10+
Pros of ngx-admin
- More comprehensive UI components and layouts
- Better suited for large-scale enterprise applications
- Includes advanced features like authentication and role-based access control
Cons of ngx-admin
- Steeper learning curve due to its complexity
- May be overkill for smaller projects or learning purposes
- Less focus on best practices and clean code structure
Code Comparison
ngx-admin:
@Component({
selector: 'ngx-dashboard',
styleUrls: ['./dashboard.component.scss'],
templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnDestroy {
private alive = true;
angular-example-app:
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.scss']
})
export class HeroesComponent implements OnInit {
heroes: Hero[];
ngx-admin uses a more complex component structure with lifecycle hooks and private properties, while angular-example-app focuses on simplicity and readability. The ngx-admin example shows a dashboard component, indicating its focus on admin interfaces, whereas angular-example-app demonstrates a basic heroes component, highlighting its educational nature.
Both repositories serve different purposes: ngx-admin is a feature-rich admin template for building large-scale applications, while angular-example-app is a simpler, more educational project focused on Angular fundamentals and best practices. Choose based on your project requirements and learning goals.
Angular and TypeScript JumpStart example application
Pros of Angular-JumpStart
- More comprehensive documentation and setup instructions
- Includes a basic backend server for API simulation
- Focuses on core Angular concepts without additional libraries
Cons of Angular-JumpStart
- Less extensive feature set compared to angular-example-app
- Fewer examples of advanced Angular techniques
- Simpler UI design, which may be less visually appealing
Code Comparison
Angular-JumpStart:
@Component({
selector: 'app-customers',
templateUrl: './customers.component.html'
})
export class CustomersComponent implements OnInit {
title: string;
people: any[] = [];
angular-example-app:
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeroesComponent implements OnInit {
heroes$: Observable<Hero[]>;
The Angular-JumpStart example shows a simpler component structure, while the angular-example-app demonstrates more advanced techniques like change detection strategy and observables.
Angular-JumpStart is ideal for beginners looking to grasp fundamental Angular concepts, offering a straightforward approach with basic examples. On the other hand, angular-example-app provides a more feature-rich environment, showcasing advanced Angular practices and a polished UI, making it suitable for developers seeking to explore more complex Angular applications.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Angular Example App
Base project with Angular 19 and i18n
A real-world app made with :heart: and dedication!. Showcasing CRUD operations, advanced patterns, and much more. Dive in and explore!
DEMO HERE
Setup
npm i
npm start
Status
Server
This project is powered by a real application deployed on Fly.io. You can explore the codebase here. The server is built with NestJS, Prisma, and Postgres, ensuring a robust and modern backend architecture.
What's included
- Strict ESLint Rules: Enforcing clean and consistent code quality.
- Standalone Components: Modern and modular Angular architecture.
- Functional Guards: Enhanced route protection with clean and reusable logic.
- Pokémon Fun!: Interact with Pokémon data via the PokeAPI.
- Authentication: Secure JWT-based authentication.
- Internationalization (i18n): Multilingual support with English and Spanish.
- Lazy Loading: Efficient module loading for improved performance.
- Logical Directory Structure: Easy-to-navigate, organized codebase.
- Best Practices: Adheres to the Angular Style Guide.
- Responsive Design: Built with CSS Grid and Flexbox for layouts.
- Accessible: Usage of Shoelace, a forward-thinking library of web components.
- Optimized Images: Leveraging NgOptimizedImage for performance.
- SASS & BEM Styles: Maintainable and scalable styling.
- Animations: Smooth and engaging UI interactions using Angular's powerful animations API.
- Comprehensive Testing: Example tests for Components, Services, Interceptors, Directives, and Guards. [PENDING]
- End-to-End Testing: Fully configured with Playwright. [PENDING]
Bugs and feature requests
Found a bug or have a feature request? Before submitting, please check the issue guidelines and search through existing and closed issues. If your problem or idea hasnât been addressed yet, please open a new issue.
If you have an idea or you want to do something, tell me or just do it! I'm always happy to hear your feedback!
Contributors
Tom Gamull ð |
mansyaprime ð» |
codeimmortal ð» |
tomasfse ð» |
golu ð» |
rancyr ð» |
codingphasedotcom ð» |
Max ð» |
Karajan ð» |
Carl Chan ð» |
Dyeimys Franco Correa ð» |
Anartz Mugika Ledo ð» |
Copyright and license
Code and documentation copyright 2025 to the authors.
Code released under the MIT License.
Top Related Projects
Deliver web apps with confidence 🚀
Angular, NgRx, Angular CLI & Angular Material Starter Project
Exemplary real world application built with Angular
Customizable admin dashboard template based on Angular 10+
Angular and TypeScript JumpStart example application
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot