Barbarian Meets Codingbarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

Getting Started With Angular 2 Step By Step: 2 - Refactoring To Services

UPDATE (10th October 2017): This Angular 2 tutorial has been updated to the latest version of Angular (Angular 4). Note that the Angular team has re-branded the terms Angular 2 to Angular and Angular 1.x to AngularJS which are now the official names of these frameworks.

This is the second article on the Getting Started with Angular 2 Step by Step series if you missed the first article go and check it out!

Ok! So you’ve learned how to get started with an Angular 2 and TypeScript application and you’ve written your first component. Yey! The next thing you are going to learn about are services and dependency injection.

Angular 2 Getting Started

In the previous example we had a PeopleListComponent where we initialized an array of Star Wars persons of note. But your component shouldn’t know or care about where the list of people is coming from be it local storage, a database, a web service or the grace of the holy spirit.

That’s why we are going to extract that data access logic into a service that we’ll inject into our component through its constructor. Breaking your application in smaller pieces that have a single responsibility will make it much easier to reason about, more maintainable, reusable and testable. Win Win!

Read on →

Getting Started with Angular Step by Step: 1 - Your First Component

Earlier this week Lisa Ryrholm and I were at the ngStockholm meetup helping people get started with Angular. We’re going to have yet another workshop next week and I thought to myself… Wouldn’t it be nice if the people coming to the workshop could have a detailed reference about each and one of the exercises in the workshop? Wouldn’t it be cool if this reference had nice explanations and step by step directions that they could use during the workshop or refer back to later on? Something in a neat tutorial format? Of course!

And voilà! Here it is! Are you interested in a step by step introduction to Angular? Then let’s get started coding!

Angular Getting Started

Read on →

JavaScript Arrays: The All-in-One Data Structure

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are. These articles are excerpts of the super duper awesome JavaScript-Mancy book a compendium of all things JavaScript for C# developers.

For a very long time (up until the year 2015 and the advent of ES6) the only data structure available in JavaScript was the array. This was not a big problem for the hordes of JavaScript developers because JavaScript’s array is an array, a list, a queue, a stack and in addition provides similar functionality to LINQ. Sounds interesting? Let’s have a look.

Read on →

Getting Started with Angular 2 at ngStockholm

Yesterday was the first ngStockholm meetup and Lisa Ryrholm and I where there at Active Solution to help people get started with Angular 2. Awesome right! Yey!

Lisa went through the basic concepts and foundations of Angular 2, I did a short talk on moving from Angular 1 to Angular 2, and then we had a nice workshop where we guided everyone’s first steps into building a simple app with Angular 2.

If you are interested here are my slides.

We also used this application starter and these exercises and code samples during the workshop. You are welcome to use any of them to get started with Angular 2.

We are going to be hosting yet another workshop next week the 30th of March. So if you are curious about learning Angular 2, just sign up!

Lean UX, Atomic Design and Angular - A Flexible Front-end Architecture for Developing Web Applications: Part IV

Lean UX, Atomic Design and Angular Logos

Did you miss the other parts of this series? You may want to take a look at them first:

In the previous article of this series we introduced an imaginary Pomodoro web application. This app will let us become super productive in all our future endeavors and also serve as an example to illustrate the component-based (atomic design) front-end architecture this series advocates for.

In this article, we will start building the app following a traditional approach with Angular and relying in controllers bound to a view in a loose way (via ng-directive or a router config). We will describe the pros and cons of this solution along the way, and will encounter a couple of new requirements that will highlight the rigidness of this approach and its inability to handle changing requirements gracefully.

Read on →