2 |
4 | Features
3 |Using the cutting-edge technology stack.
5 |
6 |
16 |
--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { HomeComponent } from './home.component';
5 |
6 | describe('Component: Home', () => {
7 | it('should create an instance', () => {
8 | let component = new HomeComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | class Skill {
4 | name: string;
5 | description: string;
6 | url: string;
7 | }
8 |
9 | @Component({
10 | selector: 'app-home',
11 | templateUrl: './home.component.html',
12 | styleUrls: ['./home.component.css']
13 | })
14 | export class HomeComponent implements OnInit {
15 | private skills: Skill[];
16 |
17 | constructor() { }
18 |
19 | ngOnInit() {
20 | this.skills = [
21 | {
22 | name: 'Angular 2',
23 | description: 'Web component based MVVM framework.',
24 | url: 'http://angular.io'
25 | },
26 | {
27 | name: 'Typescript',
28 | description: 'Typescript is a typed superset of JavaScript that compiles to plain JavaScript.',
29 | url: 'https://www.typescriptlang.org/'
30 | },
31 | {
32 | name: 'RxJS',
33 | description: 'Reactive programming for JavaScript',
34 | url: 'http://reactivex.io/rxjs/'
35 | },
36 | {
37 | name: 'Angular CLI',
38 | description: 'Official command line tooling for Angular 2',
39 | url: 'https://github.com/angular/angular-cli'
40 | },
41 | {
42 | name: 'Webpack',
43 | description: 'The only build pack you should have.',
44 | url: 'https://webpack.github.io/'
45 | },
46 | {
47 | name: 'Bootstrap',
48 | description: 'The most popular frontend CSS framework.',
49 | url: 'https://getbootstrap.org/'
50 | },
51 | ];
52 | }
53 |
54 | }
55 |
--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { HomeRoutingModule } from './home-routing.module';
4 | import { HomeComponent } from './home.component';
5 |
6 | @NgModule({
7 | imports: [
8 | CommonModule,
9 | HomeRoutingModule
10 | ],
11 | declarations: [HomeComponent]
12 | })
13 | export class HomeModule { }
14 |
--------------------------------------------------------------------------------
/src/app/index.ts:
--------------------------------------------------------------------------------
1 | export * from './app.component';
2 | export * from './app.module';
3 |
--------------------------------------------------------------------------------
/src/app/layout/footer.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/layout/footer.component.css
--------------------------------------------------------------------------------
/src/app/layout/footer.component.html:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/src/app/layout/footer.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { FooterComponent } from './footer.component';
5 |
6 | describe('Component: Footer', () => {
7 | it('should create an instance', () => {
8 | let component = new FooterComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/layout/footer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { TranslateService } from '@ngx-translate/core';
3 |
4 | @Component({
5 | selector: 'app-footer',
6 | templateUrl: './footer.component.html',
7 | styleUrls: ['./footer.component.css']
8 | })
9 | export class FooterComponent implements OnInit {
10 |
11 | constructor(private translate: TranslateService) { }
12 |
13 | ngOnInit() {
14 | }
15 |
16 | setLanguage(lang: string) {
17 | this.translate.use(lang);
18 | }
19 |
20 | isLanguage(lang: string): boolean {
21 | return this.translate.currentLang === lang;
22 | }
23 |
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/layout/layout.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule } from '../shared/shared.module';
3 | import { NavbarComponent } from './navbar.component';
4 | import { FooterComponent } from './footer.component';
5 |
6 | @NgModule({
7 | imports: [
8 | SharedModule
9 | ],
10 | declarations: [
11 | NavbarComponent,
12 | FooterComponent,
13 | ],
14 | exports: [
15 | NavbarComponent,
16 | FooterComponent,
17 | ]
18 | })
19 | export class LayoutModule { }
20 |
--------------------------------------------------------------------------------
/src/app/layout/navbar.component.css:
--------------------------------------------------------------------------------
1 | nav {
2 | background-color: #e3f2fd;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/layout/navbar.component.html:
--------------------------------------------------------------------------------
1 |
2 |
45 |
--------------------------------------------------------------------------------
/src/app/layout/navbar.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { RouterModule } from '@angular/router';
5 | import { NavbarComponent } from './navbar.component';
6 |
7 | xdescribe('Component: Navbar', () => {
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({
10 | imports: [RouterModule],
11 | declarations: [
12 | NavbarComponent,
13 | ],
14 | });
15 | });
16 |
17 | it('should create the Navbar component', async(() => {
18 | let fixture = TestBed.createComponent(NavbarComponent);
19 | let component = fixture.debugElement.componentInstance;
20 | expect(component).toBeTruthy();
21 | }));
22 |
23 | });
24 |
--------------------------------------------------------------------------------
/src/app/layout/navbar.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | import { AuthService } from '../core/auth.service';
4 |
5 | @Component({
6 | selector: 'app-navbar',
7 | templateUrl: './navbar.component.html',
8 | styleUrls: ['./navbar.component.css']
9 | })
10 | export class NavbarComponent implements OnInit {
11 | constructor(private authService: AuthService) {
12 | }
13 |
14 | ngOnInit() {
15 | }
16 |
17 | logout() {
18 | console.log('calling onLogout...');
19 | this.authService.logout();
20 | }
21 |
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/posts/edit-post/edit-post.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/edit-post/edit-post.component.css
--------------------------------------------------------------------------------
/src/app/posts/edit-post/edit-post.component.html:
--------------------------------------------------------------------------------
1 |
7 |
15 |
8 |
13 |
14 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/posts/edit-post/edit-post.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { EditPostComponent } from './edit-post.component';
5 |
6 | describe('Component: EditPost', () => {
7 | it('should create an instance', () => {
8 | let component = new EditPostComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/posts/edit-post/edit-post.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { Router, ActivatedRoute } from '@angular/router';
3 | import { Subscription } from 'rxjs/Subscription';
4 | import { Post } from '../shared/post.model';
5 | import { PostService } from '../shared/post.service';
6 |
7 | @Component({
8 | selector: 'app-edit-post',
9 | templateUrl: './edit-post.component.html',
10 | styleUrls: ['./edit-post.component.css']
11 | })
12 | export class EditPostComponent implements OnInit, OnDestroy {
13 | post: Post = { title: '', content: '' };
14 | sub: Subscription;
15 | id: number;
16 |
17 | constructor(private postService: PostService, private router: Router, private route: ActivatedRoute) { }
18 |
19 | onPostUpdated(event) {
20 | console.log('post was updated!' + event);
21 | if (event) {
22 | this.router.navigate(['', 'posts']);
23 | }
24 | }
25 |
26 | ngOnInit() {
27 | this.sub = this.route.params
28 | .flatMap(params => {
29 | this.id = +params['id'];
30 | return this.postService.getPost(this.id);
31 | })
32 | .subscribe((res: Post) => this.post = res);
33 | }
34 |
35 | ngOnDestroy() {
36 | if (this.sub) {
37 | this.sub.unsubscribe();
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/posts/home/home.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/home/home.component.css
--------------------------------------------------------------------------------
/src/app/posts/home/home.component.html:
--------------------------------------------------------------------------------
1 |
3 |
7 | {{'edit-post'}}
4 |created at: {{post.createdAt| date:'short'}} • {{post.createdBy}}
5 |all fields marked with star are required.
6 |
8 |
10 |
13 |
2 |
23 |
24 |
3 |
22 |
4 |
21 |
5 |
14 |
15 |
16 |
17 | new-post
18 |
19 |
20 |
25 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/src/app/posts/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { PostsComponent } from './posts.component';
5 |
6 | xdescribe('Component: Posts', () => {
7 | xit('should create an instance', () => {
8 | let component = new PostsComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/posts/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { FormControl } from '@angular/forms';
3 | import { Post } from '../shared/post.model';
4 | import { PostService } from '../shared/post.service';
5 | import { Subscription } from 'rxjs/Subscription';
6 |
7 | @Component({
8 | selector: 'app-posts-home',
9 | templateUrl: './home.component.html',
10 | styleUrls: ['./home.component.css']
11 | })
12 | export class PostsHomeComponent implements OnInit, OnDestroy {
13 | q = '';
14 | posts: Post[];
15 | sub: Subscription;
16 |
17 | constructor(private postService: PostService) {
18 | }
19 |
20 |
21 | //
27 | // search(term: string) {
28 | // this.sub = this.postService.getPosts({ q: term }).subscribe(
29 | // res => this.posts = res
30 | // );
31 | // }
32 |
33 | search() {
34 | this.sub = this.postService.getPosts({ q: this.q }).subscribe(
35 | res => this.posts = res
36 | );
37 | }
38 |
39 | // clearTerm() {
40 | // this.q.setValue(null);
41 | // }
42 |
43 | ngOnInit() {
44 | this.search();
45 | // this.posts = [
46 | // {
47 | // id: 1,
48 | // title: 'Getting started with REST',
49 | // content: 'Content of Getting started with REST',
50 | // createdAt: '9/22/16 4:15 PM'
51 | // },
52 | // {
53 | // id: 2,
54 | // title: 'Getting started with AngularJS 1.x',
55 | // content: 'Content of Getting started with AngularJS 1.x',
56 | // createdAt: '9/22/16 4:15 PM'
57 | // },
58 | // {
59 | // id: 3,
60 | // title: 'Getting started with Angular2',
61 | // content: 'Content of Getting started with Angular2',
62 | // createdAt: '9/22/16 4:15 PM'
63 | // },
64 | // ];
65 | }
66 |
67 | ngOnDestroy() {
68 | if (this.sub) {
69 | this.sub.unsubscribe();
70 | }
71 | }
72 |
73 | }
74 |
--------------------------------------------------------------------------------
/src/app/posts/new-post/new-post.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/new-post/new-post.component.css
--------------------------------------------------------------------------------
/src/app/posts/new-post/new-post.component.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/posts/new-post/new-post.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { NewPostComponent } from './new-post.component';
5 |
6 | describe('Component: NewPost', () => {
7 | it('should create an instance', () => {
8 | let component = new NewPostComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/posts/new-post/new-post.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { Router } from '@angular/router';
3 | import { Subscription } from 'rxjs/Subscription';
4 | import { Post } from '../shared/post.model';
5 | import { PostService } from '../shared/post.service';
6 |
7 | @Component({
8 | selector: 'app-new-post',
9 | templateUrl: './new-post.component.html',
10 | styleUrls: ['./new-post.component.css']
11 | })
12 | export class NewPostComponent implements OnInit, OnDestroy {
13 | post: Post = { title: '', content: '' };
14 | sub: Subscription;
15 |
16 | constructor( private router: Router) { }
17 |
18 | onPostSaved(event) {
19 | console.log('post was saved!' + event);
20 | if (event) {
21 | this.router.navigate(['', 'posts']);
22 | }
23 | }
24 |
25 | ngOnInit() {
26 | }
27 |
28 | ngOnDestroy() {
29 | }
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-form.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/post-details/comment/comment-form.component.css
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-form.component.html:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-form.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { CommentFormComponent } from './comment-form.component';
5 |
6 | xdescribe('Component: CommentForm', () => {
7 | it('should create an instance', () => {
8 | let component = new CommentFormComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-form.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2 | import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
3 |
4 | import { Comment } from '../../shared/comment.model';
5 | import { Post } from '../../shared/post.model';
6 | import { PostService } from '../../shared/post.service';
7 |
8 | @Component({
9 | selector: 'app-comment-form',
10 | templateUrl: './comment-form.component.html',
11 | styleUrls: ['./comment-form.component.css']
12 | })
13 | export class CommentFormComponent implements OnInit {
14 | @Input() post: Post;
15 | @Output() onSaved = new EventEmitter();
16 |
17 | commentForm: FormGroup;
18 | content: FormControl;
19 |
20 | constructor(private postService: PostService, private fb: FormBuilder) {
21 | this.content = new FormControl('', [Validators.required, Validators.minLength(10)]);
22 | this.commentForm = fb.group({
23 | content: this.content
24 | });
25 | }
26 |
27 | ngOnInit() {
28 |
29 | }
30 |
31 | saveCommentForm() {
32 | console.log('submitting comment form @' + this.commentForm.value);
33 |
34 | this.postService.saveComment(this.post.id, this.commentForm.value)
35 | .subscribe((data) => {
36 | this.commentForm.controls['content'].setValue('');
37 | this.commentForm.markAsPristine();
38 | this.commentForm.markAsUntouched();
39 | this.onSaved.emit(true);
40 | }, (error) => {
41 | this.onSaved.emit(false);
42 | });
43 | }
44 |
45 | }
46 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list-item.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/post-details/comment/comment-list-item.component.css
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list-item.component.html:
--------------------------------------------------------------------------------
1 |
3 |
6 | {{'new-post'}}
4 |all fields marked with star are required.
5 |
7 |
9 |
12 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list-item.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { CommentListItemComponent } from './comment-list-item.component';
5 |
6 | describe('Component: CommentListItem', () => {
7 | it('should create an instance', () => {
8 | let component = new CommentListItemComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list-item.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 |
3 | import { Comment } from '../../shared/comment.model';
4 |
5 | @Component({
6 | selector: 'app-comment-list-item',
7 | templateUrl: './comment-list-item.component.html',
8 | styleUrls: ['./comment-list-item.component.css']
9 | })
10 | export class CommentListItemComponent implements OnInit {
11 |
12 | @Input() comment: Comment;
13 |
14 | constructor() { }
15 |
16 | ngOnInit() {
17 | }
18 |
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/post-details/comment/comment-list.component.css
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 | 
5 |
6 |
7 |
8 |
11 | {{comment.createdBy}} • {{comment.createdAt|date:'short'}}
9 | 10 |
2 |
4 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { CommentListComponent } from './comment-list.component';
5 |
6 | describe('Component: CommentList', () => {
7 | it('should create an instance', () => {
8 | let component = new CommentListComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnChanges, Input } from '@angular/core';
2 |
3 | import { Post } from '../../shared/post.model';
4 | import { Comment } from '../../shared/comment.model';
5 |
6 |
7 | @Component({
8 | selector: 'app-comment-list',
9 | templateUrl: './comment-list.component.html',
10 | styleUrls: ['./comment-list.component.css']
11 | })
12 | export class CommentListComponent implements OnInit, OnChanges {
13 |
14 | @Input() post: Post;
15 | @Input() comments: Comment[];
16 |
17 | constructor() { }
18 |
19 | ngOnInit() {
20 | console.log('calling ngOnInit::CommentListComponent...');
21 | }
22 |
23 | ngOnChanges(changes: any) {
24 | console.log('calling ngChanges::CommentListComponent...' + JSON.stringify(changes));
25 | //if (changes['comments'].previousValue != changes['comments'].currentValue) {
26 | // this.comments = changes['comments'].currentValue;
27 | //}
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-panel.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/post-details/comment/comment-panel.component.css
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-panel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/comment/comment-panel.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CommentPanelComponent } from './comment-panel.component';
4 |
5 | describe('CommentPanelComponent', () => {
6 | let component: CommentPanelComponent;
7 | let fixture: ComponentFixture
2 |
17 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/post-details-panel/post-details-panel.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { PostDetailsCardComponent } from './post-details-card.component';
5 |
6 | describe('Component: PostDetailsCard', () => {
7 | it('should create an instance', () => {
8 | let component = new PostDetailsCardComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/post-details-panel/post-details-panel.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnChanges, Input, SimpleChange } from '@angular/core';
2 |
3 | import { Post } from '../../shared/post.model';
4 |
5 | @Component({
6 | selector: 'app-post-details-panel',
7 | templateUrl: './post-details-panel.component.html',
8 | styleUrls: ['./post-details-panel.component.css']
9 | })
10 | export class PostDetailsPanelComponent implements OnInit, OnChanges {
11 |
12 | @Input() post: Post;
13 |
14 | constructor() { }
15 |
16 | ngOnInit() {
17 | }
18 |
19 | ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
20 |
21 | // if (changes && changes['post'] && changes['post'].currentValue) {
22 | // this.post = Object.assign({}, changes['post'].currentValue);
23 | // }
24 | // for (let propName in changes) {
25 | // let chng = changes[propName];
26 | // let cur = JSON.stringify(chng.currentValue);
27 | // let prev = JSON.stringify(chng.previousValue);
28 |
29 | // console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
30 | // }
31 | }
32 |
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/posts/post-details/post-details.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/posts/post-details/post-details.component.css
--------------------------------------------------------------------------------
/src/app/posts/post-details/post-details.component.html:
--------------------------------------------------------------------------------
1 |
3 |
8 | 4 | {{post.title}} 5 |
6 |{{post.createdAt|date:'short'}}
7 |
9 |
13 |
16 | 10 | {{post.content}} 11 |
12 |world'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /src/app/shared/nl2br.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'nl2br' 5 | }) 6 | export class Nl2brPipe implements PipeTransform { 7 | 8 | transform(value: any, args?: any): any { 9 | 10 | if (value !== void 0) { 11 | return value.replace(/\n/g, '
'); 12 | } 13 | return value; 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | import { RouterModule } from '@angular/router'; 5 | //import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 6 | import { TranslateModule} from '@ngx-translate/core'; 7 | import { ShowAuthedDirective } from './show-authed.directive'; 8 | 9 | import { Nl2brPipe } from './nl2br.pipe'; 10 | import { EmailValidatorDirective } from './email-validator.directive'; 11 | 12 | 13 | @NgModule({ 14 | imports: [ 15 | CommonModule, 16 | RouterModule, 17 | FormsModule, 18 | ReactiveFormsModule, 19 | //3rd party modules 20 | //NgbModule, 21 | TranslateModule 22 | ], 23 | declarations: [ 24 | ShowAuthedDirective, 25 | Nl2brPipe, 26 | EmailValidatorDirective 27 | ], 28 | exports: [ 29 | CommonModule, 30 | RouterModule, 31 | FormsModule, 32 | ReactiveFormsModule, 33 | //NgbModule, 34 | ShowAuthedDirective, 35 | Nl2brPipe, 36 | EmailValidatorDirective, 37 | TranslateModule 38 | ], 39 | }) 40 | export class SharedModule { } 41 | -------------------------------------------------------------------------------- /src/app/shared/show-authed.directive.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { ShowAuthedDirective } from './show-authed.directive'; 5 | 6 | describe('Directive: ShowAuthed', () => { 7 | it('should create an instance', () => { 8 | let directive = new ShowAuthedDirective(); 9 | expect(directive).toBeTruthy(); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/app/shared/show-authed.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input, Renderer, HostBinding, Attribute, OnInit, OnDestroy } from '@angular/core'; 2 | import { Subscription } from 'rxjs/Subscription'; 3 | import { AuthService } from '../core/auth.service'; 4 | 5 | @Directive({ 6 | selector: '[appShowAuthed]' 7 | }) 8 | export class ShowAuthedDirective implements OnInit, OnDestroy { 9 | 10 | @Input() appShowAuthed: boolean; 11 | sub: Subscription; 12 | 13 | constructor(private authService: AuthService, private el: ElementRef, private renderer: Renderer) { 14 | console.log('[appShowAuthed] value:' + this.appShowAuthed); 15 | } 16 | 17 | ngOnInit() { 18 | console.log('[appShowAuthed] ngOnInit:'); 19 | this.sub = this.authService.currentUser().subscribe((res) => { 20 | if (res) { 21 | if (this.appShowAuthed) { 22 | this.renderer.setElementStyle(this.el.nativeElement, 'display', 'inherit'); 23 | } else { 24 | this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none'); 25 | } 26 | 27 | } else { 28 | if (this.appShowAuthed) { 29 | this.renderer.setElementStyle(this.el.nativeElement, 'display', 'none'); 30 | } else { 31 | this.renderer.setElementStyle(this.el.nativeElement, 'display', 'inherit'); 32 | } 33 | } 34 | }); 35 | } 36 | 37 | ngOnDestroy() { 38 | console.log('[appShowAuthed] ngOnDestroy:'); 39 | if (this.sub) { this.sub.unsubscribe(); } 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/app/signin/signin-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { SigninComponent } from './signin.component'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: SigninComponent } 7 | ]; 8 | 9 | @NgModule({ 10 | imports: [RouterModule.forChild(routes)], 11 | exports: [RouterModule], 12 | providers: [] 13 | }) 14 | export class SigninRoutingModule { } 15 | -------------------------------------------------------------------------------- /src/app/signin/signin.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/signin/signin.component.css -------------------------------------------------------------------------------- /src/app/signin/signin.component.html: -------------------------------------------------------------------------------- 1 |
2 |
34 |
--------------------------------------------------------------------------------
/src/app/signin/signin.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { SigninComponent } from './signin.component';
5 |
6 | describe('Component: Signin', () => {
7 | it('should create an instance', () => {
8 | let component = new SigninComponent();
9 | expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/signin/signin.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, OnDestroy } from '@angular/core';
2 | import { Subscription } from 'rxjs/Subscription';
3 |
4 | import { AuthService } from '../core/auth.service';
5 |
6 | @Component({
7 | selector: 'app-signin',
8 | templateUrl: './signin.component.html',
9 | styleUrls: ['./signin.component.css']
10 | })
11 | export class SigninComponent implements OnInit, OnDestroy {
12 |
13 | data = {
14 | username: '',
15 | password: ''
16 | };
17 |
18 | sub: Subscription;
19 |
20 | constructor(private authServcie: AuthService) { }
21 |
22 | ngOnInit() { }
23 |
24 | submit() {
25 | console.log('signin with credentials:' + this.data);
26 | this
27 | .authServcie
28 | .attempAuth('signin', this.data);
29 |
30 | }
31 |
32 | ngOnDestroy() {
33 | //if (this.sub) { this.sub.unsubscribe(); }
34 | }
35 |
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/signin/signin.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule } from '../shared/shared.module';
3 | import { SigninRoutingModule } from './signin-routing.module';
4 | import { SigninComponent } from './signin.component';
5 |
6 | @NgModule({
7 | imports: [
8 | SharedModule,
9 | SigninRoutingModule
10 | ],
11 | declarations: [SigninComponent]
12 | })
13 | export class SigninModule { }
14 |
--------------------------------------------------------------------------------
/src/app/signup/signup-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { SignupComponent } from './signup.component';
5 |
6 | const routes: Routes = [
7 | { path: '', component: SignupComponent }
8 | ];
9 |
10 | @NgModule({
11 | imports: [RouterModule.forChild(routes)],
12 | exports: [RouterModule],
13 | providers: []
14 | })
15 | export class SignupRoutingModule { }
16 |
--------------------------------------------------------------------------------
/src/app/signup/signup.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/app/signup/signup.component.css
--------------------------------------------------------------------------------
/src/app/signup/signup.component.html:
--------------------------------------------------------------------------------
1 |
3 |
33 |
4 |
32 |
5 |
7 | {{'signin' }}
6 |
8 |
27 |
28 |
31 |
2 |
88 |
--------------------------------------------------------------------------------
/src/app/signup/signup.component.spec.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-unused-variable */
2 |
3 | import { TestBed, async } from '@angular/core/testing';
4 | import { SignupComponent } from './signup.component';
5 |
6 | xdescribe('Component: Signup', () => {
7 | xit('should create an instance', () => {
8 | // let component = new SignupComponent();
9 | // expect(component).toBeTruthy();
10 | });
11 | });
12 |
--------------------------------------------------------------------------------
/src/app/signup/signup.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
3 | import { AuthService } from '../core/auth.service';
4 |
5 | @Component({
6 | selector: 'app-signup',
7 | templateUrl: './signup.component.html',
8 | styleUrls: ['./signup.component.css']
9 | })
10 | export class SignupComponent implements OnInit {
11 |
12 | signupForm: FormGroup;
13 | firstName: FormControl;
14 | lastName: FormControl;
15 | email: FormControl;
16 | username: FormControl;
17 | password: FormControl;
18 | passwordConfirm: FormControl;
19 | passwordGroup: FormGroup;
20 |
21 | /*
22 | * const form = new FormGroup({
23 | * password: new FormControl('', Validators.minLength(2)),
24 | * passwordConfirm: new FormControl('', Validators.minLength(2)),
25 | * }, passwordMatchValidator);
26 | *
27 | *
28 | * function passwordMatchValidator(g: FormGroup) {
29 | * return g.get('password').value === g.get('passwordConfirm').value
30 | * ? null : {'mismatch': true};
31 | * }
32 | */
33 | // data = { username: '', password: '', firstName: '', lastName: '' };
34 |
35 | constructor(private authService: AuthService, private fb: FormBuilder) {
36 | this.firstName = new FormControl('', [Validators.required]);
37 | this.lastName = new FormControl('', [Validators.required]);
38 | this.email = new FormControl('', [Validators.required]);
39 | this.username = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]);
40 | this.password = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]);
41 | this.passwordConfirm = new FormControl('', [Validators.required, Validators.minLength(6), Validators.maxLength(20)]);
42 |
43 | this.passwordGroup = fb.group(
44 | {
45 | password: this.password,
46 | passwordConfirm: this.passwordConfirm
47 | },
48 | { validator: this.passwordMatchValidator }
49 | );
50 |
51 | this.signupForm = fb.group({
52 | firstName: this.firstName,
53 | lastName: this.lastName,
54 | email: this.email,
55 | username: this.username,
56 | passwordGroup: this.passwordGroup
57 | });
58 | }
59 |
60 | passwordMatchValidator(g: FormGroup) {
61 | return g.get('password').value === g.get('passwordConfirm').value
62 | ? null : { 'mismatch': true };
63 | }
64 |
65 | // validateEmail(c: FormControl) {
66 | // let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
67 |
68 | // return EMAIL_REGEXP.test(c.value) ? null : {
69 | // validateEmail: {
70 | // valid: false
71 | // }
72 | // };
73 | // }
74 |
75 | ngOnInit() {
76 | }
77 |
78 | submit() {
79 | console.log('saving signup form data@' + this.signupForm.value);
80 | let value = this.signupForm.value;
81 | let data = {
82 | firstName: value.firstName,
83 | lastName: value.lastName,
84 | username: value.username,
85 | password: value.passwordGroup.password
86 | };
87 | this.authService.attempAuth('signup', data);
88 | }
89 |
90 | }
91 |
--------------------------------------------------------------------------------
/src/app/signup/signup.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { SharedModule } from '../shared/shared.module';
3 | import { SignupRoutingModule } from './signup-routing.module';
4 | import { SignupComponent } from './signup.component';
5 |
6 | @NgModule({
7 | imports: [
8 | SharedModule,
9 | SignupRoutingModule
10 | ],
11 | declarations: [SignupComponent]
12 | })
13 | export class SignupModule { }
14 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/.npmignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/assets/.npmignore
--------------------------------------------------------------------------------
/src/assets/i18n/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "posts": "Posts",
3 | "new-post": "New Post",
4 | "welcome-back":"Welcome back,{{name}}"
5 | }
6 |
--------------------------------------------------------------------------------
/src/assets/i18n/zh.json:
--------------------------------------------------------------------------------
1 | {
2 | "posts": "博文",
3 | "new-post": "新建博文",
4 | "welcome-back":"欢迎回来,{{name}}"
5 | }
6 |
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hantsy/angular2-sample/2db972a8a875e2aef0fd6ea160934f073d69d6a5/src/favicon.ico
--------------------------------------------------------------------------------
/src/forms.css:
--------------------------------------------------------------------------------
1 | .ng-valid[required], .ng-valid.required {
2 | border-left: 5px solid #42A948;
3 | /* green */
4 | }
5 |
6 | .ng-invalid:not(form){
7 | border-left: 5px solid #a94442;
8 | /* red */
9 | }
10 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
3 |
87 |
4 |
86 |
5 |
7 | {{ 'signup' }}
6 |
8 |
81 |
82 |
85 |