I recently took a class on Angular 2+ at Code School.
I then rebuilt my homepage using Angular 4.
I would greatly appreciate if any developer experienced with Angular 2+ can check out my code on git and offer constructive feedback.
This site features loading content from JSON services into dynamic templates, unit tests, and advanced CSS.
Full code here: https://github.com/garyv/garyv
Projects page here: http://garyvonschilling.com/work
<!-- projects.component.html -->
<div class='big-margin-bottom'>
<h3>Technology used:</h3>
<ul class='tags row'>
<li *ngFor="let tag of projectTags.tags"
class="col tag" [class.active]="projectTags.isActive(tag)"
(click)="toggleTag(tag)">
{{tag}}
<i [class.fa]="true"
[class.fa-check]="projectTags.isActive(tag)"
[class.fa-minus-circle]="!projectTags.isActive(tag)"></i>
</li>
</ul>
</div>
<div class='row' [class.fade-in]="!skipFade">
<div *ngIf="!projectTags.activeProjects.length">
<h4>
Click a tag above to see projects
<i class='fa fa-level-up'></i>
</h4>
</div>
<div *ngFor="let project of projectTags.activeProjects"
class='col project grid-4 half big-margin-bottom medium-padding'
[class.active]="project.active" [class.hidden]="!project.active">
<h4>
<a [routerLink]="[project.friendlyId]">{{project.title}}</a>
</h4>
<a *ngIf="project.image?.src" [routerLink]="[project.friendlyId]">
<img alt=''
[src]="project.image.src"
[srcset]="project.image.srcset"
sizes="(min-width: 37.5em) 30vw, 48vw" />
</a>
<div class='tags'>
Tags:
<span [innerHTML]="projectTags.activeProjectTags(project)"></span>
</div>
</div>
</div>
// projects.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Project } from './project/project.model';
import { ProjectTags } from './project-tags.model';
import { ProjectsService } from './projects.service';
import { StateService } from '../state/state.service';
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {
projects: Project[];
projectTags: ProjectTags;
@Input() skipFade: boolean;
constructor(private projectsService: ProjectsService) { }
ngOnInit() {
this.projectTags = new ProjectTags();
this.projectsService.getProjects()
.subscribe( (projects) => {
this.projects = projects;
this.projectTags.populateTags(projects);
});
}
toggleTag(tag) {
this.projectTags.toggleTag(tag, this.projects);
}
}
// projects.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { ProjectsComponent } from './projects.component';
import { Project } from './project/project.model';
import { ProjectComponent } from './project/project.component';
import { ProjectTags } from './project-tags.model';
import { ProjectsService } from './projects.service';
import { StateService } from '../state/state.service';
import { Router, RouterModule } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
describe('ProjectsComponent', () => {
let component: ProjectsComponent;
let fixture: ComponentFixture<ProjectsComponent>;
let debugElement: DebugElement;
let projectsService: ProjectsService;
let mockProjects: Project[] = [
{
friendlyId: 'example-title',
image: {
src: 'https://www.fillmurray.com/400/300/',
},
link: {
address: '//example.com',
text: 'example text'
},
text: '<p>This is an example project.</p>',
title: 'Example Title',
tags: ['Example Tag', 'Same']
},
{
friendlyId: 'lorem-ipsum-title',
image: {
src: 'https://www.fillmurray.com/400/300/g',
},
link: {
address: '//lorempixel.com',
text: 'lorem ipsum'
},
text: '<p>Lorem ipsum dolor sit amet.</p>',
title: 'Lorem Ipsum Title',
tags: ['Lorem', 'Same']
}
];
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterModule,
HttpModule,
RouterTestingModule.withRoutes(
[{path: 'work/:friendly-id', component: ProjectComponent}]
)
],
declarations: [
ProjectsComponent,
ProjectComponent
],
providers: [
ProjectsService,
StateService
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectsComponent);
component = fixture.componentInstance;
debugElement = fixture.debugElement;
projectsService = fixture.debugElement.injector.get(ProjectsService);
spyOn(projectsService, 'getProjects')
.and.returnValue(Observable.of(mockProjects));
StateService.set('tags', '["Same"]');
fixture.detectChanges();
});
it('should be created', () => {
expect(component).toBeTruthy();
});
it('should list tags', () => {
let tagsElement = debugElement.query(By.css('.tags li'));
expect(tagsElement.nativeElement.textContent).toContain('Example Tag');
});
it('should list projects', () => {
let projectElements = debugElement.query(By.css('.project'));
expect(projectElements.nativeElement.textContent).toContain('Example Title');
});
it('should link to individual project page', () => {
let projectLink = debugElement.query(By.css('a[href$=example-title]'));
expect(projectLink).toBeTruthy();
});
it('should hide inactive projects', () => {
component.projectTags.activeProjects.splice(0, 1);
fixture.detectChanges();
let projectElements = debugElement.query(By.css('.project'));
expect(projectElements.nativeElement.textContent).toContain('Lorem Ipsum');
});
});
// projects.service.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Project } from './project/project.model';
@Injectable()
export class ProjectsService {
constructor(private http:Http) {}
getProjects() {
return this.http.get('app/projects/projects.json')
.map( (response) => {
let projects = <Project[]>response.json().projects;
for (let project of projects) {
if (project.title && !project.friendlyId) {
project.friendlyId = ProjectsService.getFriendlyId(project.title);
}
}
return projects;
});
}
static getFriendlyId(title: string): string {
return title.toLowerCase()
.replace(/\W+/g, '-')
.replace(/^-|-$/g, '');
}
}
// projects.service.spec.ts
import { TestBed, async, inject } from '@angular/core/testing';
import {
HttpModule,
Http,
Response,
ResponseOptions,
XHRBackend
} from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { ProjectsService } from './projects.service';
import { Project } from './project/project.model';
describe('ProjectsService', () => {
let projectsService: ProjectsService;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [
ProjectsService,
{ provide: XHRBackend, useClass: MockBackend }
]
});
});
describe('getProjects()', () => {
it('should return an Observable<Project[]>',
inject([ProjectsService, XHRBackend], (projectsService, mockBackend) => {
const mockResponse = {
projects: [
{
//friendlyId: 'example-title',
image: {
src: 'https://www.fillmurray.com/400/300/',
},
link: {
address: '//example.com',
text: 'example text'
},
text: '<p>This is an example project.</p>',
title: 'Example Title',
tags: ['Example Tag', 'Same']
},
{
//friendlyId: 'lorem-ipsum',
image: {
src: 'http://lorempixel.com/400/300/',
},
link: {
address: '//lipsum.com',
text: 'lorem ipsum'
},
text: '<p>Lorem ipsum dolor sit amet.</p>',
title: 'Lorem Ipsum',
tags: ['Lorem', 'Same']
}
]
};
mockBackend.connections.subscribe( (connection) => {
let response = new ResponseOptions({body: JSON.stringify(mockResponse)});
connection.mockRespond(new Response(response));
});
projectsService.getProjects().subscribe( (projects) => {
expect(projects.length).toEqual(2);
expect(projects[0].title).toEqual('Example Title');
expect(projects[1].title).toEqual('Lorem Ipsum');
expect(projects[1].friendlyId).toEqual('lorem-ipsum');
expect(projects[1].image).toEqual({src: 'http://lorempixel.com/400/300/'});
expect(projects[1].link).toEqual({address: '//lipsum.com', text: 'lorem ipsum'});
expect(projects[1].text).toEqual('<p>Lorem ipsum dolor sit amet.</p>');
expect(projects[1].tags).toEqual(['Lorem', 'Same']);
});
})
);
describe('getFriendlyId()', () => {
it('should make titles url friendly', () => {
let friendlyId = ProjectsService.getFriendlyId(" ¿ HellO World #👋🌎 !! ");
expect(friendlyId).toEqual('hello-world');
});
});
});
});
// projects-tags.model.ts
import { Input, OnInit } from '@angular/core';
import { Project } from './project/project.model';
import { StateService } from '../state/state.service';
const defaultTags:string[] = ['JavaScript', 'Ruby on Rails'];
const storageKey:string = 'tags';
export class ProjectTags {
tags: string[] = [];
activeTags: string[] = [];
activeProjects: Project[] = [];
@Input() highlightTag: string;
constructor() {
this.activeTags = JSON.parse(StateService.get(storageKey));
if (!this.activeTags || !this.activeTags.length) {
this.activeTags = defaultTags;
}
}
isActive(tag:string):boolean {
return this.activeTags.indexOf(tag) != -1;
}
populateTags(projects:Project[]):void {
this.activeProjects = [];
for (let project of projects) {
project.active = false;
for (let tag of project.tags) {
if (this.tags.indexOf(tag) == -1) {
this.tags.push(tag);
}
if (!project.active && this.activeTags.indexOf(tag) != -1) {
project.active = true;
}
}
if (project.active) {
this.activeProjects.push(project);
}
}
this.tags = this.tags.sort();
StateService.set(storageKey, JSON.stringify(this.activeTags));
}
toggleTag(tag:string, projects:Project[]):void {
let index = this.activeTags.indexOf(tag);
if (index == -1) {
this.highlightTag = tag;
this.activeTags.push(tag);
} else {
this.highlightTag = null;
this.activeTags.splice(index, 1);
}
this.populateTags(projects);
}
activeProjectTags(project:Project):string {
let tags:string[] = [];
for (let tag of project.tags) {
if (this.isActive(tag)) {
if (tag == this.highlightTag) {
tags.push(`<span class='highlight'>${tag}</span>`);
} else {
tags.push(`<span>${tag}</span>`);
}
}
}
return tags.join(', ');
}
}
