G'day! I'm Glen

And I’m so there!

It’s no surprise to any of my friends that I’ve doubled-down hard on Angular 2 this year. I built PuppyMail to learn all about serverless Angular apps with Firebase, taught a 21 days of Angular YouTube course, spoke at a Meetup on Angular 2 for Java Devs, and have lately been diving in hard on Ionic 2 (think of Ionic 2 as Angular 2 for Hybrid Mobile apps).

But there’s so much more to learn! I’m only scratching the surface of Observables, Forms, Unit Testing, DI scoping and lots more!

As you may know, I’m a massive fan of Hobby Projects for levelling up. I even did an eight-part YouTube Series on Shipping Your Hobby Project in 30 days. But I’m also a massive fan of osmosis in community. Of hanging out with guys and girls that are further along the road than you, and leveraging off that talent and experience.

So when I heard the legends from Thoughtram are coming to Sydney to teach their Angular 2 Masterclass I was super pumped! These guys are committers on Angular 2, Angular Material, and prolific bloggers - you’re probably read some of their (hardcore) blog posts while researching Angular 2 stuff.

This is going to be an awesome opportunity from best-in-class Angular 2 folk in our own backyard - from Jan 9-11. Can’t wait to hang out with them! (and not sure why this is the first I heard of it - but now you know too!).

If you live in AU/NZ and are keen for a Sydney trip, why not come and hang out! There are still tickets!

Where to stay?

I’m totally convinced that the best way to learn anything is through having a hobby project. I’m so convinced about that, that I created a free 8-lesson YouTube course around that topic!

Well I’ve just finished “walking the talk” of that course - a 31 day streak of moving a hobby project forward from zero to basic features complete:

Learning Goals

I developed a small Angular 2 application, with a few very simple goals:

• Learn about using Firebase for Backend Storage (essentially a serverless* application)
• Create an app I actually need. In my case, that was an app to make use of my Pocket links when generating eNewsletter (in my case the Motivated Programmer newsletter. You should sign up!)
• Build something substantial in Angular 2 and get a feel for whether I’d like it on larger apps.

So I birthed “PuppyMail” to scratch that itch.

Well PuppyMail delivered in spades on those three objectives. With the TL/DR being:

• Firebase is all kinds of awesome. Particularly when coupled with AngularFire2.
• I could deliver “Cradle to Grave” on all the basic features that I wanted in this app in 29 hours - or basically a month of hobby hacking every day.
• Angular 2 all the things! I love this framework so much.

I loved hacking on Primefaces when I was working fulltime in JSF2. In fact, the whole component-based development thing is really what attracted me to Angular 2.

But since switching, I’ve really been looking for a solid component library to get work done. I’ve been having great success with Semantic UI for styling, but nothing beats being able to bind a paginated list to an Array and getting all the strong typing!

Enter PrimeNG aka Primefaces for Angular 2! This library brings all the stunning engineering and pragmatism from Primefaces to the Angular 2 domain. And it totally rocks!

Here’s that list of my PocketEntries rendering in a PrimeNG paginated OrderList. In the words of Kanye, “Enjoy the greatness!”

And there are only a few lines of code backing all that magic.

But the $1M question is, “How do you integrate it with the Angular CLI?”

Turns out that it’s a snack…

Integrating PrimeNG with Angular CLI

I’m sure the existing setup page will cover all this at some stage. But until then, here’s the steps you’ll need to use PrimeNG with Angular CLI.

Now that I’ve established some routines around my exercise habits, I’m finding that I’m listening to a lot more podcasts. And there is some epic free content out there these days (more on that later).

A short rant about Pocket Casts awesomeness..

What I really wanted to talk about today was how much I’m enjoying Pocket Casts as a player for Android (though I used it on Windows Phone originally, and it ships for iPhone too).

Of course it has:

