Hot Reloading Angular 1.x Controllers, Services and templates
Hot Reloading React Applications (instantaneous live refresh for JS and templates without losing state while editing your code) became mainstream thanks to Dan Abramov, its own Flux implementation, Redux, and a lot of inspiration. His work and his quest for a better developer experience brought a much needed breath of fresh air in the midst of all the Javascript Fatigue we have all been experiencing these days. The React Hot Loader dramatically speeds up your development time.
At Honestica we started our project mid 2015 and set up to build a global platform to facilitate collaboration between physicians and patients, and enable data sharing & analysis while protecting patient rights and providing maximum security. We chose AngularJS + ES6 to build the FrontEnd for our first app, which will become available later this year for French medical practitioners and Hospitals.
We built our component based architecture following the latest and greatest best practices around (shout out to Scott Moss’ AngularClass project), with a solid build system based on Webpack dev server.
So when we hired a former React developer, we decided it was time to try and build something similar to React Hot Loader for Angular 1.x. It was actually surprisingly painless and although it is far from perfect, it does the job pretty well.
It is based on a few simple webpack loaders which are just adding a little piece of code to each reloadable file. The piece of code declares the file as hot-reloadable to webpack, and then does some hacky magic to make angular aware of the changes, recompiling the templates against the scope, and patching the controller’s prototype methods.
The main requirements for the hot reloading to work are :
- One file, one ES6 module, one purpose.
- A strong convention on naming your files. The loaders are inferring controllerNames and serviceNames based on the name of the file.
- An ES6-component style of writing angular applications
- External templates for components, required via Webpack (not mandatory to achieve hot-reloading, its just the way its written)
All necessary code is available on our Github. Feel free to play with the sample app included. It currently is highly tailored to our coding style and conventions but we believe it can be easily modified to fit other’s needs.
The implementation details
We’ll take a look at the component loader. You can browse through the commented source files to see how the others work. Here are the requirements on which the loader is based:
- You must have one file per controller and export the controller or the angular.module with the controller invoked.
- You must use named functions or classes for your controller (we use the controller.name property)
- You must have a precise filenaming strategy. Currently our loader looks for the folder name of the file, adds Controller, and then finds a reference to the old controller thanks to angular’s $injector. It then updates its methods one by one with the ones from the new controller in your new module.
So for instance if you have a file named ‘home.js’ under ‘components/home’, the loader will look for a <home></home> directive and update the HomeController reference in angular’s scope with HomeController’s new methods.
- We use isolateScope on every component (which is also the default with the new Angular Component method), we also use controller as vm for all our component, so we get our instances with this line:
angular.element(document).find(‘directiveName’).isolateScope().vmHere’s the actual piece of code that we throw at the end of every controller file. template string quote marks are omitted line 14 and 43 to allow syntax highlighting
The service loader uses the same logic, and the template loader searches for all components with that template and compiles them against their scope, and then replaces the html of the node.
Our first version of this hot reloader is a bit hacky, surely has some flaws we didn’t anticipate about but it works in most cases. Of course we only use this in dev mode, and do not push the loader to the production build. Even if we have to hit cmd+R once in a while, it feels liberating to see your templates updating in real time without losing the JS context!
Feel free to share your thoughts and to fork the repo to fit the loaders to your needs !
