Believe it or not but I’ve made several angular projects with enduro.js. Just take a look at bricklabels.com. This guide helps you to set up an angular 1.x project. I’ve never tried to set up angular 2 project, but if you did, let me know how it went.
Check out the sample at: https://github.com/Gottwik/enduro_samples/tree/master/angular
After creating a regular enduro project by enduro create myangularproject
, just go ahead and install angular by bower i angular -S
and include it in your project <script src="/assets/vendor/angular/angular.min.js"></script>
Create /assets/js/app.js file. We will define the angular app in this file:
var endurojs_angular_app = angular
.module('endurojs_angular_app', [])
Don’t forget to include this by <script src="/assets/js/app.js"></script>
and add the app to the html tag: <html ng-app="endurojs_angular_app">
Bam!, your project is all set up with angular.
Create /assets/js/controllers/dummy_controller.js file with dummy action:
endurojs_angular_app.controller('dummy_controller', function ($scope, $interval) {
$scope.seconds = 0
$interval(function () {
$scope.seconds++
}, 100)
})
and use this controller:
<div ng-controller="dummy_controller">
<div>{{seconds}}</div>
</div>
Notice that the angular template is escaped with a backslash( ** ) to not be compiled by enduro.js
One of the nice things enduro.js will help you with is splitting your angular components into separate files. Just add this code at the end of the body tag:
{{#files '/assets/js/services'}}
<script src="/assets/js/services{{this}}"></script>
{{/files}}
{{#files '/assets/js/controllers'}}
<script src="/assets/js/controllers{{this}}"></script>
{{/files}}
{{#files '/assets/js/directives'}}
<script src="/assets/js/directives{{this}}"></script>
{{/files}}
{{#files '/assets/js/utilities'}}
<script src="/assets/js/utilities{{this}}"></script>
{{/files}}
The enduro’s built-in files helper acts like handlebars’ each but with list of files inside the specified folder as a context.
Most of the use cases why you would like to use enduro.js with angular is that you can define content with enduro.js’ nice admin interface. To pass use the context, just pass it onto a global variable by using a stringify helper and using triple curly braces:
<script type="text/javascript">
var context = {{{stringify this}}}
</script>