43 |
44 |
45 |
46 |
52 |
53 |
54 |
2 |
46 |
--------------------------------------------------------------------------------
/src/app/shared/article-helpers/article-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
2 |
3 | import { Article, ArticleListConfig, ArticlesService } from '../../core';
4 | @Component({
5 | selector: 'app-article-list',
6 | styleUrls: ['article-list.component.css'],
7 | templateUrl: './article-list.component.html',
8 | changeDetection: ChangeDetectionStrategy.OnPush
9 | })
10 | export class ArticleListComponent {
11 | constructor (
12 | private articlesService: ArticlesService,
13 | private cd: ChangeDetectorRef
14 | ) {}
15 |
16 | @Input() limit: number;
17 | @Input()
18 | set config(config: ArticleListConfig) {
19 | if (config) {
20 | this.query = config;
21 | this.currentPage = 1;
22 | this.runQuery();
23 | }
24 | }
25 |
26 | query: ArticleListConfig;
27 | results: Article[];
28 | loading = false;
29 | currentPage = 1;
30 | totalPages: Array
3 |
45 |
4 |
5 |
42 |
43 |
44 |
2 |
3 |
59 |
--------------------------------------------------------------------------------
/src/app/editor/editor.component.html:
--------------------------------------------------------------------------------
1 |
4 |
26 |
27 |
5 |
25 |
6 |
7 |
24 |
8 | ![user image]()
9 |
15 |
16 |
19 | Edit Profile Settings
20 |
21 |
22 |
23 | {{ profile.username }}
10 |{{ profile.bio }}
11 |
28 |
57 |
58 |
29 |
30 |
56 |
31 |
54 |
55 |
32 |
50 |
51 |
52 |
2 |
60 |
--------------------------------------------------------------------------------
/src/app/settings/settings.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { FormBuilder, FormGroup } from '@angular/forms';
3 | import { Router } from '@angular/router';
4 |
5 | import { User, UserService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-settings-page',
9 | templateUrl: './settings.component.html',
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class SettingsComponent implements OnInit {
13 | user: User = {} as User;
14 | settingsForm: FormGroup;
15 | errors: Object = {};
16 | isSubmitting = false;
17 |
18 | constructor(
19 | private router: Router,
20 | private userService: UserService,
21 | private fb: FormBuilder,
22 | private cd: ChangeDetectorRef
23 | ) {
24 | // create form group using the form builder
25 | this.settingsForm = this.fb.group({
26 | image: '',
27 | username: '',
28 | bio: '',
29 | email: '',
30 | password: ''
31 | });
32 | // Optional: subscribe to changes on the form
33 | // this.settingsForm.valueChanges.subscribe(values => this.updateUser(values));
34 | }
35 |
36 | ngOnInit() {
37 | // Make a fresh copy of the current user's object to place in editable form fields
38 | Object.assign(this.user, this.userService.getCurrentUser());
39 | // Fill the form
40 | this.settingsForm.patchValue(this.user);
41 | }
42 |
43 | logout() {
44 | this.userService.purgeAuth();
45 | this.router.navigateByUrl('/');
46 | }
47 |
48 | submitForm() {
49 | this.isSubmitting = true;
50 |
51 | // update the model
52 | this.updateUser(this.settingsForm.value);
53 |
54 | this.userService
55 | .update(this.user)
56 | .subscribe(
57 | updatedUser => this.router.navigateByUrl('/profile/' + updatedUser.username),
58 | err => {
59 | this.errors = err;
60 | this.isSubmitting = false;
61 | this.cd.markForCheck();
62 | }
63 | );
64 | }
65 |
66 | updateUser(values: Object) {
67 | Object.assign(this.user, values);
68 | }
69 |
70 | }
71 |
--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 |
3 |
59 |
4 |
58 |
5 |
6 |
57 |
2 |
3 |
9 |
10 |
66 |
--------------------------------------------------------------------------------
/src/app/auth/auth.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import { Errors, UserService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-auth-page',
9 | templateUrl: './auth.component.html',
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class AuthComponent implements OnInit {
13 | authType: String = '';
14 | title: String = '';
15 | errors: Errors = {errors: {}};
16 | isSubmitting = false;
17 | authForm: FormGroup;
18 |
19 | constructor(
20 | private route: ActivatedRoute,
21 | private router: Router,
22 | private userService: UserService,
23 | private fb: FormBuilder,
24 | private cd: ChangeDetectorRef
25 | ) {
26 | // use FormBuilder to create a form group
27 | this.authForm = this.fb.group({
28 | 'email': ['', Validators.required],
29 | 'password': ['', Validators.required]
30 | });
31 | }
32 |
33 | ngOnInit() {
34 | this.route.url.subscribe(data => {
35 | // Get the last piece of the URL (it's either 'login' or 'register')
36 | this.authType = data[data.length - 1].path;
37 | // Set a title for the page accordingly
38 | this.title = (this.authType === 'login') ? 'Sign in' : 'Sign up';
39 | // add form control for username if this is the register page
40 | if (this.authType === 'register') {
41 | this.authForm.addControl('username', new FormControl());
42 | }
43 | this.cd.markForCheck();
44 | });
45 | }
46 |
47 | submitForm() {
48 | this.isSubmitting = true;
49 | this.errors = {errors: {}};
50 |
51 | const credentials = this.authForm.value;
52 | this.userService
53 | .attemptAuth(this.authType, credentials)
54 | .subscribe(
55 | data => this.router.navigateByUrl('/'),
56 | err => {
57 | this.errors = err;
58 | this.isSubmitting = false;
59 | this.cd.markForCheck();
60 | }
61 | );
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/app/shared/buttons/favorite-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | import { Article, ArticlesService, UserService } from '../../core';
5 | import { of } from 'rxjs';
6 | import { concatMap , tap } from 'rxjs/operators';
7 |
8 | @Component({
9 | selector: 'app-favorite-button',
10 | templateUrl: './favorite-button.component.html',
11 | changeDetection: ChangeDetectionStrategy.OnPush
12 | })
13 | export class FavoriteButtonComponent {
14 | constructor(
15 | private articlesService: ArticlesService,
16 | private router: Router,
17 | private userService: UserService,
18 | private cd: ChangeDetectorRef
19 | ) {}
20 |
21 | @Input() article: Article;
22 | @Output() toggle = new EventEmitter
11 |
65 |
12 |
13 |
64 |
14 |
40 |
41 |
15 |
36 |
37 |
38 |
42 |
61 |
62 |
63 |
2 |
69 |
--------------------------------------------------------------------------------
/src/app/editor/editor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import { Article, ArticlesService } from '../core';
6 |
7 | @Component({
8 | selector: 'app-editor-page',
9 | templateUrl: './editor.component.html',
10 | changeDetection: ChangeDetectionStrategy.OnPush
11 | })
12 | export class EditorComponent implements OnInit {
13 | article: Article = {} as Article;
14 | articleForm: FormGroup;
15 | tagField = new FormControl();
16 | errors: Object = {};
17 | isSubmitting = false;
18 |
19 | constructor(
20 | private articlesService: ArticlesService,
21 | private route: ActivatedRoute,
22 | private router: Router,
23 | private fb: FormBuilder,
24 | private cd: ChangeDetectorRef
25 | ) {
26 | // use the FormBuilder to create a form group
27 | this.articleForm = this.fb.group({
28 | title: '',
29 | description: '',
30 | body: ''
31 | });
32 |
33 | // Initialized tagList as empty array
34 | this.article.tagList = [];
35 |
36 | // Optional: subscribe to value changes on the form
37 | // this.articleForm.valueChanges.subscribe(value => this.updateArticle(value));
38 | }
39 |
40 | ngOnInit() {
41 | // If there's an article prefetched, load it
42 | this.route.data.subscribe((data: { article: Article }) => {
43 | if (data.article) {
44 | this.article = data.article;
45 | this.articleForm.patchValue(data.article);
46 | this.cd.markForCheck();
47 | }
48 | });
49 | }
50 |
51 | trackByFn(index, item) {
52 | return index;
53 | }
54 |
55 | addTag() {
56 | // retrieve tag control
57 | const tag = this.tagField.value;
58 | // only add tag if it does not exist yet
59 | if (this.article.tagList.indexOf(tag) < 0) {
60 | this.article.tagList.push(tag);
61 | }
62 | // clear the input
63 | this.tagField.reset('');
64 | }
65 |
66 | removeTag(tagName: string) {
67 | this.article.tagList = this.article.tagList.filter(tag => tag !== tagName);
68 | }
69 |
70 | submitForm() {
71 | this.isSubmitting = true;
72 |
73 | // update the model
74 | this.updateArticle(this.articleForm.value);
75 |
76 | // post the changes
77 | this.articlesService.save(this.article).subscribe(
78 | article => {
79 | this.router.navigateByUrl('/article/' + article.slug);
80 | this.cd.markForCheck();
81 | },
82 | err => {
83 | this.errors = err;
84 | this.isSubmitting = false;
85 | this.cd.markForCheck();
86 | }
87 | );
88 | }
89 |
90 | updateArticle(values: Object) {
91 | Object.assign(this.article, values);
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/app/core/services/user.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable , BehaviorSubject , ReplaySubject } from 'rxjs';
3 |
4 | import { ApiService } from './api.service';
5 | import { JwtService } from './jwt.service';
6 | import { User } from '../models';
7 | import { map , distinctUntilChanged } from 'rxjs/operators';
8 |
9 |
10 | @Injectable({
11 | providedIn: 'root'
12 | })
13 | export class UserService {
14 | private currentUserSubject = new BehaviorSubject
3 |
68 |
4 |
67 |
5 |
6 |
59 | 60 | 64 | 65 |
66 | Your Settings
7 | 8 |59 | 60 | 64 | 65 |
2 |
3 |
38 |
39 |
129 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ang2-conduit": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "architect": {
11 | "build": {
12 | "builder": "@angular-devkit/build-angular:browser",
13 | "options": {
14 | "outputPath": "dist",
15 | "index": "src/index.html",
16 | "main": "src/main.ts",
17 | "tsConfig": "src/tsconfig.app.json",
18 | "polyfills": "src/polyfills.ts",
19 | "assets": [
20 | "src/assets",
21 | "src/favicon.ico",
22 | "src/manifest.webmanifest"
23 | ],
24 | "styles": [
25 | "src/styles.css"
26 | ],
27 | "scripts": [],
28 | "namedChunks": true,
29 | "vendorChunk": true,
30 | "extractLicenses": false,
31 | "buildOptimizer": false,
32 | "sourceMap": true,
33 | "optimization": false,
34 | "aot": true
35 | },
36 | "configurations": {
37 | "production": {
38 | "optimization": true,
39 | "outputHashing": "all",
40 | "sourceMap": false,
41 | "extractLicenses": true,
42 | "vendorChunk": false,
43 | "buildOptimizer": true,
44 | "budgets": [
45 | {
46 | "type": "initial",
47 | "maximumWarning": "2mb",
48 | "maximumError": "5mb"
49 | },
50 | {
51 | "type": "anyComponentStyle",
52 | "maximumWarning": "6kb"
53 | }
54 | ],
55 | "fileReplacements": [
56 | {
57 | "replace": "src/environments/environment.ts",
58 | "with": "src/environments/environment.prod.ts"
59 | }
60 | ],
61 | "serviceWorker": true,
62 | "ngswConfigPath": "ngsw-config.json"
63 | }
64 | },
65 | "defaultConfiguration": ""
66 | },
67 | "serve": {
68 | "builder": "@angular-devkit/build-angular:dev-server",
69 | "options": {
70 | "browserTarget": "ang2-conduit:build"
71 | },
72 | "configurations": {
73 | "production": {
74 | "browserTarget": "ang2-conduit:build:production"
75 | }
76 | }
77 | },
78 | "extract-i18n": {
79 | "builder": "@angular-devkit/build-angular:extract-i18n",
80 | "options": {
81 | "browserTarget": "ang2-conduit:build"
82 | }
83 | },
84 | "test": {
85 | "builder": "@angular-devkit/build-angular:karma",
86 | "options": {
87 | "main": "src/test.ts",
88 | "karmaConfig": "./karma.conf.js",
89 | "polyfills": "src/polyfills.ts",
90 | "tsConfig": "src/tsconfig.spec.json",
91 | "scripts": [],
92 | "styles": [
93 | "src/styles.css"
94 | ],
95 | "assets": [
96 | "src/assets",
97 | "src/favicon.ico",
98 | "src/manifest.webmanifest"
99 | ]
100 | }
101 | },
102 | "lint": {
103 | "builder": "@angular-eslint/builder:lint",
104 | "options": {
105 | "lintFilePatterns": [
106 | "src/**/*.ts",
107 | "src/**/*.html"
108 | ]
109 | }
110 | }
111 | }
112 | },
113 | "ang2-conduit-e2e": {
114 | "root": "e2e",
115 | "sourceRoot": "e2e",
116 | "projectType": "application",
117 | "architect": {
118 | "e2e": {
119 | "builder": "@angular-devkit/build-angular:protractor",
120 | "options": {
121 | "protractorConfig": "./protractor.conf.js",
122 | "devServerTarget": "ang2-conduit:serve"
123 | }
124 | }
125 | }
126 | }
127 | },
128 | "defaultProject": "ang2-conduit",
129 | "schematics": {
130 | "@schematics/angular:component": {
131 | "prefix": "app",
132 | "style": "css"
133 | },
134 | "@schematics/angular:directive": {
135 | "prefix": "app"
136 | }
137 | },
138 | "cli": {
139 | "analytics": false,
140 | "defaultCollection": "@angular-eslint/schematics"
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](http://realworld.io)
2 | [](https://app.netlify.com/sites/angular-realworld/deploys)
3 |
4 | # 
5 |
6 | > ### Angular codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld-example-apps) spec and API.
7 |
8 |
9 |
40 |
41 |
57 | 58 |
128 |
42 |
55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 |
64 | Edit Article
65 |
66 |
67 |
72 |
73 |
74 |
75 |
78 |
79 |
80 |
83 | {{ article.favorited ? 'Unfavorite' : 'Favorite' }} Article ({{ article.favoritesCount }})
84 |
85 |
86 |
87 |
88 |
89 |
90 |
126 |
127 | 
10 |
11 | ### [Demo](https://angular-realworld.netlify.app/) [RealWorld](https://github.com/gothinkster/realworld)
12 |
13 |
14 |
15 | 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](https://angular.io/styleguide) & best practices.
16 |
17 | Additionally, there is an Angular 1.5 version of this codebase that you can [fork](https://github.com/gothinkster/angularjs-realworld-example-app) and/or [learn how to recreate](https://thinkster.io/angularjs-es6-tutorial).
18 |
19 |
20 | # How it works
21 |
22 | 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](https://thinkster.io/tutorials/building-real-world-angular-2-apps) that teaches you how to recreate the codebase from scratch.
23 |
24 | ### Making requests to the backend API
25 |
26 | For convenience, we have a live API server running at https://api.realworld.io/api for the application to make requests against. You can view [the API spec here](https://github.com/GoThinkster/productionready/blob/master/api) which contains all routes & responses for the server.
27 |
28 | The source code for the backend server (available for Node, Rails and Django) can be found in the [main RealWorld repo](https://github.com/gothinkster/realworld).
29 |
30 | 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`)
31 |
32 |
33 | # Getting started
34 |
35 | Make sure you have the [Angular CLI](https://github.com/angular/angular-cli#installation) installed globally. We use [Yarn](https://yarnpkg.com) to manage the dependencies, so we strongly recommend you to use it. you can install it from [Here](https://yarnpkg.com/en/docs/install), then run `yarn install` to resolve all dependencies (might take a minute).
36 |
37 | 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.
38 |
39 | ### Building the project
40 | 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.
41 |
42 |
43 | ## Functionality overview
44 |
45 | 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
46 |
47 | **General functionality:**
48 |
49 | - Authenticate users via JWT (login/signup pages + logout button on settings page)
50 | - CRU* users (sign up & settings page - no deleting required)
51 | - CRUD Articles
52 | - CR*D Comments on articles (no updating required)
53 | - GET and display paginated lists of articles
54 | - Favorite articles
55 | - Follow other users
56 |
57 | **The general page breakdown looks like this:**
58 |
59 | - Home page (URL: /#/ )
60 | - List of tags
61 | - List of articles pulled from either Feed, Global, or by Tag
62 | - Pagination for list of articles
63 | - Sign in/Sign up pages (URL: /#/login, /#/register )
64 | - Uses JWT (store the token in localStorage)
65 | - Authentication can be easily switched to session/cookie based
66 | - Settings page (URL: /#/settings )
67 | - Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
68 | - Article page (URL: /#/article/article-slug-here )
69 | - Delete article button (only shown to article's author)
70 | - Render markdown from server client side
71 | - Comments section at bottom of page
72 | - Delete comment button (only shown to comment's author)
73 | - Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
74 | - Show basic user info
75 | - List of articles populated from author's created articles or author's favorited articles
76 |
77 |
78 | 79 | 80 | [](https://thinkster.io) 81 | --------------------------------------------------------------------------------