43 |
44 |
45 |
46 |
52 |
53 |
54 |
2 |
46 |
--------------------------------------------------------------------------------
/src/app/profile/profile.component.html:
--------------------------------------------------------------------------------
1 |
3 |
45 |
4 |
5 |
42 |
43 |
44 |
2 |
3 |
59 |
--------------------------------------------------------------------------------
/src/app/shared/buttons/follow-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 | import { Router } from '@angular/router';
3 |
4 | import { Profile } from '../models';
5 | import { ProfilesService, UserService } from '../services';
6 |
7 | @Component({
8 | selector: 'app-follow-button',
9 | templateUrl: './follow-button.component.html'
10 | })
11 | export class FollowButtonComponent {
12 | constructor(
13 | private profilesService: ProfilesService,
14 | private router: Router,
15 | private userService: UserService
16 | ) {}
17 |
18 | @Input() profile: Profile;
19 | @Output() toggle = new EventEmitter
4 |
26 |
27 |
5 |
25 |
6 |
7 |
24 |
8 | ![]()
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/home/home.component.html:
--------------------------------------------------------------------------------
1 |
3 |
59 |
4 |
58 |
5 |
6 |
57 |
2 |
3 |
9 |
10 |
66 |
--------------------------------------------------------------------------------
/src/app/shared/layout/header.component.html:
--------------------------------------------------------------------------------
1 |
76 |
--------------------------------------------------------------------------------
/src/app/settings/settings.component.html:
--------------------------------------------------------------------------------
1 |
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 } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
3 | import { ActivatedRoute, Router } from '@angular/router';
4 |
5 | import { Article, ArticlesService } from '../shared';
6 |
7 | @Component({
8 | selector: 'app-editor-page',
9 | templateUrl: './editor.component.html'
10 | })
11 | export class EditorComponent implements OnInit {
12 | article: Article = {} as Article;
13 | articleForm: FormGroup;
14 | tagField = new FormControl();
15 | errors: Object = {};
16 | isSubmitting = false;
17 |
18 | constructor(
19 | private articlesService: ArticlesService,
20 | private route: ActivatedRoute,
21 | private router: Router,
22 | private fb: FormBuilder
23 | ) {
24 | // use the FormBuilder to create a form group
25 | this.articleForm = this.fb.group({
26 | title: '',
27 | description: '',
28 | body: '',
29 | });
30 | // Optional: subscribe to value changes on the form
31 | // this.articleForm.valueChanges.subscribe(value => this.updateArticle(value));
32 | }
33 |
34 | ngOnInit() {
35 | // If there's an article prefetched, load it
36 | this.route.data.subscribe(
37 | (data: {article: Article}) => {
38 | if (data.article) {
39 | this.article = data.article;
40 | this.articleForm.patchValue(data.article);
41 | }
42 | }
43 | );
44 | }
45 |
46 | addTag() {
47 | // retrieve tag control
48 | const tag = this.tagField.value;
49 | // only add tag if it does not exist yet
50 | if (this.article.tagList.indexOf(tag) < 0) {
51 | this.article.tagList.push(tag);
52 | }
53 | // clear the input
54 | this.tagField.reset('');
55 | }
56 |
57 | removeTag(tagName: string) {
58 | this.article.tagList = this.article.tagList.filter((tag) => tag !== tagName);
59 | }
60 |
61 | submitForm() {
62 | this.isSubmitting = true;
63 |
64 | // update the model
65 | this.updateArticle(this.articleForm.value);
66 |
67 | // post the changes
68 | this.articlesService
69 | .save(this.article)
70 | .subscribe(
71 | article => this.router.navigateByUrl('/article/' + article.slug),
72 | err => {
73 | this.errors = err;
74 | this.isSubmitting = false;
75 | }
76 | );
77 | }
78 |
79 | updateArticle(values: Object) {
80 | Object.assign(this.article, values);
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | import 'core-js/es6/symbol';
23 | import 'core-js/es6/object';
24 | import 'core-js/es6/function';
25 | import 'core-js/es6/parse-int';
26 | import 'core-js/es6/parse-float';
27 | import 'core-js/es6/number';
28 | import 'core-js/es6/math';
29 | import 'core-js/es6/string';
30 | import 'core-js/es6/date';
31 | import 'core-js/es6/array';
32 | import 'core-js/es6/regexp';
33 | import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 |
43 | /** Evergreen browsers require these. **/
44 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
45 | import 'core-js/es7/reflect';
46 |
47 | /**
48 | * Required to support Web Animations `@angular/platform-browser/animations`.
49 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
50 | **/
51 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by default for Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 | /***************************************************************************************************
59 | * APPLICATION IMPORTS
60 | */
61 |
--------------------------------------------------------------------------------
/src/app/shared/services/user.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import { Observable } from 'rxjs/Observable';
4 | import { BehaviorSubject } from 'rxjs/BehaviorSubject';
5 | import { ReplaySubject } from 'rxjs/ReplaySubject';
6 |
7 | import { ApiService } from './api.service';
8 | import { JwtService } from './jwt.service';
9 | import { User } from '../models';
10 | import { distinctUntilChanged, map } from 'rxjs/operators';
11 |
12 |
13 | @Injectable()
14 | export class UserService {
15 | 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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 
2 |
3 | > ### Angular 5 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.
4 |
5 |
6 |
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 | 
7 |
8 | ### [Demo](https://angular2.realworld.io) [RealWorld](https://github.com/gothinkster/realworld)
9 |
10 |
11 |
12 | 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.
13 |
14 | 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).
15 |
16 |
17 | # How it works
18 |
19 | 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.
20 |
21 | ### Making requests to the backend API
22 |
23 | 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](https://github.com/GoThinkster/productionready/blob/master/api) which contains all routes & responses for the server.
24 |
25 | 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).
26 |
27 | 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`)
28 |
29 |
30 | # Getting started
31 |
32 | Make sure you have the [Angular CLI](https://github.com/angular/angular-cli#installation) installed globally, then run `npm install` to resolve all dependencies (might take a minute).
33 |
34 | 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.
35 |
36 | ### Building the project
37 | 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.
38 |
39 |
40 | ## Functionality overview
41 |
42 | 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://angular2.realworld.io
43 |
44 | **General functionality:**
45 |
46 | - Authenticate users via JWT (login/signup pages + logout button on settings page)
47 | - CRU* users (sign up & settings page - no deleting required)
48 | - CRUD Articles
49 | - CR*D Comments on articles (no updating required)
50 | - GET and display paginated lists of articles
51 | - Favorite articles
52 | - Follow other users
53 |
54 | **The general page breakdown looks like this:**
55 |
56 | - Home page (URL: /#/ )
57 | - List of tags
58 | - List of articles pulled from either Feed, Global, or by Tag
59 | - Pagination for list of articles
60 | - Sign in/Sign up pages (URL: /#/login, /#/register )
61 | - Uses JWT (store the token in localStorage)
62 | - Authentication can be easily switched to session/cookie based
63 | - Settings page (URL: /#/settings )
64 | - Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
65 | - Article page (URL: /#/article/article-slug-here )
66 | - Delete article button (only shown to article's author)
67 | - Render markdown from server client side
68 | - Comments section at bottom of page
69 | - Delete comment button (only shown to comment's author)
70 | - Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
71 | - Show basic user info
72 | - List of articles populated from author's created articles or author's favorited articles
73 |
74 |
75 | 76 | 77 | [](https://thinkster.io) 78 | --------------------------------------------------------------------------------