Posts

pluralsight_using_aspnetcore_build_spa

Using ASP.NET Core to Build Single Page Applications Course on Pluralsight

I’m super excited to announce my new Pluralsight course Using ASP.NET Core to Build Single Page Applications, here’s the course trailer:

Some of the major topics that we will cover include:

  • Streamlining the Dev Experience
  • Server-side Prerendering
  • Creating Efficient Production Builds
  • Continuous Integration and Deployment to Azure

By the end of this course you’ll be able to scaffold an ASP.NET Core application fronting with your favorite SPA framework, develop your app in a streamlined environment and continuously deploy it to production.

Hope you guys enjoy the course, stay curious and happy learning!

ng2_router30_upgrade

Angular 2 Upgrading to new 3.0 Router

In this episode we upgrade the ng2play repo to leverage the new 3.0 router and implement a route guard to protect components that require authentication. Here’s the entire changeset, not that bloody considering the changes but this is also a very small application.

Screencast

Defining Routes

With the old router we decorated our app component with the RouteConfig annotation to configure the routs.

  @Routes([		
    { path: '/', component: Todo },
    { path: '/about/:id', component: About },
    { path: '/profile', component: Profile}		
  ])
  export class AppComponent { ... }

With the new router the routing configuration is no longer bound to a specific component, instead we make it accessible as a provider by exporting it as a const from a separate routes.ts file. Another essential change is that we need to remove the forward slash in the beginning when defining the path.

  import { provideRouter, RouterConfig } from '@angular/router';

  export const appRoutes: RouterConfig = [
    { path: '', component: Todo },
    { path: 'about/:id', component: About },
    { path: 'profile', component: Profile }
  ];

  export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

Wich we can pass in to the bootstrap function in boot.ts instead of passing ROUTER_PROVIDERS as we did earlier.

import {APP_ROUTER_PROVIDER} from './routes';

bootstrap(AppComponent, [
  ...
  APP_ROUTER_PROVIDER,
  ...
]);

Route Parameters

A component that we route to can access information about route parameters, query parameters and URL fragments by something called, ActivatedRoute, which we can inject into the constructor. The key difference is that route parameters can be accessed through the params property as an Observable or by the snapshot property if subscribing for future changes is overkill. Here’s both ways in our about.ts component:

  import {Component, OnInit} from '@angular/core';
  import { ActivatedRoute } from '@angular/router';

  @Component({
    selector: 'about',
    template: `Welcome to the about page! This is the ID: {{id}}`
  })
  export class About implements OnInit {
    id: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
      this.id = this.route.snapshot.params['id'];
      this.route.params
        .map(params => params['id'])
          .subscribe(id => {
            this.id = id;
        });
    }
  }

Guarding routes

Previously we could prevent our components from activating for unauthenticated users by using the @CanActivate and @CanDeactivate annotations. The guarding logic could be put inside a callback function:

import {CanActivate} from '@angular/router';
@Component({ ... })
@CanActivate(() => tokenNotExpired())
export class Profile { ... }

This approach suffered from that we don’t have access to the applications dependency injection and that we need to decorate each component class with it. The new router solves these problems, we can easily create an auth-guard injectable service that we can pass in to the route configuration accordingly:

  import { provideRouter, RouterConfig } from '@angular/router';
  import { AuthGuard} from './auth-guard';

  export const appRoutes: RouterConfig = [
    { path: '', component: Todo },
    { path: 'about/:id', component: About },
    { path: 'profile', component: Profile, canActivate: [AuthGuard] }
  ];

  export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

The auth guard has access to the applications dependency injection and we can redirect the user to the root component if they are not allowed to navigate to the component.

import {tokenNotExpired} from 'angular2-jwt';
import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router
} from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (tokenNotExpired()) {
      return true;
    }

    this.router.navigate(['']);
    return false;
  }
}

Let’s also not forget that we’ll need to pass the auth-guard to our bootstrap method to be able to resolve the dependency:

