Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 26 20:36
    john-dent commented #88
  • Jun 26 20:35
    john-dent commented #88
  • Mar 19 22:58
    gmostert closed #244
  • Feb 08 06:53
    OliverWall commented #251
  • Dec 14 2018 08:06
    fadehelix commented #251
  • Dec 14 2018 05:03
    thematho commented #251
  • Dec 14 2018 05:01
    thematho commented #209
  • Dec 14 2018 04:59
    thematho commented #209
  • Dec 12 2018 21:57
    fadehelix synchronize #251
  • Nov 04 2018 23:35
    thematho synchronize #224
  • Oct 26 2018 16:00
    Stephanemw commented #248
  • Oct 26 2018 00:16
    thematho synchronize #224
  • Oct 16 2018 11:11
    caprica-Six commented #148
  • Oct 16 2018 11:11
    caprica-Six commented #148
  • Oct 16 2018 11:10
    caprica-Six commented #148
  • Oct 16 2018 11:08
    caprica-Six commented #148
  • Oct 16 2018 11:07
    caprica-Six commented #148
  • Oct 09 2018 00:35
    thematho commented #251
  • Sep 16 2018 13:27
    scriptrance commented #114
  • Sep 14 2018 23:22
    KiranChaudhariJM commented #114
Sergey Protko
@fesor
@import '~bootstrap/less/bootstrap’;
very simple webpack config
module.exports = {
  devtool: 'sourcemap',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
       { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
       { test: /\.(png)$/, loader: 'url-loader?limit=100000' },
       { test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
       { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
       { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
       { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
       { test: /\.jade$/, loader: "jade" },
       { test: /\.html$/, loader: 'raw' },
       { test: /\.less$/, loader: 'style!css!less' },
       { test: /\.css$/,  loader: 'style!css' }
    ]
  }
};
it will handle fonts from bootstrap correctly
also consider to use webpack extract text plugin to server css independently
p.s.we planning to use AngularClass/NG6-starter#75 angular material 1.0. And we are welcome for PRs :)
adi carmel
@adica
@fesor tnx! i will check it soon.
Joe Gatt
@joegatt
Some time back, @FredericLatour had mentioned he was unable to get uiRouter's resolve to pass values to controllers. I'm failing at the same thing. Is it possible to do this?
Sergey Protko
@fesor
to controller’s of directives?
you must pass resolved values via attributes. Something like this:
.state(‘home’, {
    resolve: {
        data: ($stateParams, homeDataReducer) => homeDataReducer($stateParams.someParam)
    },
    controller: ($scope, data) => {
         $scope.data = data;
    },
    template: `
        <my-home my-data=“data”></my-home>
    `
}
something like that
Sergey Protko
@fesor
maybe someone can suggest a more clean solution
Joe Gatt
@joegatt
Thanks, @fesor ! Trying it out. But you're right, something cleaner would be better...
Andy Brown
@brownish
@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
@brownish can you provide a small example?.
Andy Brown
@brownish
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
do you use nested views?
Andy Brown
@brownish
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
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
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
Andrew Lombardi
@kinabalu
is there any trick to getting Rectangular to work with this starter?
Andrew Lombardi
@kinabalu
or Restangular rather (stupid autocorrect)
Sergey Protko
@fesor
npm install restangular
in module that uses it just import ‘restangular’
there is nothing special about any third party libraries except that we are using npm as package manager and webpack as bundler (or jspm and system.js if you intererested in)
Andrew Lombardi
@kinabalu
@fesor ok, i have restangular installed, and import ‘restangular’ in the the plain let’s say ‘home.js’ file, and then how to reference it in the controller? does it just go into the constructor?
Sergey Protko
@fesor
yep, you pass restangular to your controller constructor and just uses it.
Andy Brown
@brownish
make sure you inject it into the home.js angular.module
like you normally would
Sergey Protko
@fesor
not injected but specified dependency from restangular module
Andy Brown
@brownish
import restangular from 'restangular';
let dataModule = angular.module('app.common.data', [
      'restangular'
    ])
i have it like so one place
Sergey Protko
@fesor
yep, seems to be ok
p.s. I don’t recommend you to use restangular dirrectly in component’s controllers. Consider to use stateless/stupid UI components in future and pass state to them from above (from state resolvers for example).
you can read more about stateless vs stateful components in the internet
Andrew Lombardi
@kinabalu

import uiRouter from 'angular-ui-router';
import aboutComponent from './about.component';
import restangular from 'restangular';

let aboutModule = angular.module('about', [
uiRouter,
'restangular'
])

just as an example, the above snippet and I get a nasty javascript error
and restangular is definitely in node_modules
Andy Brown
@brownish
i only use it in one service, then the states' resolves pulls data and injects in into the components