Angular 2 Token Based Authentication with Auth0
Two part series where I implement token based authentication using Auth0 in 20 minutes, enjoy!
Part I: Signup, Login and Logout
Part II: ExpressJS backend
Stay tuned for more screencasts, cheers!
Cookie vs Token Based Authentication with Angular2 using ASP.NET 5
I recently produces a series of tutorials on how to piggy back on aspnet5’s cookie based authentication in an angular2 application. If you’d like to learn more about how aspnet5 and angular2 can be used together, make sure to check out the full series here.
Part 1: Up and running with ASP.NET 5 Identity
Part 2: Cookie Based Auth with ASP.NET 5 and Angular 2
Part 3: Discussion
Hope you enjoy the videos and make sure to subscribe if you do, cheers!
Get Started with VS2015, AspNet 5 RC1, Angular 2 alpha 47
In this screencast we setup a dev environment for VS2015 Update 1, TypeScript 1.7.4 and Angular 2 alpha 47 starting from an empty aspnet5 project template. The plan is to evolve this example to include cookie based authentication with aspnet identity and fetch data securely from a webapi controller. Code available at github.
Let me know what you think, hope you like the video and make sure to subscribe if you do, cheers!
Introduction to ASP.NET 5 (Part I) – Frameworks, DNVM, DNX and DNU
This is the first part of an introduction to ASP.NET 5 series. We start easy by taking a look at the different runtime versions and the dnvm, dnx and dnu commands. Plan to release a new part/lesson every week, check out the entire playlist here.
Cheers!
Authenticating Your Angular SPA with ASP.NET Web API and Auth0
My first pluralsight course is live, make sure to check it out and give it a thumbs up if you like the course!
http://www.pluralsight.com/courses/authenticating-angular-spa-aspnet-webapi-auth0
Curious about the authoring experience? Read about it here!
Cheers!
ASP.NET vNext – DNX, DNU and DNVM
There seems to be some confusion about abbreviations used with aspnet5 (vNext), let’s try to sort them out and give a brief explanation.
- DNX is a SDK and a runtime environment for creating .NET applications for Windows, Mac and Linux. Basically it allows the cross-platform development using the .NET 5 Core.
- DNU is the .NET Development Utility. It allows you to build, package and publish projects created with DNX.
- DNVM is the .NET Version Manager. It is basically a set of command line instructions which allow you to configure your .NET Runtime.
The official docs of ASP.NET 5 is a great resource, here’s a link: http://docs.asp.net/en/latest/getting-started/index.html.
Cheers!
Build automation for Angular 2 and TypeScript with Gulp
In this screencast we focus on creating a smooth workflow, we’ll build, run code analysis and serve the code, all with gulp. We also learn how to keep the browser in sync with the code. Let me know what you guys think.
Source code @ https://github.com/ajtowf/ng2_play/
Setup npm and gulp
Start off by installing gulp globally and then run npm init to create a packages.json file. Then install the gulp modules we’ll use locally.
npm install -g gulp npm init // answer the questions, default values are OK npm install gulp gulp-typescript gulp-sourcemaps gulp-tslint --save-dev npm install browser-sync superstatic --save-dev // for serving the app
Create the following files in the root directory: gulpfile.js, gulp.config.js and tslint.json
Serve the application
Now that we have everything setup, we’ll get our code analyzed, compiled, served and updated as we save changes to our files just by typing:
gulp
Pretty neat, right? I hope you guys enjoyed the screencast, until next time, have an excellent day!
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 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!
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...
}
}
- 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.
- 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.
- 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
