Unable to use Kalei to document simple AngularJS examples
webmaven opened this issue · comments
I would like to use Kalei to document various Angular directives that render UI widgets in use throughout my app. Unfortunately, it doesn't look like I can get even the simplest Angular examples to work. 😢
I added ng-app to the html tag in index.html, as well as adding the following to the bottom of the body: <script src="../js/angular.min.js">, but the following example in a css file still does not work:
/*
## Widgets
```
<input type="text" ng-model="name" /> {{ name }}
```
*/
The {{ name }} remains displayed literally.
Any clues on getting a basic AngularJS example working within Kalei?
So, I figured out that I was adding ng-app to the wrong spot, and added it to all the <html> elements in the head. The result isn't pretty, and it actually messes up the navigation somehow (the top level navigation items expand vertically quite a bit), but the example code still doesn't get processed.
I turned to a different approach, removing all the ng-app markup and replacing it with a script tag just below the one that adds Angular:
<script type="text/javascript">
angular.element(document).ready(function() {
angular.module('myApp', []);
angular.bootstrap(document, ['myApp']);
});
</script>
However, although the navigation is no longer screwed up, the Angular example remains unchanged. I'll keep poking at the problem.
Suggested a possible solution in #46.
OK, I have made some more progress, although my solution so far is rather ugly.
Instead of using ng-app or the script above, I made the following changes:
- Added angular as a dependency to the
requireinjs/main.js - Added the following to
js/views/style/page.jsjust beforefixie.init():
// Angularize Page
var app = angular.module('myApp', []);
angular.bootstrap(document, ['myApp']);
console.log('After Angular bootstrapping');
And voila, my simple <input type="text" ng-model="name" /> {{ name }} example above works.
However, modifying Kalei itself in this way strikes me as ugly, so I was hoping there is a cleaner way to accomplish the same thing. Any suggestions or guidance?
Closing.