1. Great navigation (with multiple options - by date / by show /etc); and
2. The ability to play back at variable speed (which I love so much - everything is better at 1.5x); and
3. A sensible draggable way to manage your “up next” queue of episodes for long runs; and
4. Easily see what’s “in progress” so you can finish things up or swipe them out of there; and
5. Lots of slick UI goodness with swipe left to mark done, cool progress circles for time left, etc

But the thing I really love about it is the syncing! If you pay them just a few $ more for Web access, you can manage all your subscriptions via a browser on your PC.

Better still, because everything is synced, you can easily pick up the episode your were playing on your phone, and listen to a bit more on your PC, and everything remembers where you’re up to!

So, whatcha listening to these days?

I’m always a bit interested in what people are listening to in the Podcast department, so here are a few of my faves, in case you need some more commute/exercise background listening action…

A few days ago I started a new series on YouTube called Ship Your Hobby Project in 30 Days and I’m really enjoying it.

One of the best ways to level up as a programmer is by having a side project. It gives you a great way to learn something new by actually doing (the best way to learn) - and also gives you an internal motivation bump through the exhilaration of shipping.

And I’m all about the shipping.

A whole bunch of people have been gradually coming on board and signing up for my Motivated Programmer newsletter to keep themselves honest and moving forward. And they’ve been keeping themselves honest by sending my their one-sentence app descriptions. It’s been awesome!

I’ve found the people signing up super positive and have been joining in the fun myself. We’ve just completed the lesson 3 on Wireframing and Just Enough Planning where we used e.ggtimer.com to smash through our wireframing and module planning.

Here’s my whiteboard version for accountability:

If your GitHub repo is full of half-finished stuff, and you’re keen to jump into a community that is non-judgement, it’s totally worth hanging out with us. First step is to spend just 10 minutes a day and start working your way through Ship Your Hobby Project in 30 Days.

Can’t wait to show off what the students build next month. Super exited!

Today on the show we explore securing Angular 2 routes. And we’ll use OAuth, Firebase and Google (or your preferred OAuth provider) to get us there.

You can grab the source on the GitHub Repo.

Don’t forget to Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts

Here’s the script if you’d like to follow along at home!

[ ] Discuss the plan for today - use Google authentication to login to your app. Pluck Image URLs along the way.

[ ] Check out last weeks show to get up to speed on the QOTD app

[ ] Turn on authentication in your application (auth/signin method)

[ ] Configure your module to turn on authentication methods you prefer

export const firebaseAuthConfig = {
  provider: AuthProviders.Google,
  method: AuthMethods.Popup
}	

// and in imports...
AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),

Serverless architectures are so hot right now! Today on the show we dive into Firebase with Angular2 using the AngularFire2 library.

We’ll be a dynamic Quote of the Day application which updates from the server in real time. Get out of here! Real time!

You can grab the code for today’s episode on GitHub.

Don’t forget to Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts

Here’s the script so you can follow along at home:

[ ] Discuss the plan for today - use remote db to populate a list of quotes - with live update when server changes

[ ] Create a new app

ng new qotd

Congratulations if you’ve made it this far. Today on the show we explore doing production builds, and deploying to github pages. Then we’ll share a bunch of cool resources (down below) for the next stage in your journey!

It’s our last show in the series! But not the last show for the channel, so subscribe today!

Thanks for being so awesome!

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:

[ ] First, we’ll do a production build

ng build --prod
ng build --target=prod --env=prod

[ ] Have a look at your tiny dist directory

Angular 2 has gone final! Yay! Today we’re going to look at linting, code coverage and mocking in the latest Angular CLI (Beta 14).

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:

[ ] First, we’ll migrate everything to the latest CLI using this migration guide

[ ] Basically we spark a new project, and copy our src and e2e folders over.

[ ] Next will fix the broken, by removing module.id everywhere, moving our assets to src/assets (and fix matching links). Tests are a world of broken, too. We’ll talk about them shortly.

[ ] Let’s lint our file

ng lint

Today we’re going to look at integration testing using the bundled ng end to end testing tool called Protractor.

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:

[ ] First, we’ll run our integration test suite

ng e2e

[ ] Explore the directory e2e-spec.ts & .po.ts files

[ ] We’ll explore the role of Page objects to abstract elements and localise changes

[ ] Implement our TwitNgPage object (I would typically rename to FeedPage)

With Reactive Forms, our validation and binding are configured in the backing code rather than the markup. Today, we’ll take yesterday’s template-driven form and convert it to a reactive form, and in the process you can decide which style you like better.

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:

[ ] First, we’ll update our module list to import reactive forms

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

imports: [ BrowserModule, FormsModule, ReactiveFormsModule, routing, HttpModule,

[ ] We’ll update our template code to spark the form model

import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

form = new FormGroup({
    username : new FormControl(),
    password : new FormControl(),
    rememberme : new FormControl()
  })

[ ] Remove all our ngModel directive

Today we’re going to look at template-driven approach to forms with the wonders of ngModel. Tomorrow we’ll look at the reactive approach to forms using backing code for validation config.

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:

[ ] First, let’s generate a login form

ng g c login

[ ] And add it to our module in app.module.ts

import { LoginComponent } from './login';

declarations: [ AppComponent, FeedComponent, MenuComponent, FriendsComponent, FriendComponent, MessagesComponent, LoginComponent ],

[ ] And add it to our router in app.routes.ts

Bad things can happen when working with remote services. Today we explore error handling in an Observables context (in both the service tier and user facing components).

And we revisit our “Loading…” state to tidy things up on initial page load.

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:

[ ] First, fix our import

import { Observable } from 'rxjs/Rx';

[ ] Implement our getCurrentFeed() method to catch errors

return this.http.get('/api/tweets').map((resp: Response) => {
  console.log(resp.json());
  var fetchedTweets = [];
  for (let tweet of resp.json().data) {
    fetchedTweets.push(this.getTweetFromJson(tweet));
  }
  return fetchedTweets as Array<Tweet>;
}).catch(this.errorHandler);

It’s finally time to introduce some Http CRUD implementation! Today on the show we use yesterday mock in-memory RESTful Http service to get(), post(), and put() our way to remote data!

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:

[ ] Implement our getCurrentFeed() method

private getTweetFromJson(obj: Tweet): Tweet {
    return new Tweet(
      obj.id, obj.body, obj.author, obj.date, obj.retweets, obj.favorites)
  }

  getCurrentFeed(): Observable<Tweet[]> {

    return this.http.get('/api/tweets').map((resp: Response) => {
      console.log(resp.json());
      var fetchedTweets = [];
      for (let tweet of resp.json().data) {
        fetchedTweets.push(this.getTweetFromJson(tweet));
      }
      return fetchedTweets as Array<Tweet>;
    });

  }

[ ] Update feed.component.ts to handle the observable

this.feedService.getCurrentFeed().subscribe( (newTweets) => {
  console.log(newTweets);
    this.tweets = newTweets;
});

[ ] Demo of changing our database file.

You’ll need to test your API - and your backend might not be built yet. But no matter! The Angular 2 team have your back with an InMemoryDbService Http RESTful database.

Learn how to configure it in today’s episode (or just learn about using 3rd party JS with the Angular CLI)

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:

[ ] Install a 3rd party npm module to simulate REST (I’ve used a specific version since I know this one is compatible with Angular 2 RC5)

npm install --save angular2-in-memory-web-api@0.0.17

[ ] Update angular-cli-build.js to copy the npm over to dist

  'angular2-in-memory-web-api/*.+(js|js.map)'

It’s finally time to introduce some Http action into our app by fetching our Friends in async! Along the way we’ll learn about Observables.

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:

[ ] Fix the friend component deprecation

import { FriendComponent } from './friend';

declarations: [ AppComponent, FeedComponent, MenuComponent, FriendsComponent, FriendComponent, MessagesComponent ],

[ ] First, let’s import the Angular Http Module into app.module.ts

import { HttpModule }    from '@angular/http';

imports: [ BrowserModule, FormsModule, HttpModule, routing ],

[ ] Create a static json file in public/friends.json to simulate our server and hold our users (note the “double” quotes)

On Day 12 we turn the Angular 2 Router up to 11 by deep linking to specific friend in our friends component.

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:

[ ] First, let’s implement our Friends Component

import { FeedService } from '../feed.service';

friends = [ ];

  constructor(private feedService : FeedService) { 

  }

  ngOnInit() {
    this.friends = this.feedService.getFriends();
    console.log(this.friends);
  }

[ ] Implement our getFriends() method

getFriends() : Array<string> {

    return [ 'Mary', 'Joe', 'Karen', 'Phil', 'Toni' ];

}

[ ] Update the view

It’s time to introduce you to the Angular Router and get our menu routing to the various components in our application.

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:

[ ] Let’s create a component for friends and messages

ng g c messages
ng g c friends

[ ] Now we’ll create a routing file app.routing.ts to setup all our routes in the app

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeedComponent } from './feed';
import { FriendsComponent } from './friends';
import { MessagesComponent } from './messages';

