TomNeyland/neweden.im-frontend

Angular Material based frontend for neweden.im

neweden.im-frontend

Usage

1. make dependencies
2. gulp

Build

1. make build

Style

JavaScript

• Each module should be totally self-contained. Any functionality shared across modules should be moved into common/.
• Modules can have their own directives, services, filters, etc. If multiple files are needed in order to maintain file size, a folder should be created and the files sensibly divided by function. with less abstract naming conventions.
• JavaScript files should always be as close as possible - preferably on the same level - as their HTML partials.
• If a directive has a partial - which they tend to - a new folder should be created that is named accordingly (meaning not something generic) and the HTML partial and the JavaScript file should be placed together in that folder.

Sass

• app.scss is merely a table of contents. There should be no Sass in the file.
• Each module is responsible for exporting its submodules. In other words, app.scss should only import top level modules.
• Sass that needs to be shared among modules should be moved into assets/stylesheets/.

Modules

A typical module will look something like this:

import 'angular-aria';
import 'angular-material';
import 'angular-ui-router';
import angular from 'angular';
import _ from 'lodash';

/*
	Module Definition
 */

const exampleModule = angular.module('example', [
    'ui.router',
    'ngMaterial'
]);


/*
	Controller Definitions
 */

class ExampleCtrl {
    constructor($scope, data) {
        this.exampleData = data;
    }

    someMethod() {
        return _.map(this.exampleData, function(data) {
            return (data * 2);
        });
    }

    get data() {
        return this.exampleData;
    }
}

ExampleCtrl.$inject = ['$scope', 'data'];


/*
	Controller Registration
*/

exampleModule.controller('ExampleCtrl', ExampleCtrl);


/*
	State definitions
 */

exampleModule.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('example', {
        controller: 'ExampleCtrl',
        controllerAs: 'Example',
        url: '/example',
        template: require('./_example.html'),
        resolve: {
            data: [function() {
                return [1, 2, 3, 4, 5, 6];
            }]
        }
    });
}]);


// Export the module
export default exampleModule;

Commit Conventions

Follow conventional changelog