I had a problem: My application had multiple independent parts, which needed their own states. For example, I have a toolbar that’s on top and a sidebar on the right. The user can change each of the parts without affecting the other, and setting it up as a normal ui-router state tree will not work.

The standard ui-router has no concept of parallel states. Everything must be modeled as a tree, which means a setup like this doesn’t work. For example, changing the sidebar’s state would affect the toolbar’s state as well – which is not something we want.

Thankfully there’s ui-router-extras, which adds support for so-called “sticky states” or “parallel states”. We can use this to have as many individual parts, that have their own parallel state trees, as we want.

Let’s go through a small sample app and look how to set this up step by step. You can find the full sample app here so you can follow along more easily.

So you found an issue on a FOSS (Free open source software) project, and you would like to send a PR. But how? That is a good question. Another question would be: I am running some small FOSS project and someone sent me a PR, what can I do with it now?

I am going to write about how we do FOSS at ui-bootstrap. There are hundred of ways of working with FOSS projects, but I think that this way works like a charm. You can also use this “workflow” in private projects, but those are not that fun!

Article updated on Oct 14th for Angular 2 alpha 42.

I want to tackle some points on this article and a simple rating directives will do the work. Let’s build the simplest rating directive ever!

I need a directive where I can rate something and better than a simple input, we want to see 5 stars where I can click on them to get a rating.

Before jumping into code, I want to analyze it and how could we resolve this with Angular 1.

Article updated on Feb 5th for Angular 2 beta 3.

Angular 2 it is just around the corner and people are still afraid because Angular 2 changes too much and it will hard to migrate. That is not true at all, in fact you will see how easy is Angular 2 by highlighting the semantic shift between those two.

Let’s migrate a directive from Angular 1 to Angular 2. I love accordions, everybody love accordions! Let’s migrate ui-bootstrap accordion to Angular 2. I can’t assume that you’re familiar with it, so we are code both at the same time, explaining the differences along the way. I highly recommend you to, at least, replicate yourself the Angular 2 one.

Use this plunker to code the Angular 1 version.

Use this plunker to code the Angular 2 version.

I know you’re all excited with Angular 2 and ES6, but that doesn’t mean we can’t use ES6 with Angular 1.x.

Today, I am going to present you my new workflow for Angular 1.x with ES6.

This article has been update in January 30th. Now it is using TypeScript and angular 2.0.0-beta.2

Note: If the “foo” alerts from the plunkers starts popping out without reason, please leave a comment and I will look for a different solution.

Angular 2 is around the corner and there are mixed opinions about it. Some people can’t wait for it and other people are not any happy with it. Why is that? People are afraid to change, thinking that they wasted their time learning something that is now going to change in a radical way.

Angular is a great framework, but it is 6 years old, and that for a framework is too much. The web evolved a lot since Angular inception in 2009 and the Angular team can’t simply implement those new stuff without breaking half of the actual implementation.

So if they have to break Angular to be able to make it “modern”, it is better to write it from scratch. How so? Angular itself has other problems like the complex syntax for directives, 5 types of services that confuses new users, writing stuff in the wrong scope…

They decided to kill 2 birds with one stone. A new simplified Angular with all the new stuff like shadow dom and also none of the Angular 1 problems.

So my friend, don’t worry, Angular 2 will rock.

For those who don’t know it yet. I finished my book a couple of weeks ago.

I really enjoyed writing it and I think you will also like it.

It will teach you both how to create directives and how to test them.

If you have any issue or feedback, please go to https://github.com/angular-tips/deep-angular-issues

Of course, you can buy it here: http://leanpub.com/angularjsdirectives

Thank you!

DISCLAIMER: Angular 2 is still on a developer preview, so it has a lot of missing features, broken stuff and it is also subject to change.

Ready for Angular 2? You bet!

For this demo, we are going to code an application which requests german words. The word will also come with its translation if the user is authenticated.

First, grab the KOA backend from here, then:

1
2

$ npm install
$ node server.js

I am pleased to say that my book is now public. It is not finished yet, but it is good enough to get started with it.

You can buy it from here.

I hope I can get as much feedback as possible (https://github.com/angular-tips/deep-angular-issues) to make the book even better!

Thank you for being there.

So you are asking for help and someone says… hey plunk it so we can see it.

Right, even when we should be able to reproduce any problem in a small example, there are some difficult ones.

Imagine this conversation:

• Hey I am creating a todo list but when I try to update a todo it changes and then immediately changes back.
• Good, can you make a plunker for that?
• Uhm no, it uses my (insert here a backend) and I can’t use it on a plunker.

It is not an uncommon issue at all. What could be a good solution? Swap our service that talks with the backend with a different one swapping the $http calls with fake data? Yeah, we could, but if you start modifying your original implementation, it will be harder to debug, because the problem could lie on that original service and it is not there to test.