import {APP_ROUTER_PROVIDER} from './routes';
import {AuthGuard} from './auth-guard';

bootstrap(AppComponent, [
  ...
  APP_ROUTER_PROVIDER,
  AuthGuard
  ...
]);

Summary

With these steps we’ve managed to migrate our application to the new 3.0 router, quite frictionless seemingly, but imho they started calling angular2 for RC way too early. It’s still moving too much to even consider using this for production anytime soon.

Until next time, have an excellent day!

pluralsight_new

First pluralsight course live

ps_course
I’m proud to announce that my first pluralsight course now is live, make sure to check it out:

Authenticating Your Angular SPA with ASP.NET Web API and Auth0

Modules

The course is split into the following three modules.

An Introduction

Course introduction with brief overview of Auth0, where we also register for a free developer account.

Building the Back-end API

In this module we create the back-end and secure it with Auth0, we also test our API by making secure calls with postman.

Building the Front-end SPA

In this module we create the front-end using AngularJS to communicate securely with our back-end. We use Auth0Lock to get a professional looking login dialog that displays well on any resolution and device.

Time spend

I must admit that it was quite cumbersome to edit the material especially since camtasia was really buggy on windows 10. I kept track of all my time and this is how I spent it.

Audition

8 hours to learn/record/edit the audition video. Check it out here if you’ve missed it!

Recording

19 hours to learn the tech I want to teach and record.

Editing

11 hours editing.

Total

38 hours for an hour of production material.

Financially worth it? (UPDATE)

Since I’m an independent consultant I can calculate if it was worth my time. UPDATE: Now after I’ve received my first royalty check and with my second course in the pipeline to be released soon, I can confidently say it was worth it. Both experience wise and financially. I also got reimbursed $200 for the new microphone, which was cool since I needed a new one for my youtube screencasts anyway.

One thing I do know though is that it’s good PR to be a pluralsight author, which could lead to higher hourly rating.

Working with pluralsight

From the initial contact with the audition to working close with my editor on the course, pluralsight was super professional. I really enjoyed the experience, and it’s definitely something I recommend and encourage others to do. Being a web developer using the aspnet stack it was quite hard to find a course that wasn’t already done though. First I wanted to do an angular 2 course, but that was off the table since it’s still in alpha and a lot of authors are standing in line on that topic. My second idea was to do something with aspnet5, but that was off the table as well since it’s in beta, soon to be RC.

One thing that bothers me though is that as I was completing my course, I saw Shawn Wildermuth do a course on aspnet5 that has gone viral. Seems like different rules apply to different authors, which isn’t cool. Other than that, I really enjoyed working with pluralsight.

In conclusion

So, 38 hours to produce a 1 hour long course, to be fair the audition process is something I only need to do once so it’s really 30 hours spend on the actual course. As I recorded the course I became better at it, I’m sure the next course I do will be quicker. I definitely encourage other developers to go through the experience of creating a course, even if I have some experience from creating screencasts on youtube this was something entirely different.

My ambition is definitely to create more courses for pluralsight, preferrably on angular 2 when it’s released.

Until next time, have an excellent day!

aurelia

Aurelia Validation

In this screencast we implement validation in our simple todo application that we created here, it’s basically the same exercise as we did in the angular 2 forms screencast, make sure to check it out if you missed it. The idea is to compare aurelia with angular2, imho aurelia is winning the race right now, let me know what you think.

Steps to get validation with Aurelia

If you’re new to aurelia, make sure you check out my first screencast on aurelia here, before you follow these steps on how to implement validation.

Install the validation plugin by executing the following command via JSPM:

jspm install aurelia-validation

 
And change the aurelia-app attribute to aurelia-app=”main”.

