Top Related Projects
Exemplary real world application built with React + Redux
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.
ASP.NET Core backend implementation for RealWorld
Example Spring codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld API spec.
Exemplary real world backend API built with Laravel
Quick Overview
The gothinkster/angular-realworld-example-app is a fully-functional, production-ready Angular application that adheres to the RealWorld API specification. It serves as a reference implementation for building Angular applications, showcasing best practices and a solid architecture.
Pros
- Comprehensive Example: The project provides a complete, production-ready Angular application that covers a wide range of features and functionality, making it an excellent learning resource.
- Adherence to Best Practices: The codebase follows Angular's best practices, including the use of components, services, routing, and state management, providing a solid foundation for building Angular applications.
- Responsive Design: The application is designed to be responsive and mobile-friendly, ensuring a consistent user experience across different devices.
- Extensive Documentation: The project's documentation is thorough, covering installation, development, and deployment, making it easy for developers to get started and understand the codebase.
Cons
- Complexity: The project's comprehensive nature and adherence to best practices can make it more complex for beginners to understand and navigate, especially if they are new to Angular.
- Potential Outdated Dependencies: As the project is maintained by the community, there is a possibility that some of the dependencies or libraries used may become outdated over time, requiring regular updates to keep the application up-to-date.
- Limited Customization: While the project provides a solid foundation, it may not be as flexible or customizable as a completely custom-built application, which could be a drawback for developers with specific requirements.
- Performance Overhead: The comprehensive nature of the application and the use of various libraries and frameworks may result in a larger bundle size and potential performance overhead, which could be a concern for certain use cases.
Getting Started
To get started with the gothinkster/angular-realworld-example-app, follow these steps:
- Clone the repository:
git clone https://github.com/gothinkster/angular-realworld-example-app.git
- Navigate to the project directory:
cd angular-realworld-example-app
- Install the dependencies:
npm install
- Start the development server:
npm start
- Open your web browser and navigate to
http://localhost:4200to view the application.
The project's documentation provides additional information on running tests, building the production version, and deploying the application.
Competitor Comparisons
Exemplary real world application built with React + Redux
Pros of react-redux-realworld-example-app
- More flexible and lightweight architecture, allowing for easier customization
- Better performance for complex, data-intensive applications
- Larger ecosystem and community support for React and Redux
Cons of react-redux-realworld-example-app
- Steeper learning curve, especially for developers new to React and Redux
- More boilerplate code required for state management
- Less opinionated structure, which may lead to inconsistencies in large projects
Code Comparison
angular-realworld-example-app:
@Component({
selector: 'app-article-list',
templateUrl: './article-list.component.html'
})
export class ArticleListComponent implements OnInit {
constructor(private articlesService: ArticlesService) {}
// ...
}
react-redux-realworld-example-app:
import React from 'react';
import { connect } from 'react-redux';
const ArticleList = ({ articles }) => (
<div>
{articles.map(article => <ArticlePreview key={article.slug} article={article} />)}
</div>
);
export default connect(mapStateToProps)(ArticleList);
The Angular example uses a class-based component with dependency injection, while the React-Redux example uses a functional component with Redux connection. The React approach is more concise but requires understanding of Redux concepts.
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.
Pros of vue-realworld-example-app
- Simpler and more intuitive component structure
- Faster initial rendering and better performance for small to medium-sized applications
- Easier learning curve for developers new to the framework
Cons of vue-realworld-example-app
- Less robust for large-scale enterprise applications compared to Angular
- Smaller ecosystem and fewer third-party libraries available
- Limited built-in features, requiring additional plugins for complex functionality
Code Comparison
vue-realworld-example-app:
<template>
<div class="article-meta">
<a href=""><img :src="article.author.image" /></a>
<div class="info">
<a href="" class="author">{{ article.author.username }}</a>
<span class="date">{{ article.createdAt | date }}</span>
</div>
</div>
</template>
angular-realworld-example-app:
<div class="article-meta">
<a [routerLink]="['/profile', article.author.username]">
<img [src]="article.author.image" />
</a>
<div class="info">
<a class="author" [routerLink]="['/profile', article.author.username]">
{{ article.author.username }}
</a>
<span class="date">{{ article.createdAt | date: 'longDate' }}</span>
</div>
</div>
The Vue example uses a more concise template syntax, while the Angular example demonstrates built-in routing and date formatting capabilities.
Pros of node-express-realworld-example-app
- Backend-focused, providing a robust API implementation
- Lightweight and efficient, suitable for scalable server-side applications
- Easier to integrate with various frontend frameworks or mobile apps
Cons of node-express-realworld-example-app
- Lacks built-in frontend, requiring additional setup for a complete application
- May require more configuration for full-stack developers used to all-in-one solutions
- Less opinionated structure compared to Angular's strict architecture
Code Comparison
node-express-realworld-example-app (Express.js route):
router.post('/users/login', function(req, res, next){
if(!req.body.user.email){
return res.status(422).json({errors: {email: "can't be blank"}});
}
if(!req.body.user.password){
return res.status(422).json({errors: {password: "can't be blank"}});
}
// ... (authentication logic)
});
angular-realworld-example-app (Angular component):
@Component({
selector: 'app-auth-page',
templateUrl: './auth.component.html'
})
export class AuthComponent implements OnInit {
authType: String = '';
title: String = '';
errors: Errors = {errors: {}};
isSubmitting = false;
authForm: FormGroup;
// ... (component logic)
}
The Express.js example shows server-side route handling, while the Angular example demonstrates a client-side component structure. This highlights the different focuses of the two projects: backend API vs. frontend application.
ASP.NET Core backend implementation for RealWorld
Pros of aspnetcore-realworld-example-app
- Built on ASP.NET Core, offering better performance and cross-platform compatibility
- Utilizes Entity Framework Core for efficient database operations and migrations
- Implements a clean architecture with separation of concerns, making it easier to maintain and scale
Cons of aspnetcore-realworld-example-app
- Steeper learning curve for developers not familiar with C# and .NET ecosystem
- Less extensive front-end capabilities compared to Angular's rich UI framework
- Potentially more complex setup and deployment process for non-Windows environments
Code Comparison
aspnetcore-realworld-example-app (C#):
public async Task<ArticleEnvelope> CreateArticle(ArticleCreateRequest request)
{
var author = await _context.Persons.FirstOrDefaultAsync(x => x.Username == _currentUserAccessor.GetCurrentUsername());
var article = new Article()
{
Author = author,
Body = request.Article.Body,
CreatedAt = DateTime.UtcNow,
UpdatedAt = DateTime.UtcNow,
Description = request.Article.Description,
Title = request.Article.Title,
Slug = request.Article.Title.GenerateSlug()
};
await _context.Articles.AddAsync(article);
await _context.SaveChangesAsync();
return new ArticleEnvelope(article);
}
angular-realworld-example-app (TypeScript):
createArticle(article): Observable<Article> {
return this.apiService.post('/articles/', {article: article})
.pipe(map(data => data.article));
}
The aspnetcore-realworld-example-app provides a more detailed implementation with database operations, while the angular-realworld-example-app focuses on HTTP requests to a backend API.
Example Spring codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld API spec.
Pros of spring-boot-realworld-example-app
- Robust backend implementation with Spring Boot, offering better scalability and performance for large-scale applications
- Easier integration with enterprise-level databases and services
- More straightforward implementation of RESTful APIs and microservices architecture
Cons of spring-boot-realworld-example-app
- Steeper learning curve for developers new to Java and Spring ecosystem
- Potentially more verbose code compared to Angular's TypeScript
- Requires more setup and configuration for frontend integration
Code Comparison
spring-boot-realworld-example-app (Java):
@GetMapping("/articles/{slug}")
public ResponseEntity<SingleArticleResponse> getArticle(@PathVariable String slug) {
return ResponseEntity.ok(
new SingleArticleResponse(articleQueryService.findBySlug(slug).orElseThrow(ResourceNotFoundException::new))
);
}
angular-realworld-example-app (TypeScript):
getArticle(slug: string): Observable<Article> {
return this.apiService.get('/articles/' + slug)
.pipe(map(data => data.article));
}
The Spring Boot example demonstrates a more explicit RESTful endpoint definition with annotations, while the Angular example shows a more concise HTTP request using RxJS observables. The Spring Boot version offers more built-in error handling and response formatting, whereas the Angular version relies on the apiService abstraction for HTTP requests.
Exemplary real world backend API built with Laravel
Pros of Laravel RealWorld Example App
- Built with Laravel, a robust PHP framework known for its elegant syntax and powerful features
- Follows MVC architecture, promoting better code organization and separation of concerns
- Includes built-in authentication and authorization systems, simplifying user management
Cons of Laravel RealWorld Example App
- Requires server-side rendering, potentially leading to slower initial page loads compared to Angular's SPA approach
- Less flexibility in creating dynamic user interfaces compared to Angular's component-based architecture
- Steeper learning curve for developers not familiar with PHP or Laravel ecosystem
Code Comparison
Laravel RealWorld Example App (PHP):
public function index()
{
$articles = Article::latest()->paginate(20);
return $this->respond([
'articles' => $articles->toArray()['data'],
'articlesCount' => $articles->total()
]);
}
Angular RealWorld Example App (TypeScript):
getAll(config: ArticleListConfig): Observable<{articles: Article[], articlesCount: number}> {
const params = {};
Object.keys(config.filters)
.forEach((key) => {
params[key] = config.filters[key];
});
return this.apiService.get('/articles' + ((config.type === 'feed') ? '/feed' : ''),
new HttpParams({ fromObject: params }));
}
This comparison highlights the differences in syntax and approach between Laravel's server-side logic and Angular's client-side service implementation for retrieving articles.
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 codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.
Demo RealWorld
This codebase was created to demonstrate a fully fledged application built with Angular that interacts with an actual backend server including CRUD operations, authentication, routing, pagination, and more. We've gone to great lengths to adhere to the Angular Styleguide & best practices.
Additionally, there is an Angular 1.5 version of this codebase that you can fork and/or learn how to recreate.
How it works
We're currently working on some docs for the codebase (explaining where functionality is located, how it works, etc) but the codebase should be straightforward to follow as is. We've also released a step-by-step tutorial w/ screencasts that teaches you how to recreate the codebase from scratch.
Making requests to the backend API
For convenience, we have a live API server running at https://conduit.productionready.io/api for the application to make requests against. You can view the API spec here which contains all routes & responses for the server.
The source code for the backend server (available for Node, Rails and Django) can be found in the main RealWorld repo.
If you want to change the API URL to a local server, simply edit src/environments/environment.ts and change api_url to the local server's URL (i.e. localhost:3000/api). Please note you will probably need to use a proxy in order to avoid Cross-Origin Resource (CORS) issues. (more info: Proxying to a backend server )
Getting started
Make sure you have the Angular CLI installed globally. We use Yarn to manage the dependencies, so we strongly recommend you to use it. you can install it from Here, then run yarn install to resolve all dependencies (might take a minute).
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Building the project
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Functionality overview
The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication. You can view a live demo over at https://angular.realworld.io
General functionality:
- Authenticate users via JWT (login/signup pages + logout button on settings page)
- CRU* users (sign up & settings page - no deleting required)
- CRUD Articles
- CR*D Comments on articles (no updating required)
- GET and display paginated lists of articles
- Favorite articles
- Follow other users
The general page breakdown looks like this:
- Home page (URL: /#/ )
- List of tags
- List of articles pulled from either Feed, Global, or by Tag
- Pagination for list of articles
- Sign in/Sign up pages (URL: /#/login, /#/register )
- Uses JWT (store the token in localStorage)
- Authentication can be easily switched to session/cookie based
- Settings page (URL: /#/settings )
- Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
- Article page (URL: /#/article/article-slug-here )
- Delete article button (only shown to article's author)
- Render markdown from server client side
- Comments section at bottom of page
- Delete comment button (only shown to comment's author)
- Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
- Show basic user info
- List of articles populated from author's created articles or author's favorited articles
Top Related Projects
Exemplary real world application built with React + Redux
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.
ASP.NET Core backend implementation for RealWorld
Example Spring codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld API spec.
Exemplary real world backend API built with Laravel
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