Bootstrap AngularJS Asyncronously

This weekend I played around with another blogging platform - Ghost. I am really impressed with it. It's not a static site generator, but it's lean, fast, simple to use and easy to modify. I also discovered Digital Ocean for Infrastructure-As-A-Service deployment. Their pricing is so much more competitive than Heroku or Amazon AWS. So instantly, I set up a Digital Ocean server and deployed my own Ghost blogging platform =)

In Ghost, you create and edit content using the built-in online editor. This is a great feature and makes it really convenient to create blog posts without having to modify static markdown files, push to github, blah, blah, blah.

My only complaint was writing code snippets using the online editor was no bueno. I know, it's not meant to be used as a code editor. But no worries... I can still use a native code editor and inject the content of the files to the blog post...

Here's how I did it...

This simple code snippet dynamically loads this HTML partial and inserts it into the DOM.

Once in the DOM, Angular then bootstraps the application. I find this extremely useful when posting mini-app demos in blog posts because it keeps the javascript and html files separate from the content.

You can see the running code here:

All I really had to do to run this angular app is add the 2 lines below to the post.

<div id="hello-angular-container"> </div>
<script src="/assets/js/code/helloangular.js"></script>

SOURCE CODE


Rowell Belen

Read more posts by this author.