Angular 2 Markdown Previewer

Code Feedback
1

So I decided to go through the front end projects and completely redo them using Angular 2.0. Long story short, I got really discouraged and tired of React, mainly due to the large number of libraries I had to use to get the functionality I wanted. Too many individual parts to learn and too many incompatibilities with the different versions.

Angular 2.0 on the other hand is an all-in-one bundle and is very opinionated, which I see as a good thing as it was designed by people who know what they are doing (Google). Maybe React is better for experienced devs, but a beginner/intermediate level user like me shouldn’t be trusted with making choices with no knowledge of best practice/convention. Anyway </rant> and on to the project.

I recreated the previewer and added some extra functionality, mainly the quick format buttons and the ability to upload/download .md files. Please take a look at it here and view the code here.

I’m really looking for some Angular 2.0 users to critique my code if possible. These projects are my first step in revamping my portfolio for job searches, so I want to make sure the code looks good.

Thanks in advance!

2

@P1xt @matty22 I just remembered you both use Angular 2. If you all don’t mind taking a look, I would appreciate it!

4

Awesome, thank you! I did make a few changes, like moving the file writing to the service and fixing phone styling. And yes, I am very guilty of not testing. I should take advantage of it since angular-cli sets it up so nicely, and I know it’s important, but it just seems so boring :slight_smile:

Anyway, thanks for looking at it for me!

6

I built my MD Previewer in Angular 2. I wouldn’t declare myself good enough with A2 to critique anyone else’s work just yet.

One thing that jumps out to me is that in your @Component decorator in app.component.ts you have this providers array:

providers: [ MarkdownService ]

You could import that service into app.module.ts and include it in the providers array there to clean up your app.component.ts decorator a little bit.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MarkdownInputComponent } from './markdown-input/markdown-input.component';
import { MarkdownOutputComponent } from './markdown-output/markdown-output.component';
import { FormatButtonComponent } from './format-button/format-button.component';
//Add MarkdownService import here
import { MarkdownService } from './markdown.service';

@NgModule({
  declarations: [
    AppComponent,
    MarkdownInputComponent,
    MarkdownOutputComponent,
    FormatButtonComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  //Add MarkdownService provider here
  providers: [MarkdownService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

import { MarkdownService } from './markdown.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  //Remove this providers array and the preceding comma
  //providers: [ MarkdownService ]
})

export class AppComponent {
  raw = '';

  constructor(private markdownService: MarkdownService) { }

  handleInput(value: string): void {
    this.raw = value;
  }

  parseRaw(): string {
    return this.markdownService.safeParse(this.raw);
  }
}

I believe that is the desired way to deal with providers now though when I first started working with A2, the module system didn’t exist yet. So I originally learned to deal with providers as you originally have it. It works either way, so this is just semantics, but I do think importing services into app.module.ts and including them in the providers array there is the preferred method now.

**Shhh…I also haven’t bothered writing any tests yet. Don’t tell P1xt.

7

Your secret is safe with me!

I wasn’t sure where to put it. I thought maybe since the only one to use it was the input component, just put it there, but you’re probably right that it should be in the module. That way if I have another component that needs it, it’s available.

Thanks for the suggestion!