Parsing HTML generated outside of Angular

It often happens that you have to work on some old project using jQuery. But in modern Web Development jQuery just doesn't cut it. So you write new features in Angular. But sometimes you have to modify existing code.

It's not a problem as long as HTML is static, but if it's generated on server side Rails+jQuery style, then Angular won't know anything about it when it arrives to a browser.

So we have make Angular parse this HTML. I remember a long time ago when I first encountered that problem I googled quite a lot but came up empty handed. So I had to find a way myself. Recently my colleagues stumbled on the same problem so I decided to share this little piece of code on the internets.

Well... That's pretty much it. You shouldn't try running your angular app again. It's going to create a separate application.

Also I want to share an interesting gotcha. If you inline your angular templates with 


<script type="text/ng-template" id="the-template" >
and they are in dynamically generated HTML you have parse this HTML. Strangely enough Angular doesn't use selectors to get this template. Rather it puts this template into template cache when encounters it during parsing.

Popular posts from this blog

Next.js: restrict pages to authenticated users

Image
Many websites have pages that need to be restricted to authenticated users, for example profile pages or dashboards. Next.js web framework comes with a lot of functionality built-in JS compilation, rendering code on server and caching. When it comes to most other aspecs, it's up to a programmer to build, including such needed functionality as restricting access to some pages only to authenticated users. In this article we are going to build just that: a function that augments a page object, that could be used like that: Here's the implementation in TypeScript: In order to make it work on server we are going to need one more utility function fetchWithCookies . When making HTTP request from inside a Web Browser, the browser automatically sends cookies with each requests and then stores new cookies if a response comes in with set-cookie header. On server-side we need to build this feature ourselves, because neither Next.js nor NodeJS make any a
Read more

HTTP server in Ruby 3 - Fibers & Ractors

Image
This is part #2. Head over to part #1 to learn about HTTP in Ruby. Motivation Historically Ruby's been lacking in the concurrency department. Ruby has "native" threads (prior to 1.9 there were only "green"), which means there can be multiple threads controlled by an OS, but only 1 thread can be executed at a time, this is managed via Global Interpreter Lock (GIL). However, native calls and I/O calls can be executed in parallel. During an I/O call, a thread gives up control and waits for a signal that the I/O has finished. This means I/O heavy applications can benefit from multiple threads. In this article we are going to explore different concurrency modes for our HTTP server: Single-threaded Multi-threaded Fibers Ractors Single-threaded Let's start simple and see how a single threaded HTTP server could look like ( full code ): def start socket = TCPServer.new(HOST, PORT) sock
Read more

Using image loader is Next.js

Image
Next.js has managed to kill off create-react-app and despite new rivals (in the face of Remix) is a de-facto way to start new React apps. One of the awesome features that Next.js and its platform Vercel provides is a way to automatically optimize images for different screens to make both user and developer experience much smoother. However, if your app has any non-trivial number of images that are generated by users you may soon end up visiting Vercel's limits page . Turns out that even on Hobby and Pro plans you are limited to 1000 and 5000 images per month, any overage is going to cost you dearly. At this point, you are going to start shopping for alternative image optimization solutions. You can either host your own via Thumbor or imgproxy or use one of the hosted solutions like Cloudinary . Regardless of what service you choose, it needs to be integrated into Next.js. After taking a look at Cloudinary as an example, even their free plan o
Read more