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!
Posts
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!
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
Aurelia VS AngularJS 2.0
Angular
I spend a couple of hours familiarizing myself with angular 2 for a pluralsight audition which resulted in the following screencast.
Aurelia
I then got an interesting comment that aurelia is the client side app framework to use. I try to be agnostic about the frameworks, libs and the tools that I use, so spent a couple of hours familiarizing myself with aurelia as well which resulted in the following screencast where I port the angular app in a matter of minutes.
Conclussions
Angular is at the time I’m writing this post in alpha and it’s changing a lot, which is really frustrating since something always seems to be broken and documentation/examples are inaccurate even on their own site. It’s hard to keep track of if it’s *for, *ngfor, *ng-for or something completely different from one build to the other.
I like that web components are the mainstay and it unifies react.js, angular.js and polymer. One big thumbs up to that $scope is gone, but also a big thumbs down for that two-way data-bindings is gone. Kind of a deal breaker for me. Angular has teamed up with the typescript team and they are pushing it which definitely is a good thing but not angular specific ergo no credit for that.
Learning curve was about the same for both frameworks, both are using the ES6 module loading system and depending on runtime transpilation to ES5 for now. What tips the scale towards Aurelia for me is that it’s cleaner, supports two-way data-bindings and that it’s all about conventions over configuration/code. That’s my opinion after a first look at both frameworks, watch the screencasts and judge for yourself.
As I mentioned I try to stay agnostic about the frameworks, libs and tools that I use, but I’ll definitely give aurelia a try for my next web project and try to forget that there is an IDE named VS Code out there. *BOOM* ;-)
EDIT: About 2-way data binding
It’s ridiculous how many emails I’ve received about this, but really, there is no 2-way data binding in angular 2. Do not confuse the square-bracket-parenthesis-syntax [(ng-model)] with two-way bindings — it one-way binds to the property with square brackets and listens for events with parenthesis. They obviously realized that typing
is cumbersome so they introduced a new directive called ng-model
So now you have very angular specific code in your view templates instead of just two-way binding to the DOM property. I refactor the code to bind to the checked property from this screencast in the beginning of next one here.
I like angular
Don’t get me wrong, I like angular and I will use angular 2, but I don’t mindlessly love everything they do like some fan boy. Stay open minded people and don’t be afraid to express your opinion, it’s just yet another framework. You don’t need to love everything the angular team produces.
By the way, make sure to check out my latest screencast on angular 2 forms!
Until next time, have a nice day!
Source code as always at @ https://github.com/ajtowf
Links: aurelia.io angular.io
Keywords : Visual Studio Code, HTML5, JavaScript, AngularJS 2.0, Aurelia, TypeScript
