Skip to main content

Accessing AngularJS from regular Javascript

I like Angular, but I hate JS. Yes, this post is about the old AngularJS.

With that out of the way...

We have a few projects that are using Razor Views from Asp.net. These are legacy projects with technical debt we just need to cope with. If you're not familiar, Razor is a templating technology which allows you to have html, javascript, templating logic and all your favorite Pokemon in one place. Sounds great right? It can suck.

So, in this project somebody came up with the idea of introducing AngularJS, and that was long before I touched the project. It was a very good idea, but it seemed a half-hearted effort and AngularJS was only used in some specific parts of the system. And I wanted more of that sweetness.


How I feel in Javascript. I never get to the light


Eventually I had to have a way to interact from my JS files with the AngularJS world. And thus this post is born for people out there that need to fight the same battle.
The scenario is very simple: if a user clicks a button which works with pure JS, some part of the application will show up, which works with AngularJS.

Obviously I tried the dumb thing of keeping the controller somewhere to be able to invoke it. But that sucks. (Lack of ) architecture is just the most obvious thing that it throws out of the window. We want to have a clean separation between the AngularJS world and the pure JS world. So the solution was this:

Have a div which has the ng-include directive. This div is declared in a Razor cshtml file.

This will include the view and will load it inside this div. The content of this view is a regular AngularJS view, but notice I am using the "as ctrl" syntax here:

The user clicks the button, and here is the handler which does all the work:

Some closing notes:
  1. I get the div that has the ng-Include directive. From here I can get the scope which is the door into the AngularJS world.
  2. I am using the $apply method. This is one of the few cases where you need to use it. If I don't use this here, the bindings might not work properly, because AngularJS has no idea that something happened. Check the docs here
  3. I am using that ctrl alias I set for my controller on the scope. Not 100% sure this is the only way you can do it, though. 

Now I have access to the load method and I can pass in parameters like I would normally do.
And all the regular magic should just work!

Comments

Post a Comment

Popular posts from this blog

The repository's repository

Ever since I started delving into architecture,  and specifically service oriented architecture, there has been one matter where opinions get divided. Let me state the problem first, and then take a look at both sides of the barricade. Given that your service layer needs to access persistent storage, how do you model that layer? It is almost common knowledge what to do here: use the Repository design pattern. So we look at the pattern and decide that it seems simple enough! Let's implement the shit out of it! Now, let's say that you will use an ORM - here comes trouble. Specifically we're using EF, but we could be talking about NHibernate or really any other. The real divisive theme is this question: should you be using the repository pattern at all when you use an ORM? I'll flat out say it: I don't think you should... except with good reason. So, sharpen your swords, pray to your gods and come with me to fight this war... or maybe stay in the couch?
2 comments
Read more

The evolution of C# - Part III - C# 2.0 - Iterators

It's been a while since i wrote the last post, but i did not forget my purpose of creating a series that shows the evolution of C#. Today i came here to talk about one of the most useful features of C#, even if you dont know you're using it. Let's talk about iterators ! What is an iterator? For those of you who didn't read about the iterator pattern somewhere in the internet or in the "Gang of Four" book, you can read a description  here . The iterator is a class/object/whatever which knows how to traverse a structure. So, if you have a list or collection of objects, an iterator would have the knowledge of how to traverse that collection and access each element that it contains. The iterator is a well known design pattern and is behind many of the wonderful that we have nowadays in .NET (Linq comes to mind). Why is it a feature? Truth be told, an iterator is a concept well known way before .NET even existed. Being an OO Design Pattern, the iterator has
Post a Comment
Read more

My simplest and most useful type

I have been doing some introspection on the way I write code to find ways that I need to improve. I consider this a task that one must do periodically so that we keep organized. There is a very, very simple problem that occurs in every application I know: How to return the results of an operation to the user? I've seen many implementations. Some return strings, some throw exceptions, some use out parameters, reuse the domain classes and have extra properties in there, etc. There is a myriad of ways of accomplishing this. This is the one I use. I don't like throwing exceptions. There are certainly cases where you have no choice, but I always avoid that. Throughout my architectures there is a single prevalent type that hasn't changed for years now, and I consider that a sign of stability. It is so simple, yet so useful everywhere. The name may shock you, take a look: Yes, this is it. Take a moment to compose yourself. Mind you, this is used everywhere , in every
Post a Comment
Read more