2
\$\begingroup\$

I have started my clicker game using angular.js about week ago. I have finished current functionality first night, but still have feeling of misunderstanding some basic approaches.

This is sources root on github. I'm trying to follow angular-code-style.

First of all, I'd like to hear some thoughts about code structure. I have 2 services: levels (responsible for storing information about mine level and workers) and resources (responsible for storing information related to any resources: ores, money, etc.). They are located in components module (which contains not refactored items, I just have no idea what to do with them).

Also, few words about ui-view and routing, related to my code, would be great.

This is file structure of my app:

src/js/app
├── app.module.js
├── components
│   ├── app.components.module.js
│   ├── header
│   │   ├── header.controller.js
│   │   ├── header.directive.html
│   │   └── header.directive.js
│   └── mine
│       ├── levels.service.js
│       ├── mine.controller.js
│       ├── mine.directive.html
│       ├── mine.directive.js
│       └── resources.service.js
├── mine
│   ├── app.mine.module.js
│   └── mine.template.html
└── office
    ├── app.office.module.js
    ├── employee
    │   ├── employee-center.controller.js
    │   ├── employee-center.directive.html
    │   ├── employee-center.directive.js
    │   └── employee.template.html
    ├── sell
    │   ├── sell-center.controller.js
    │   ├── sell-center.directive.html
    │   ├── sell-center.directive.js
    │   └── sell.template.html
    └── upgrade
        ├── upgrade-center.controller.js
        ├── upgrade-center.directive.html
        ├── upgrade-center.directive.js
        └── upgrade.template.html

Here is my office routing config:

angular
    .module('app.office', [
        'app.components',
        'ui.router'
    ])
    .config(ConfigureOffice);

ConfigureOffice.$inject = ['$stateProvider', '$urlRouterProvider'];

function ConfigureOffice($stateProvider) {
    var office = {
            abstract: true,
            name: 'office',
            template: '<ui-view/>',
            title: 'Office',
            url: '/office'
        },
        officeSell = {
            name: 'sell-center',
            parent: office,
            templateUrl: 'js/app/office/sell/sell.template.html',
            title: 'Sell center',
            url: '/sell'
        },
        officeEmployee = {
            name: 'employee-center',
            parent: office,
            templateUrl: 'js/app/office/employee/employee.template.html',
            title: 'Employee center',
            url: '/employee'
        },
        officeUpgrade = {
            name: 'upgrade-center',
            parent: office,
            templateUrl: 'js/app/office/upgrade/upgrade.template.html',
            title: 'Upgrade center',
            url: '/upgrade'
        };

    $stateProvider
        .state(office)
        .state(officeSell)
        .state(officeEmployee)
        .state(officeUpgrade)
}

Currently, I have no office template, it is just a stub.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.