Back to blog

Angular project with enduro.js

Thursday, 26 January, 2017

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

Install 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 your main app.js file

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 dummy controller

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

Include your services, controllers, directives and utilities

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.

Passing enduro.js content context to angular app

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>
Back to blog

Shout out to pexels and freepik