Today we inject services into services, refactor business logic out of components, and introduce you to Plain Old TypeScript Objects.
It’s a major tech debt paydown! And we consolidate everything you’ve learned so far!
You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.
You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.
Here’s the script so you can follow along at home:
[ ] Introduce a new tweet class
ng g class tweet
[ ] First we’ll create our tweet properties
export class Tweet {
public avatar;
constructor(public body : string, public author: string, public date: Date, public retweets: Array<string>, public favorites: Array<string>) {
this.avatar = `${author}.jpg`;
}
}
[ ] Then refactor our tweet array
tweets = [
new Tweet('Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', 'Glen', new Date(), ['Joe'], []),
new Tweet('Measuring programming progress by lines of code is like measuring aircraft building progress by weight','Joe', new Date(), [], ['Mary'] ),
new Tweet('Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', 'Mary', new Date(), ['Glen'], ['Mary']),
new Tweet('People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones', 'Glen', new Date(), ['Joe', 'Mary'], [] ),
new Tweet('You can’t have great software without a great team, and most software teams behave like dysfunctional families.', 'Joe', new Date(), [], ['Mary', 'Glen'] ),
]
[ ] Create a new feed service
ng g s feed
[ ] Then we’ll move all our logic out of our feed component and into feed service (injecting our UserService into our FeedService
private tweets = [
new Tweet('Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', 'Glen', new Date(), ['Joe'], []),
new Tweet('Measuring programming progress by lines of code is like measuring aircraft building progress by weight','Joe', new Date(), [], ['Mary'] ),
new Tweet('Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', 'Mary', new Date(), ['Glen'], ['Mary']),
new Tweet('People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones', 'Glen', new Date(), ['Joe', 'Mary'], [] ),
new Tweet('You can’t have great software without a great team, and most software teams behave like dysfunctional families.', 'Joe', new Date(), [], ['Mary', 'Glen'] ),
]
constructor(private userService : UserService) {
}
getCurrentFeed() : Array<Tweet> {
return this.tweets;
}
private isUserInCollection(collection : string[], userId : string) : boolean {
return collection.indexOf(userId) != -1;
}
postNewTweet(tweetText : string) {
this.tweets.unshift(
new Tweet(tweetText, this.userService.getCurrentUser(), new Date(), [], [])
);
}
reTweet(tweet : Tweet) {
if (!this.isUserInCollection(tweet.retweets, this.userService.getCurrentUser())) {
tweet.retweets.push(this.userService.getCurrentUser());
}
}
favoriteTweet(tweet : Tweet) {
if (!this.isUserInCollection(tweet.favorites, this.userService.getCurrentUser())) {
tweet.favorites.push(this.userService.getCurrentUser());
}
}
[ ] Let’s inject our feed service into our Feed component
import { FeedService } from '../feed.service';
import { Tweet } from '../tweet';
tweets = [];
constructor(private userService : UserService, private feedService : FeedService) { }
ngOnInit() {
this.tweets = this.feedService.getCurrentFeed();
}
[ ] Implement our logic
OnFavorite(tweet) {
this.feedService.favoriteTweet(tweet);
}
OnRetweet(tweet) {
this.feedService.reTweet(tweet);
}
OnNewTweet() {
console.log(this.tweetText);
this.feedService.postNewTweet(this.tweetText);
this.tweetText = '';
}
[ ] Update our view
liked: tweet.hasFavorited(userService.getCurrentUser())
retweeted: tweet.hasRetweeted(userService.getCurrentUser())
[ ] Enhance our Tweet class
hasFavorited(userId : string) : boolean {
return this.favorites.indexOf(userId) != -1;
}
hasRetweeted(userId : string) : boolean {
return this.retweets.indexOf(userId) != -1;
}
[ ] Run application to fan hysteria.