<body aurelia-app="main">

 
The aurelia framework will now bootstrap the application by looking for your main.js file and executing the exported configure method. Add a new main.js file with the following contents:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation'); 

  aurelia.start().then(a => a.setRoot('app', document.body)); 
}

 
Once you’ve loaded the plugin, validation is set up using the fluent validation API in the view model (borrowed from http://aurelia.io/validation/#/).

import {Validation} from 'aurelia-validation';
export class Person {
  static inject() { return [Validation];}
  constructor(validation) {
    this.firstName = 'John';
    this.validation = validation.on(this)
      .ensure('firstName')
        .isNotEmpty()
        .hasLengthBetween(3,10);
  }
}

 
With the following template:

<template>
  <form role="form" validate.bind="validation">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" value.bind="firstName" class="form-control" >
    </div>
  </form>
</template>

 

That’s it, you’re done! You don’t need to mess around with annotations and keep track of what needs to be passed as viewBindings or directives to the template as seen in angular 2 forms. Honestly, it just works!

Conclusion

For the moment Aurelia feels a lot more finished and easier to use. I was struggling with getting angular2 forms up and running and it’s poorly documented, whereas I could just follow the documentation on the aurelia validation github repo and be up and running within minutes. Let me know what you think in the comments, it’s OK to disagree! 😉

Anyways, I hope you guys enjoyed the screencast, until next time, have an excellent day!
 

Source code as always at @ https://github.com/ajtowf/ng2_overview/

pluralsight

Pluralsight Author

My last couple of screencasts, including the last blog entry was about angularjs 2.0 and aurelia. That’s because I decided to audition for producing courses for pluralsight, and guess what — I’m now an approved pluralsight author. If you don’t know what pluralsight is, here’s a definition by google (authored by themselves?):

Pluralsight is the leading online provider of tech and creative training for professionals.

The audition

To become an author for pluralsight, you need to do an audition. There’s a hard time limit on 10 minutes and you should cover a topic completely in this time, having an introduction, main part and a summary. You can obviously do some assumptions about the viewers’ prior knowledge since 10 minutes really isn’t that much of time. I did a module on bootstrapping the application with angularjs 2.0, as if it was a part of a larger course. You can see it here below, let me know what you guys think!

Time spent

I spent a day familiarizing myself with the framework and producing an example, you’d save some time if you pick a topic you already know of course. Then another day editing and revising the video, bear in mind I hadn’t used the video editing software, camtasia, before. All and all, including emailing back and forth with my acquisition editor I spent roughly two work days, 8 hours each. Was it worth it? Well, we’ll just have to wait and see, so far it hasn’t been too much work in my opinion.

I really look forward to producing a course in the next couple of months. Until next time, have a nice day!

angular2forms

AngularJS 2.0 Forms & Validation

In this screen cast I familiarized myself with angular 2 forms by extending the todo application that we created in our previous screencast, check out the screencast below and let me know what you think.

Common misstakes

I’ve seen many questions on stackoverflow where people even struggle to setup the most basic example. The angular team are lagging behind with sample code on angular.io and the typescript definition file on definitely typed is a mess.

At the time of writing the current alpha release is up to 34, the highlighted lines are essential to get right be able to use angular 2 forms.

import {Component, View, bootstrap} from 'angular2/angular2';
import {formDirectives, FormBuilder, ControlGroup, Control} from 'angular2/angular2';
import {Validators} from 'angular2/angular2';

@Component({
  selector: 'app',
  viewBindings: [FormBuilder]
})
@View({
  templateUrl: 'app.html', 
  directives: [formDirectives]
})
class AppComponent {
  constructor(fb: FormBuilder) {    
    // use the formbuilder here...
  }
}

 

  1. Don’t try to import from angular2/forms even if their documentation says so if you’re using the definition file from definitely typed, it’s all under angular2/angular2.
  2. Make sure you pass the FormBuilder to a property named viewBindings to the Component-annotation and nothing else, this keeps changing name so it’s easy to get wrong.
  3. If dependency injection to the constructor fails, you are probably doing the first point wrong.

Completing the angular.d.ts file

The angular team seems to be lazy on updating the definitely typed repo definition file. If you’re playing around with forms, you probably want to mark a field as required. To be able to do so by following some samples, you’ll need to add a static property to the Validators class in the definition file angular2.d.ts.

class Validators {
  static required: any;
}

 

Conclusion

I can’t shake the feeling that they are over complicating things, the syntax is very verbose and stuff is happening behind the scenes that always don’t seem that intuitive. The code is changing a lot from one version to another, it feels a bit premature to see all the ng-conf sessions talking about angular 2. It’s obvious that the community is frustrated (from reading blogs and stack overflow questions) over that it’s quite hard to get a simple sample up and running even though I personally don’t share that feeling.

Anyways, I hope you guys enjoyed the screencast, until next time, have a nice day as always!

 

Source code as always at @ https://github.com/ajtowf/ng2_overview/tree/ng2

angular_full_logo

AngularJS Loading Indicator / Splash screen

How do we prevent the flash of unrendered content (FOUC)? We don’t want to simply hide the unrendered content from the user since the user may think that the app is broken, especially if they’re on a slow connection. The browser will start to render elements as soon as it encounters them, we can use this to our advantage to display a full-screen block of HTML while the page is loading, i.e. a splash screen.

Full working sample can be found at http://jsfiddle.net/45EfF/.
Let’s start with the markup, I’ve added a splash div at the top of the body-tag and the css is loaded inline in the head-tag. This way, when the browser starts parsing the body-tag it will lay out the splash screen elements and style them before it starts to load any other files.

Loading

Name

{{greeting}} {{name}}

We want to make sure that the splash screen goes away after the page is loaded, we can do this using the ngCloak directive. The ngCloak directive will add a CSS class that sets a display: none !important on the element and then remove the display: none once the page has been loaded. We can hijack this ngCloak directive for the splash screen and invert the style for the splash element only.


.splash {
	display: none;
}

[ng-cloak].splash {
	display: block !important;
}
		
.splash {
  position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width:100%;	
	filter: alpha(opacity=60);
	opacity: 0.6;
	background: #000;
}

.splash h2 {
	text-align: center;
	font-size: 4em;
	color:white;			
}
Finally, I’ve manually bootstrapped angular to simulate slow loading.

 

It’s as simple as that, hope it helped, cheers!

angular_mobile_ui_logo

Mobile Angular UI with Bootstrap 3

I’ve been looking for a nice mobile UI framework that plays well together with angular for quite some time now. When I started developing golf-caddie.se jQuery Mobile was pretty much the only competent framework out there and it was quite cumbersome to get it to play nice with angular. So every now and then I try out new UI frameworks, hoping to find a replacement for jqm. By the way, did I mention that I want it to work well on WP8? Yup, proud owner of a lumia 920.

A couple of months ago I gave ionicframework a go, don’t remember the details but it was awful on WP8. Yesterday I came across an open source project, mobile-angular-ui, seemed to be exactly what I’ve been looking for.
You may wonder, why not just use bootstrap? Simple answer – because it doesn’t give the same look and feel as a native app, my web app is intended to be used on the golf course and on mobile devices only, plain bootstrap just doesn’t cut it. The user controls isn’t designed with mobile first in mind even if the layouting mechanism is.
Anyways, before I started a massive refactoring to replace jqm I put together a little “hello world”-app with a simple slide in menu and some page navigations. I’ve hosted it on http://mobile-angular-ui-test.towfeek.se/.
Really simple stuff, a sidebar and two partials. Seemed to work fine until I added an animation when navigating between pages. Boom, page doesn’t render! Ok that’s fine, not a deal breaker, who needs animations anyways? I just reported a bug and went on with it.
The ultimate test – how does it look on my WP8?
  • Page renders a bit slow, I can see the default title before the partial updates it.
  • Slide menu actually slides in, sweet!
  • Navigation works fine without animations.
  • Page only renders the content that fits the screen initially, scrolling doesn’t work. Deal breaker!

angular_mobile_ui

The project is still in an early stage, and it definitely gots potential. I’ll try to contribute to the project if time allows but I wont refactor golf-caddie to use it just yet.
 
Cheers!