const appRoutes: Routes = [
  { path: '',  redirectTo: '/feed',  pathMatch: 'full'},
  { path: 'feed', component: FeedComponent },
  { path: 'friends', component: FriendsComponent },
  { path: 'messages', component: MessagesComponent },
];

export const appRoutingProviders: any[] = [

];

export const routing : ModuleWithProviders = RouterModule.forRoot(appRoutes); 

[ ] Tell our module about this new routes in app.module.ts

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`;
    }

}

The technical debt has been piling up fast in our FeedComponent. It’s time to refactor that business logic out into services - and today on the show we’ll teach you how to get started.

(Spoiler: If you’ve done any Spring or Guice or Java EE6+ - this will be a piece of cake!)

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:

[ ] If you’ve used Spring or @Inject, this is all super familiar!

[ ] First we’ll create a user service

ng g s User

[ ] Note the @Injectable

It’s finally here - the day we add a tweet input element and can actually post things to our timeline.

Let’s take a moment to brag:

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:

[ ] First we’ll use the element markup

<form class="ui form">
  <div class="field">
    <label>What's on your mind?</label>
    <textarea name='body' placeholder="Penny for your thoughts" type="text"></textarea>
  </div>

  <button class="ui button primary" type="button">Tweet</button>
</form>

[ ] Then we’ll make a local variable that gives you access to the element in the template

Today on the show we investigate Angular 2 [property] syntax - and also explore the wonders of per-component styling.

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 to follow along at home:

[ ] You can hack DOM properties directly with [prop] syntax (not the quotes inside the quotes)

[style.color]='"red"'

[ ] You can also do per-component styling that won’t clash with the rest of your layout:

.like {
    color: red !important;
} 

.retweet {
    color: red !important;
}

Today we investigate the wonders of (click) events and catching them in our backing component. We’ll be tweeted and favoriting up a storm.

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 to follow along at home:

[ ] First we’re going to implement our Favorite and Retweet buttons using (click) Events

(click)='OnFavorite(tweet)'

(click)='OnRetweet(tweet)'

[ ] Implement the click handlers too

OnFavorite(tweet) {
    tweet.favorites.push('Glen');
}

OnRetweet(tweet) {
    tweet.retweets.push('Glen');
}

[ ] Stop double-adds? Be great to do it “properly” with a Tweet object method

In today’s episode, we finally implement a nice looking timeline! Along the way we learn about ngFor, ngIf, and the Date Pipe.

Here’s some cool resources to checkout from today’s show:

• That Comment Layout from Semantic UI
• Free Icons for Twitter Templates

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 cheat sheet to follow along at home…

[ ] Copy our avatars into public/avatars

[ ] First of all add an Array of Objects/Maps to timeline.component.ts to hold our tweets: