Templates, directives and service registration

Creating directives

Templates, which are mainly used in directives to describe the visual aspect of it, should be used as the example given below. To learn more about templates, see the following article.

    /**
      * Config
      */
    var moduleName = 'csComp';

    /**
      * Module
      */
    export var myModule;
    try {
        myModule = angular.module(moduleName);
    } catch (err) {
        // named module does not exist, so create one
        myModule = angular.module(moduleName, []);
    }

    /* Note that the name of the directive is used in your app's HTML code. 
     * So nameOfTheDirective becomes the tag <name-of-the-directive></name-of-the-directive>
     */
    myModule.directive('nameOfTheDirective', [ '$compile', function ($compile): ng.IDirective {
                return {
                    terminal: true,    // do not compile any other internal directives
                    restrict: 'E',     // E = elements, other options are A=attributes and C=classes
                    scope: {},         // isolated scope, separated from parent. 
                    templateUrl: 'directives/FOLDER/NameOfTheDirective.tpl.html',
                    compile: el => {   // Compile it explicitly in order to use interpolation like {{xxx}}
                        var fn = $compile(el);
                        return scope => {
                            fn(scope);
                        };
                    },
                    replace: true,     // Remove the directive from the DOM
                    transclude: true,  // Add elements and attributes to the template
                    controller: NameOfTheDirectiveCtrl
                }
            }
        ]);

Since we are adding the directive to the csComp module, this means that we only need to include csComp when configuring the app.ts in csMap. And every new directive (or service, as we'll see later), does not need to be added to csMap anymore!

Now we only need a way to export the templates to the csMap application (along with the csComp.js and csComp.d.ts files). Gulp to the rescue! We created a specific gulp task in csMap to not only copy the *.tpl.html templates to the csMap application, but to immediately add them to the angular $templateCache, so we don't need to load each template separately from disk. Gulp concatenates them to templates.js, which is loaded after app.js in the index file, as loading of the templates can only occur when the app has been configured (technically, the templates are loaded in a run block after the app has been initialized). See the example below, where templateCache = require('gulp-angular-templatecache') and var appName = 'NameOfYourApp':

gulp.task('create_templateCache', function() {
    console.log('Creating templateCache.')
    var options = {
        module: appName,
        filename: 'csTemplates.js'
    }

    gulp.src('../../../csWeb/csComp/**/*.tpl.html')
        .pipe(debug({
            title: 'create_templateCache:'
        }))
        .pipe(templateCache(options))
        .pipe(gulp.dest('public/js/cs'))
})

Service registration

Similarly to the directive example above, I can also add my services to the csComp module so I don't need to register then separately in app.ts. See the example below.

    /**
      * Register service
      */
    var moduleName = 'csComp';

    /**
      * Module
      */
    export var myModule;
    try {
        myModule = angular.module(moduleName);
    } catch (err) {
        // named module does not exist, so create one
        myModule = angular.module(moduleName, []);
    }

    myModule.service('MyService', csComp.Services.MyService);

Impact on app.ts

In the end, this makes it much easier to create a fork of csMap. Basically, all directives and services are replaced by simply registering csComp as a dependency in app.ts.

    angular.module('csWebApp', [
        'csComp',
        'ngSanitize',
        'ui.router',
        'ui.bootstrap',
        'LocalStorageModule',
        'angularUtils.directives.dirPagination',
        'pascalprecht.translate'
    ])