Skip to content

Commit 2751311

Browse files
Eric SimonsEric Simons
Eric Simons
authored and
Eric Simons
committed
init
0 parents  commit 2751311

File tree

94 files changed

+2769
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+2769
-0
lines changed

‎.editorconfig

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Editor configuration, see http://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
end_of_line = lf
9+
insert_final_newline = true
10+
trim_trailing_whitespace = true
11+
12+
[*.md]
13+
max_line_length = 0
14+
trim_trailing_whitespace = false

‎.gitignore

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
7+
# dependencies
8+
/node_modules
9+
/bower_components
10+
11+
# IDEs and editors
12+
/.idea
13+
.project
14+
.classpath
15+
*.launch
16+
.settings/
17+
18+
# misc
19+
/.sass-cache
20+
/connect.lock
21+
/coverage/*
22+
/libpeerconnection.log
23+
npm-debug.log
24+
testem.log
25+
/typings
26+
27+
# e2e
28+
/e2e/*.js
29+
/e2e/*.map
30+
31+
#System Files
32+
.DS_Store
33+
Thumbs.db

‎README.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# ![Angular 2 Example App](logo.png)
2+
3+
> Example Angular 2 codebase that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.
4+
5+
### [Demo](https://angular2.realworld.io)    [RealWorld](https://github.com/gothinkster/realworld)
6+
7+
This codebase was created to demonstrate a fully fledged application built with Angular 2 that interacts with an actual backend server including CRUD operations, authentication, routing, pagination, and more. It adheres to the [RealWorld](https://github.com/gothinkster/realworld) frontend specifications and communicates with a [backend API](https://github.com/gothinkster/realworld/blob/master/API.md) for CRUD operations.
8+
9+
**The codebase is now feature complete and the RFC is open. Your input is greatly appreciated; please submit bug fixes via pull requests & feedback via issues.**
10+
11+
We're currently working on some docs for the codebase (explaining where functionality is located, how it works, etc). We also have a **[live workshop we're holding on October 22nd](https://thinkster.io/announcements/angular-2-workshop)** where we'll break the codebase down, explain how everything works, and do a Q&A session. Additionally, an upcoming step-by-step tutorial is being written for [Thinkster.io](https://thinkster.io/) that will cover recreating the codebase from scatch (watch this repo to stay updated!)
12+
13+
## Getting started
14+
15+
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.
16+
17+
### Building the project
18+
19+
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.
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.md) 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 [RealWorld repo](https://github.com/gothinkster/realworld).
24+
25+
## Functionality overview
26+
27+
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
28+
29+
**General functionality:**
30+
31+
- Authenticate users via JWT (login/signup pages + logout button on settings page)
32+
- CRU* users (sign up & settings page - no deleting required)
33+
- CRUD Articles
34+
- CR*D Comments on articles (no updating required)
35+
- GET and display paginated lists of articles
36+
- Favorite articles
37+
- Follow other users
38+
39+
**The general page breakdown looks like this:**
40+
41+
- Home page (URL: /#/ )
42+
- List of tags
43+
- List of articles pulled from either Feed, Global, or by Tag
44+
- Pagination for list of articles
45+
- Sign in/Sign up pages (URL: /#/login, /#/register )
46+
- Uses JWT (store the token in localStorage)
47+
- Authentication can be easily switched to session/cookie based
48+
- Settings page (URL: /#/settings )
49+
- Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here )
50+
- Article page (URL: /#/article/article-slug-here )
51+
- Delete article button (only shown to article's author)
52+
- Render markdown from server client side
53+
- Comments section at bottom of page
54+
- Delete comment button (only shown to comment's author)
55+
- Profile page (URL: /#/profile/:username, /#/profile/:username/favorites )
56+
- Show basic user info
57+
- List of articles populated from author's created articles or author's favorited articles

‎angular-cli.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"project": {
3+
"version": "1.0.0-beta.15",
4+
"name": "ang2-conduit"
5+
},
6+
"apps": [
7+
{
8+
"root": "src",
9+
"outDir": "dist",
10+
"assets": "assets",
11+
"index": "index.html",
12+
"main": "main.ts",
13+
"test": "test.ts",
14+
"tsconfig": "tsconfig.json",
15+
"prefix": "app",
16+
"mobile": false,
17+
"styles": [
18+
"styles.css"
19+
],
20+
"scripts": [],
21+
"environments": {
22+
"source": "environments/environment.ts",
23+
"dev": "environments/environment.ts",
24+
"prod": "environments/environment.prod.ts"
25+
}
26+
}
27+
],
28+
"addons": [],
29+
"packages": [],
30+
"e2e": {
31+
"protractor": {
32+
"config": "./protractor.conf.js"
33+
}
34+
},
35+
"test": {
36+
"karma": {
37+
"config": "./karma.conf.js"
38+
}
39+
},
40+
"defaults": {
41+
"styleExt": "css",
42+
"prefixInterfaces": false
43+
}
44+
}

‎karma.conf.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/0.13/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', 'angular-cli'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-remap-istanbul'),
12+
require('angular-cli/plugins/karma')
13+
],
14+
files: [
15+
{ pattern: './src/test.ts', watched: false }
16+
],
17+
preprocessors: {
18+
'./src/test.ts': ['angular-cli']
19+
},
20+
remapIstanbulReporter: {
21+
reports: {
22+
html: 'coverage',
23+
lcovonly: './coverage/coverage.lcov'
24+
}
25+
},
26+
angularCli: {
27+
config: './angular-cli.json',
28+
environment: 'dev'
29+
},
30+
reporters: ['progress', 'karma-remap-istanbul'],
31+
port: 9876,
32+
colors: true,
33+
logLevel: config.LOG_INFO,
34+
autoWatch: true,
35+
browsers: ['Chrome'],
36+
singleRun: false
37+
});
38+
};

‎logo.png

54.5 KB
Loading

‎package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "ang2-conduit",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"angular-cli": {},
6+
"scripts": {
7+
"start": "ng serve",
8+
"lint": "tslint \"src/**/*.ts\"",
9+
"test": "ng test",
10+
"pree2e": "webdriver-manager update",
11+
"e2e": "protractor"
12+
},
13+
"private": true,
14+
"dependencies": {
15+
"@angular/common": "2.0.0",
16+
"@angular/compiler": "2.0.0",
17+
"@angular/core": "2.0.0",
18+
"@angular/forms": "2.0.0",
19+
"@angular/http": "2.0.0",
20+
"@angular/platform-browser": "2.0.0",
21+
"@angular/platform-browser-dynamic": "2.0.0",
22+
"@angular/router": "3.0.0",
23+
"core-js": "^2.4.1",
24+
"marked": "^0.3.6",
25+
"rxjs": "5.0.0-beta.12",
26+
"ts-helpers": "^1.1.1",
27+
"zone.js": "^0.6.23"
28+
},
29+
"devDependencies": {
30+
"@types/jasmine": "^2.2.30",
31+
"@types/marked": "0.0.28",
32+
"angular-cli": "1.0.0-beta.15",
33+
"codelyzer": "~0.0.26",
34+
"jasmine-core": "2.4.1",
35+
"jasmine-spec-reporter": "2.5.0",
36+
"karma": "1.2.0",
37+
"karma-chrome-launcher": "^2.0.0",
38+
"karma-cli": "^1.0.1",
39+
"karma-jasmine": "^1.0.2",
40+
"karma-remap-istanbul": "^0.2.1",
41+
"protractor": "4.0.5",
42+
"ts-node": "1.2.1",
43+
"tslint": "3.13.0",
44+
"typescript": "2.0.2"
45+
}
46+
}

