DarksideCookie

In the last part, we went had a thorough look at scopes, and scope “inheritance”. That means that we have now covered setting up Angular, creating modules and controllers, and how to utilize two-way data binding using the scope object. The next step is to learn how to work with dependency injection in Angular to provide the same dependency injected service structure that Angular uses internally.

Dependency injection isn’t complicated as such, you register a service that another unit of code can request to get access to. That is the extremely simple definition. To support this in Angular we depend on the $provide service. This service is used to locate dependencies that other pieces of code require. Unfortunately, something as simple as this, actually becomes a little complicated and hard to grasp in Angular. Not because it is really complicated, but because there are so many options…

More...

In the previous part, I talked fairly detailed about how the scopes use prototypical inheritance, and how we can use this to our advantage by either using simple property types, or by using complex types.

In this part, I want to cover some functionality given to us by Angular when using the scope…

More...

In the last part, we talked about how to set up to group different bits and pieces of a solution into units. We also talked about how to create controllers inside those modules. We briefly looked at creating a controller and using it to work with the scope object, and how, by using data binding, could update the UI in a more structured way.

In this part, we will take a deeper look into using controllers and scope. Mostly about how to use the scope to be honest. Controllers are all about functionality, while scope is about data binding. As I don’t have a special solution to build, there isn’t going to be a whole lot of functionality. There will be just enough functionality to show the stuff I am talking about…

More...

In the previous part, I covered how to get started with Angular, as well as the basics of how it works “internally”. This part will build on that knowledge, and add modules and controllers to the mix.

If you haven’t read the previous part, I suggest at least skimming through it. The first part might not be necessary to understand this part, but the basics covered in the previous will be…

To start off, we need a clean “solution”, containing only an index.htm file, and Angular… The index.htm file should look something like this

More...

Ok, if you have read my first post in this series about getting started with AngularJS, you will know what AngularJS is, as well as why I am creating yet another introduction to it. In this part, I want to focus on getting started. The first baby steps in the road to building SPAs with Angular.

The first step is to set up a new application. In this case, let’s keep it ridiculously simple. It doesn’t have to be a big complicated solution and use big IDEs like Visual Studio. At least not in the beginning. IDEs have their place, but for now, adding a simple folder on the computer is enough to get started. This folder will be the “solution”. And Notepad will be the editor.

You are obviously more than welcome to use another editor. Notepad is in no way the only editor that was built with Angular in mind. But it, or very similar editors, are pre-installed on most development computers in the world.

More...

AngularJS is honestly one of the best things I have stumbled upon in years. After Silverlight doing its fantastic disappearing act, my interest in developing things on the web took a nosedive. I had no interest in doing it what so ever. HTML/CSS/JavaScript was a massive step back from XAML in my mind. And I still think so. I think we are trying to do things on the web using technologies that weren’t built for it, ending up with a lot of hacky solutions…

However, when I found AngularJS and realized that I could use my MVVM experience, and my “XAML patterns” on the web, it changed a whole lot! I could focus on building applications and leave a lot of the hackyness to the side. I would still have to do the hacks, working with HTML and CSS, but at least I could build the logic side of things in a structured way.

However, Angular might not be the easiest thing to just pick up and learn. For web developers, picking up dependency injection and MVVM can be a daunting task, and being a .NET developer, taking up a dynamic language like JavaScript, and loosely strung together applications built on spread out text files, might seem less the perfect.

Angular isn’t overly complicated, and there are a million resources for learning it out there. But for some reason, I haven’t found one that suited me. So…I decided to do what all simpletons do…we re-invent the wheel and do it all ourselves… The goal is to write an introduction to Angular from my point of view, which means from the point of view of a person who normally works with C# building ASP.NET MVC applications as well as XAML-based applications. I have a background in building web applications, but more from a ASP.NET side of things than from a client-side.

More...