These are chat archives for AngularClass/NG6-starter

29th
Dec 2015
Andy Brown
@brownish
Dec 29 2015 00:28
@joegatt @fesor I've been looking around for a better solution but I haven't had much luck. I got tired of writing and rewriting a ton of table/details/new states for my CRUD app so I ended up putting some functions into a config file that I use to build the states for each entity, given a few parameters to set up the state name, page title, directive name, etc.
Sergey Protko
@fesor
Dec 29 2015 09:47
@brownish can you provide a small example?.
Andy Brown
@brownish
Dec 29 2015 09:47
sure thing
for example in township.js, where township is the generated component, i've got:
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import townshipComponent from './township.component';
import config from '../config';

let townshipModule = angular.module('township', [
      uiRouter
    ])

    .directive('township', townshipComponent)
    .config(($stateProvider) => {
      let configObj = {
        name: 'townships',
        title: 'Township',
        titlePlural: 'Townships',
        apiEndpoint: 'townships',
        directiveName: 'township'
      };
      config.buildStates($stateProvider, configObj);

    });
export default townshipModule;
and in my config.js i've got:
ill just paste the whole thing, some of the resolve stuff is pulled from a factory calling a server-side rest api:
let newData = {isNew: true, pageType: 'details'};
let detailsData = {isNew: false, pageType: 'details'};
let tableData = {isNew: false, pageType: 'table'};
let baseTemplate = '<div ui-view flex></div>';
let tableTemplate = '<arch-table api="vm.api" items="vm.items" config-item="vm.configItem" ' +
    '></arch-table>';

let getTableResolve = function (endpointName) {
  return {
    api: function (RestFactory) {
      return RestFactory.query(endpointName);
    },
    items: function (api) {
      return api.getList();
    },
    configItem: function (RestFactory) {
      return RestFactory.table(endpointName);
    }
  };
};

let getDetailsResolve = function (endpointName) {
  return {
    api: function (RestFactory) {
      return RestFactory.query(endpointName);
    },
    items: function (RestFactory) {
      return RestFactory.query(endpointName);
    },
    item: function ($stateParams, RestFactory) {
      return RestFactory.query(endpointName).one($stateParams.itemId).get();
    },
    configItem: function (RestFactory) {
      return RestFactory.schema(endpointName);
    }
  };
};

let getDetailsTemplate = function (name) {
  let template = '<' + name + ' api="vm.api" item="vm.item" config="vm.config" config-item="vm.configItem">' +
            '</' + name + '>';
  return template

}

let tableController = function ($log, $state, api, items, configItem) {
  $log.debug('tableController api', api);
  $log.debug('tableController configItem', configItem);
  $log.debug('tableController items', items);
  $log.debug('tableController api', api);
  this.api = api;
  this.configItem = configItem;
  this.items = items;
};

let detailsController = function ($log, $state, api, item, configItem) {
  $log.debug('detailsController api', api);
  $log.debug('detailsController configItem', configItem);
  $log.debug('detailsController item', item);
  $log.debug('detailsController api', api);
  this.api = api;
  this.configItem = configItem;
  this.item = item;
};


function buildStates (stateProvider, config) {
  let baseStateName = config.name;
  let newStateName = baseStateName + '.new';
  let tableStateName = baseStateName + '.table';
  let detailsStateName = baseStateName + '.details';

  stateProvider
    .state(baseStateName, {
        url: '/{name:(?:' + config.name + ')}',
        template: baseTemplate,
        abstract: true,
        ncyBreadcrumb: {
            label: config.titlePlural + 'Home',
            parent: config.parentState
        }
    })
    .state(newStateName, {
        url: '/{new:(?:new)}',
        template: getDetailsTemplate(config.directiveName),
        controller: detailsController,
        controllerAs: 'vm',
        resolve: getDetailsResolve(config.apiEndpoint),
        data: newData,
        ncyBreadcrumb: {
            label: 'New',
            parent: tableStateName
        }
    })
    .state(tableStateName, {
        url: '',
        template: tableTemplate,
        controller: tableController,
        controllerAs: 'vm',
        resolve: getTableResolve(config.apiEndpoint),
        data: tableData,
        ncyBreadcrumb: {
            label: 'Table',
            parent: baseStateName
        }
    })
    .state(detailsStateName, {
        url: '/:itemId',
        template: getDetailsTemplate(config.directiveName),
        controller: detailsController,
        controllerAs: 'vm',
        resolve: getDetailsResolve(config.apiEndpoint),
        data: detailsData,
        ncyBreadcrumb: {
            label: 'Details',
            parent: tableStateName
        }
    })
}




let config = {
  buildStates: buildStates
};

export default config;
Sergey Protko
@fesor
Dec 29 2015 09:53
do you use nested views?
Andy Brown
@brownish
Dec 29 2015 09:53
yeah
only 1 level though right now, so all i need is parent
i spent the day trying to upgrade some aspects of this project into angular2-webpack-starter and ideally, i'd be able to switch over to that and just use nested components instead
Sergey Protko
@fesor
Dec 29 2015 09:56
I like the redux approach, where all of my components are stateless and state passed from resolvers. Instead of modifying state, my components asks serviceses to do this, and they just update data, refreshes states and so on.
Andy Brown
@brownish
Dec 29 2015 09:57
hm
i've not looked into redux
sounds like observables
oooo, i like the idea of the state of the whole app store in a single store
that was sort of the approach i tried to go with
config-item is an object literal that contains the page customization stuff like titles of tables and such, items are the array of objects to be displayed on the table and item is the individual object for detail/new pages, just gotta pass those array and not worry about anything else between pages