‎protractor.conf.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Protractor configuration file, see link for more information
2+
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
3+
4+
/*global jasmine */
5+
var SpecReporter = require('jasmine-spec-reporter');
6+
7+
exports.config = {
8+
allScriptsTimeout: 11000,
9+
specs: [
10+
'./e2e/**/*.e2e-spec.ts'
11+
],
12+
capabilities: {
13+
'browserName': 'chrome'
14+
},
15+
directConnect: true,
16+
baseUrl: 'http://localhost:4200/',
17+
framework: 'jasmine',
18+
jasmineNodeOpts: {
19+
showColors: true,
20+
defaultTimeoutInterval: 30000,
21+
print: function() {}
22+
},
23+
useAllAngular2AppRoots: true,
24+
beforeLaunch: function() {
25+
require('ts-node').register({
26+
project: 'e2e'
27+
});
28+
},
29+
onPrepare: function() {
30+
jasmine.getEnv().addReporter(new SpecReporter());
31+
}
32+
};

‎src/app/app.component.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<layout-header></layout-header>
2+
3+
<router-outlet></router-outlet>
4+
5+
<layout-footer></layout-footer>

‎src/app/app.component.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
import { UserService } from './shared';
4+
5+
@Component({
6+
selector: 'app-root',
7+
templateUrl: './app.component.html'
8+
})
9+
export class AppComponent implements OnInit {
10+
constructor (
11+
private userService: UserService
12+
) {}
13+
14+
ngOnInit() {
15+
this.userService.populate();
16+
}
17+
}

‎src/app/app.module.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { ModuleWithProviders, NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { RouterModule } from '@angular/router';
4+
5+
import { AppComponent } from './app.component';
6+
import { ArticleModule } from './article/article.module';
7+
import { AuthModule } from './auth/auth.module';
8+
import { EditorModule } from './editor/editor.module';
9+
import { HomeModule } from './home/home.module';
10+
import { ProfileModule } from './profile/profile.module';
11+
import { SettingsModule } from './settings/settings.module';
12+
import {
13+
ApiService,
14+
ArticlesService,
15+
AuthGuard,
16+
CommentsService,
17+
FooterComponent,
18+
HeaderComponent,
19+
JwtService,
20+
ProfilesService,
21+
SharedModule,
22+
TagsService,
23+
UserService
24+
} from './shared';
25+
26+
const rootRouting: ModuleWithProviders = RouterModule.forRoot([], { useHash: true });
27+
28+
@NgModule({
29+
declarations: [
30+
AppComponent,
31+
FooterComponent,
32+
HeaderComponent
33+
],
34+
imports: [
35+
BrowserModule,
36+
ArticleModule,
37+
AuthModule,
38+
EditorModule,
39+
HomeModule,
40+
ProfileModule,
41+
rootRouting,
42+
SharedModule,
43+
SettingsModule
44+
],
45+
providers: [
46+
ApiService,
47+
ArticlesService,
48+
AuthGuard,
49+
CommentsService,
50+
JwtService,
51+
ProfilesService,
52+
TagsService,
53+
UserService
54+
],
55+
bootstrap: [AppComponent]
56+
})
57+
export class AppModule {}

‎src/app/article/article-comment.component.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="card">
2+
<div class="card-block">
3+
<p class="card-text">
4+
{{ comment.body }}
5+
</p>
6+
</div>
7+
<div class="card-footer">
8+
<a class="comment-author" [routerLink]="['/profile', comment.author.username]">
9+
<img [src]="comment.author.image" class="comment-author-img" />
10+
</a>
11+
&nbsp;
12+
<a class="comment-author" [routerLink]="['/profile', comment.author.username]">
13+
{{ comment.author.username }}
14+
</a>
15+
<span class="date-posted">
16+
{{ comment.createdAt | date: 'longDate' }}
17+
</span>
18+
<span class="mod-options" [hidden]="!canModify">
19+
<i class="ion-trash-a" (click)="deleteClicked()"></i>
20+
</span>
21+
</div>
22+
</div>

0 commit comments

Comments
 (0)