rangle / angular-training-examples

Blog application for Angular 2 training
13 stars 21 forks source link

Simplify 3.0-round-brackets example code #10

Open barretodavid opened 8 years ago

barretodavid commented 8 years ago

From my perspective, when doing training we should try to keep our examples as simple as possible to not distract the students from what's really important to learn in every section.

For example, in the example of this section we have:

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

@Component({
  selector: 'app-root',
  template: `<input
    type="button"
    value="{{ label }}"
    (click)="onClick()">
    <span>{{ randomString }}</span>`,
  styles: [``]
})
export class AppComponent {
  label = 'randomize';
  randomString = randomString();
  onClick() {
      this.randomString = randomString();
  };
}

function randomString() {
  const length = (Math.floor(Math.random() * 25) + 10);
  let str = '';
  for (let i = 0; i < length; i += 1) {
      str += String.fromCharCode(Math.floor(Math.random() * 255))
  }
  return str;
}

Some people might be distracted by trying to understand how the function randomString works when the goal of this chapter is to focus on how the event system works in Angular. A simple counter might be enough to showcase events and keep people focused on what's really important. Also, calling a function from outside the class relying on hoisting is adding an additional layer of complexity from people coming from traditional OOP languages that are used to rely on methods.

I can submit a PR but I wanted to know first if you agree with me on this.

e-schultz commented 7 years ago

I agree with you, should be done if it isn't already