{"id":1254,"date":"2013-09-26T22:48:28","date_gmt":"2013-09-27T02:48:28","guid":{"rendered":"http:\/\/yuguangzhang.com\/blog\/?p=1254"},"modified":"2013-10-17T18:02:52","modified_gmt":"2013-10-17T22:02:52","slug":"using-encapsulation-to-make-an-awesome-angular-js-editor-in-fiddle-salad","status":"publish","type":"post","link":"http:\/\/yuguangzhang.com\/blog\/using-encapsulation-to-make-an-awesome-angular-js-editor-in-fiddle-salad\/","title":{"rendered":"Using Encapsulation to Make an Awesome Angular JS Editor in Fiddle Salad"},"content":{"rendered":"

Angular JS is a popular MVC framework by Google, and I received a bug report that Fiddle Salad wouldn’t reload the preview<\/a> as it does in all other cases. This problem was noticed before, but it wasn’t a priority since pressing the refresh button as required in all other web development methods solves the problem. However, this was because I was attempting to solve it at the wrong level by modifying a method. As I’ve learned, there are dependencies between the execute, reset, and initiation of the class involved. <\/p>\n

debug()<\/li>\n<\/ul>\n
as in the class diagram on the wiki at\u00a0 https:\/\/github.com\/yuguang\/fiddlesalad\/wiki\/2.-Classes<\/a>. Therefore, any implementation of a CodeRunner just needs to support these 5 methods. The debug method could be refactored into a super class because it would generate the template for the new execute() method. <\/p>\n
[cc lang=”coffeescript”]
\ndebug: ->
\n ###
\n Debug opens a new window with the code loaded in the page. External CSS and JS files are loaded through head tags.
\n It assumes all external resources are stored in the view model.
\n ###
\n template =
\n css: _.template ‘” \/>’
\n js: _.template ‘