pluralsight_angular_material

Angular Material Course on Pluralsight

I’m super excited to announce my new Pluralsight course Angular Material, here’s the course trailer:

Some of the major topics that we will cover include:

  • Concepts of material design
  • Setting up the development environment
  • Using the components and services
  • Data tables

This course will teach you everything from setting up a streamlined development environment
to building a production ready, great looking responsive website leveraging Material Design.

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

ng2_aspnet

Consuming SignalR for AspNet Core from Angular

SignalR for AspNetCore is announced, read all about it here, in this screencast we take a first look at how to wire it up together with Angular.

Until next time, have an excellent day!

node

JavaScript’s Async / Await Compared to Promises with NodeJS

In this screencast we compare the traditional way of writing non-blocking calls in JavaScript, promises, with the new async and await keywords. Let me know your thoughts on the topic!

Until next time, have an excellent day!

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!

aspnetcore_odata

OData with AspNet Core

In this screencast we build an OData enabled backend using AspNet Core and connect it to Kendo UI for Angular 2‘s Grid Component in only 20 minutes. If you missed the first screencast in this two-part seriers, make sure to check it out here!

Until next time, have an excellent day and a super 2017!

ng2kendo

Choosing and Evaluating a UI library for Angular 2

In this screencast we evaluate if Kendo UI for Angular 2, more specifically if the Grid Component, fulfills the requirements to deliver a solution for a client.

Happy holidays and until next time, have an excellent day!

ng2rel

Angular 2.0.2 released – Guide on how to scaffold an app with Material2 using Angular CLI in minutes

Angular 2 is finally released and the tooling around it is maturing as well. In this screencast we use Angular CLI to scaffold an application from scratch, add routing to it and bootstrap material2 and finally steal the design from Jeremys sample app repo who’s on the material2 team. After recording this screencast I went ahead and upgraded the ng2play repo to the fully released version av angular2 (changelog 2.0.2).

Screencast

ng2 play @ github

As mentioned I decided to migrate the repo off screen since it would just be too messy and hard to follow along otherwise. For me it was actually easier to throw in my “old” components and services in a newly created application since a lot had changed, especially when moving to webpack.

Since we got inspired by Jeremys sample app we got two new themes in this screencast.

Light Theme

ng2light

Dark Theme

ng2dark

Material 2 Components Demo

I also decided to keep the material 2 components demo as a separate component in the app.
ng2material2

Sass Support

Since we’re using webpack now it’s super easy to compile sass files, all we needed to do was to add a line to angular-cli.json and restart the watch:

{
  "project": { ... },
  "apps": [
    {
      ...
      "styles": [
        "styles.css",
        "app-theme.scss"
      ],
      ...
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": { ... },
  "test": { ... },
  "defaults": { ...}
}

Conclussion

Tooling is coming along really great with angular2 and in the screencast I scaffold an app according to best practices literally in matter of minutes, and the material2 team is producing some beautiful and well made components. Even though it’s nice to say that angular 2 is finally here it will be exciting to see what future versions of angular will bring us. They’ve just recently announced the versioning and releasing strategy for angular and may I say it’s pretty interesting.

Hope you’ve enjoyed the screencast, and as always have an excellent day!

aspnetcore_nodeservices

AspNet Core NodeServices – Execute JavaScript on the Server at Runtime

Screencast on how to execute javascript from AspNet Core on the backend, inspired by Steve Sanderson NDC Sydney talk. Thumbnail trying to illustrate how my mind gets blown by the possibilities! 😉

Screencast

Awesome work by the AspNet team, until next time, have an excellent day!

ng2rc5ngmodules

Angular 2 RC 5 NgModules

Angular Modules, also known as NgModules, are the powerful new way to organize and bootstrap your Angular application. In this screencast we upgrade the ng2play repo to the latest release candidate (RC5).

Screencast

Links

Here are the links related to the screencast.

Migration Steps

We basically follow the migration steps in the guide, which are:

  1. Update to RC5: We do this by simply bumping the versions in packages.json and running npm install.
  2. Create an NgModule: Create a root NgModule in app.module.ts that we use to bootstrap our application.
  3. Update your bootstrap: Updated main.ts to bootstrap our module instead of our root component.
  4. Update your 3rd party libraries: We load up the Forms, Material, Router and Http module in our main app module.
  5. Cleanup: Clean up the code by getting rid of repetitive boiler plate code in our Component annotations.

Revisiting Forms

A couple of months ago I did a rant on forms in angular, and finally they are starting to adress some of the issues. For instance it wasn’t possible to reset a form and its validation in earlier versions, which now is possible. We can simply call a reset method on either a form group or a single control.

Conclusion

Modules is definitely something that we needed to be able to get rid of a lot of boiler plate code in our components. Even if my opinion is that it’s a bit late to introduce this in between two release candidates the end result weighs up for it. I’ll try to do a separate screen on lazy loading modules, which is really easy now.

 

Hope this screencast helped you migrate to RC5 and learn more about modules in Angular.
Until next time, have an excellent day!

ng2_aspnet

Do’s and Don’ts when Using AspNet with Single Page Applications such as Angular, Aurelia or React

Discussion on do’s and don’ts when combining AspNet with Single Page Applications such as Angular, Aurelia or React. Main question: Should we separate frontend and backend into separate solutions or keep them together as the new AspNet template in VS2015 suggests?

Screencast

What’s your take on it? Agree or disagree? Let me know!

Until next time, have an excellent day!