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

Why is the Single Responsability Principle important?

The Single Responsability Principle is one of the five S.O.L.I.D. principles in which i base my everyday programming. It tells us how a method or class should have only one responsability. Not a long time ago i was designing a reporting service with my colleague Nuno for an application module we were redoing and we had a method that was responsible for being both the factory method of a popup view and showing it to the user. You can see where this is going now... I figured out it would not be a that bad violation of the principle, so we moved on with this design. The method was called something like "ShowPrintPopup" and it took an IReport as an argument. All this was fine, but then we got to a point where we needed to have a permissions system to say if the user was able to export the report to Excel, Word, PDF, etc... The problem was the print popup would need to know beforehand if it would allow the user to export the report or not, so that it could show it's UI a...
Post a Comment
Read more

From crappy to happy - refactoring untestable code - an introduction

I started testing my code automatically a couple of years in after starting my career. Working in a small company, there weren't really incentives for us to automate testing and we were not following any kind of best practices. Our way of working was to write the code, test it manually and then just Release It ™ , preferably on a Friday of course. I'm sure everyone can relate to this at some point in their career, because this is a lot more common than the Almighty Programming Gods of the Internet make us believe. I find that the amount of companies that actually bother writing tests for their production code is a fraction of the whole universe. I know some friends who work in pretty big companies with big names in the industry and even there the same mindset exists. Of course, at some point in time our code turned into a big pile of shit . Nobody really knew what was going on and where. We had quantum-level switcheroo that nobody really wanted to touch, and I suspect it i...
Post a Comment
Read more

From crappy to happy - dependency what, now?

Following the introduction on this series on a previous post, we will now talk about dependency injection and how it has the effect of allowing for more testable code. Sometimes when I talk about this concept it is difficult to explain the effect that applying it might have on the tests. For that reason I think it is better to demonstrate with a near-real-world situation. Obviously, keep in mind this is not real code, so don't worry about the design or implementation details that don't contribute to the point being discussed. The code As you can see, it is simple. There's a class called ShipManager (what else?) that receives position updates for the ships. It keeps the last position reported from each ship and does some calculation to see how much the ship moved. It assigns some values to the update and finally it persists the final version of the update. How do we start testing? When you think about it, tests are dead simple. A test either passes or it doesn...
Post a Comment
Read more