These are chat archives for AngularClass/NG6-starter

2nd
Jan 2016
Andrew Lombardi
@kinabalu
Jan 02 2016 01:15
@fesor if I have app/common/3rdparty/restangular.js and i’m using your code, I can’t seem to get the import right, seems like import ‘common/3rdparty/restangular’ just laughs at me with an error
Andy Brown
@brownish
Jan 02 2016 01:24
where are you trying to import that @kinabalu ?
Andrew Lombardi
@kinabalu
Jan 02 2016 01:25
from components/about/about.js just as trying it out before I add to real services
Andy Brown
@brownish
Jan 02 2016 01:26
You've got to do import restangular from 'common/3rdparty/restangular'
Andrew Lombardi
@kinabalu
Jan 02 2016 01:26
yup, that’s exactly what I have, sorry: import restangular from ‘common/3rdparty/restangular’
Andy Brown
@brownish
Jan 02 2016 01:27
try importing from '../../common/3rdparty/restangular'
Andrew Lombardi
@kinabalu
Jan 02 2016 01:28

the error: `Error: ModuleBuildError: Module build failed: SyntaxError: /Users/kinabalu/Source/mystic/bandgateway/client/client/app/components/about/about.js: Unexpected character '‘' (4:24)
2 | import uiRouter from 'angular-ui-router';
3 | import aboutComponent from './about.component';

4 | import restangular from ‘common/3rdparty/restangular’
| ^
5 |
6 | let aboutModule = angular.module('about', [
7 | uiRouter,`

Andy Brown
@brownish
Jan 02 2016 01:28
you have to give it the path
Andrew Lombardi
@kinabalu
Jan 02 2016 01:31
just tried your suggestion going up two levels, but it pulls same error … unexpected character ‘''
Andy Brown
@brownish
Jan 02 2016 01:32
you have backticks instead of apostraphes
i think thats what that is
Andrew Lombardi
@kinabalu
Jan 02 2016 01:33
@brownish yeah, omg, I copied from the chat, and I guess thats how it copied, just found it too … d’oh! thanks!
Andy Brown
@brownish
Jan 02 2016 01:33
haha np @kinabalu
Andrew Lombardi
@kinabalu
Jan 02 2016 01:34
bummer that you have to do ../../ to get at that
Andy Brown
@brownish
Jan 02 2016 01:34
im actually looking in the webpack docs to find a better way atm
i want to figure out how to split my bundle.js into app.js and vendor.js
and make webpack bundling faster
ideally, I'd like to remove gulp altogether, im not a huge fan of it
Andrew Lombardi
@kinabalu
Jan 02 2016 01:35
no? more of a fan of Grunt?
Andy Brown
@brownish
Jan 02 2016 01:36
I'd rather use webpack for the whole thing
like angular2-webpack-starter
that uses only webpack
much easier to understand, imo
Andrew Lombardi
@kinabalu
Jan 02 2016 01:37
ahh gotcha. i’ve never used webpack or gulp, so this is pretty much new to me
Andy Brown
@brownish
Jan 02 2016 01:38
yeah it's all pretty crazy
but writing everything is es6 is so great
Andrew Lombardi
@kinabalu
Jan 02 2016 01:38
you like it more than straight JS / Coffee?
Andy Brown
@brownish
Jan 02 2016 01:39
yeah
well, i dont have that much experience since I learned JS through angular
Andrew Lombardi
@kinabalu
Jan 02 2016 01:40
haha, kind of forces the issue a bit
Andy Brown
@brownish
Jan 02 2016 01:41
yeah lol. coming from zero experience I've taken the path of least resistance. webpack is the easiest to configure and understand. es6 feels sorta like python, which i understand pretty well
at least with imports and such
Andrew Lombardi
@kinabalu
Jan 02 2016 01:41
sure
Andy Brown
@brownish
Jan 02 2016 01:42
angular 2 is pretty awesome though, that makes a hell of a lot more sense than angular 1 (to me)
Andrew Lombardi
@kinabalu
Jan 02 2016 01:45
is it? looks like it’ll be nice once it’s stable and released. still using 1 though, but this starter is a helluva lot nicer than what I had before
@brownish do you make use of services / factories for your REST calls?
Andy Brown
@brownish
Jan 02 2016 01:46
yeah
I use the decoupled restangular approach
Andrew Lombardi
@kinabalu
Jan 02 2016 01:48
can you explain a bit more?
Andy Brown
@brownish
Jan 02 2016 01:49
let restFactory = function (Restangular ) {
  let query = (endpoint) => {
    return Restangular.service(endpoint);
  };
  let table = (endpoint) => {
    return Restangular.all(endpoint).customGET('table');
  };
  let schema = (endpoint) => {
    return Restangular.all(endpoint).customGET('schema');
  };

  return {query, table, schema};
};

export default restFactory;
then i have a module that injects that
so in my resolves i can do things like items: function (RestFactory) { return RestFactory.query(endpointName); },
where endpointName is like 'counties'
table and schema are custom endpoints i hooked up with django-rest-framework to provide some config stuff for my table and details views
Andrew Lombardi
@kinabalu
Jan 02 2016 01:51
ahh i see
looks pretty good
Andy Brown
@brownish
Jan 02 2016 01:52
so in my common folder i have a 'data' component that just has a data.js and a data.factory.js
Andrew Lombardi
@kinabalu
Jan 02 2016 01:52
and that’s where your restFactory stuff is?
Andy Brown
@brownish
Jan 02 2016 01:53
i import that restFactory into data.js
yeah
actually i have rest.factory where that resides
data.factory is old, using $http
and in the config function for dataModule i mess with the RestangularProvider stuff like setBaseUrl etc
Andrew Lombardi
@kinabalu
Jan 02 2016 01:54
makes sense. ooh man I hate $http :P
Andy Brown
@brownish
Jan 02 2016 01:54
yeah lol
i have a bunch of different types of data from a bunch of endpoints that all require pretty much the same requests
this makes it way easier than $http
Andrew Lombardi
@kinabalu
Jan 02 2016 01:55
sure sure
and using django as well, nice
Andy Brown
@brownish
Jan 02 2016 01:55
yeah i love django
django was my introduction to web development and whatnot
i still love it lol
Andrew Lombardi
@kinabalu
Jan 02 2016 01:57
i have used a ton of stuff, django just seems easiest, since I have a deep affection for python
Andy Brown
@brownish
Jan 02 2016 01:58
yeah same. I do a lot of GIS so python is my jam
Andrew Lombardi
@kinabalu
Jan 02 2016 01:58
totally makes sense. I’m stuck doing all kinds of crap these days, python, node, java, if only I could speak as many actual languages
Andy Brown
@brownish
Jan 02 2016 01:59
haha
Andrew Lombardi
@kinabalu
Jan 02 2016 02:04
@brownish are component directories for one single page generally? seems like they should be called pages :/
Andy Brown
@brownish
Jan 02 2016 02:04
not necessarily @kinabalu you can have multiple components on one page
well most of my components (in the components folder) are pages that use the components in the common folder
Andrew Lombardi
@kinabalu
Jan 02 2016 02:05
yea
since I’m looking at the starter, this seems like it would be pages/ components/ and common/
Andy Brown
@brownish
Jan 02 2016 02:06
the thing about putting everything into components is that you can do it however you want
Andrew Lombardi
@kinabalu
Jan 02 2016 02:07
hrmm ever see nthis error before: Error: [$injector:strictdi] AboutController is not using explicit annotation and cannot be invoked in strict mode
Andy Brown
@brownish
Jan 02 2016 02:07
oh that has something to do with ngInject i think,
Andrew Lombardi
@kinabalu
Jan 02 2016 02:08
ugh
Andy Brown
@brownish
Jan 02 2016 02:08
you try to minify or something?
Andrew Lombardi
@kinabalu
Jan 02 2016 02:09
no clue, just running gulp and testing
Andy Brown
@brownish
Jan 02 2016 02:10
ooh im not sure. I think i forked it before they added that. I havent gotten around to added that yet
Andrew Lombardi
@kinabalu
Jan 02 2016 02:15
@brownish something to do with restangular i bet, that’s where I am testing it
Andy Brown
@brownish
Jan 02 2016 02:16
hmm
Andrew Lombardi
@kinabalu
Jan 02 2016 02:16
or maybe not, i removed it and it’s still borked
ugh
Andy Brown
@brownish
Jan 02 2016 02:18
has something to do with this #61
@fesor should be able to help, I know you need to add "ngInject"; some places but im not entirely sure where
Andrew Lombardi
@kinabalu
Jan 02 2016 02:19
it’s actually in there:
Andy Brown
@brownish
Jan 02 2016 02:19
Andrew Lombardi
@kinabalu
Jan 02 2016 02:20
.config(($stateProvider) => { "ngInject"; $stateProvider .state('about', { url: '/about', template: '<about></about>' }); })
Andy Brown
@brownish
Jan 02 2016 02:20
lol
yeah i'm not sure if you need to add that to the controller class or something
Andrew Lombardi
@kinabalu
Jan 02 2016 02:21
ahh, looks like I had stupidly put restangular in the constructor() for some reason, haha
Andy Brown
@brownish
Jan 02 2016 02:21
ahhh lol
you had me scared
like my app was going to break for some weird reason lol
Andrew Lombardi
@kinabalu
Jan 02 2016 02:24
haha
Andrew Lombardi
@kinabalu
Jan 02 2016 17:59
hrmm .. how do I define a function that can be called from the template. i.e. if I have data-ng-click=“submit()” then I am assuming inside of the controller I can define something like submit() { console.log(‘hi’); }
Sergey Protko
@fesor
Jan 02 2016 18:02
class MyComponentController {
    submit() {
         console.log(‘hi’);
    }
}

angular
    .module(‘app’)
    .component(‘myComponent’, {
         template: `
               <button ng-click=“myComponent.submit()”>Do Stuff!</button>
         `,
         controller: MyComponentController
    })
read about controllerAs
Andrew Lombardi
@kinabalu
Jan 02 2016 18:05
@fesor ahh so in the starter the controllerAs is ‘vm’ … so would I use vm.submit() in this instance?
Sergey Protko
@fesor
Jan 02 2016 18:05
yep
if you use .component helper, and you doesn’t specify controllerAs it just uses component name as controller’s alias
Andrew Lombardi
@kinabalu
Jan 02 2016 18:19
@fesor, thanks. now going to figure out how to properly pull form elements that have been identified with data-ng-model :)
Andrew Lombardi
@kinabalu
Jan 02 2016 18:24
ahh data-ng-model=“vm.query” and good to go
Andrew Lombardi
@kinabalu
Jan 02 2016 18:38
@fesor are you using jspm or webpack?
Sergey Protko
@fesor
Jan 02 2016 20:48
webpack
just had no time to try jspm