These are chat archives for AngularClass/NG6-starter

3rd
Jan 2016
Andrew Lombardi
@kinabalu
Jan 03 2016 04:24
so the .component is basically just a .directive right?
Andrew Lombardi
@kinabalu
Jan 03 2016 06:36
@brownish or @fesor I’m racking brain trying to figure out how I call a factory/service from within a controller? I’m using the NG6-starter of course, and if I define it in the regular .js file, I don’t know how to access from within the controller, not sure on the hierarchy of things here
Sergey Protko
@fesor
Jan 03 2016 09:49

@kinabalu yes, .componen is simplified `.direcive’

I don’t know how to access from within the controller

Just inject in controller’s constructor:

class MyComponenController {
    constructor(myService) {
         this.myService = myService;
    }
}
Joe Gatt
@joegatt
Jan 03 2016 11:05
Is there a list somewhere of github repositories that are based off NG6 Starter? It would be great to share solutions.
Sergey Protko
@fesor
Jan 03 2016 13:59
I think there isn’t.
basicly you should check projects which uses webpack and babel
p.s. I’ll try to prepare todomvc example tomorrow
Joe Gatt
@joegatt
Jan 03 2016 15:01
@fesor a todomvc example is a great idea.
Andrew Lombardi
@kinabalu
Jan 03 2016 15:10
inject like this @fesor? HeroController.$inject = ['QueryService'];
because just putting “myService” in there seems to just throw an error
Sergey Protko
@fesor
Jan 03 2016 15:14
there is preconfigured ngAnnotate so you can also add this:
class MyComponentController {
    constructor(depService) {
         “ngInject”;
         this.dep = depService;
    }
}
and ngAnnotate will handle this
in #64 i also added ng-strict-di to not forget about this stuff
Andrew Lombardi
@kinabalu
Jan 03 2016 15:18
that works great, and so damned easy
and can you do the same with a factory class? is it best to define factories in their own classes and use the import methodology just like component and controller?
Sergey Protko
@fesor
Jan 03 2016 15:20
hm…. what do you mean?
import FooBarService from ‘./fooBar’;

export default function ($http, $foo, $bar) {
    “ngInject”;
    return new FooBarService($http, $foo, $bar, ‘some other stuff’);
}
Andrew Lombardi
@kinabalu
Jan 03 2016 15:21
if I wanted to inject Restangular or some other dep into .factory('QueryService', function() {
… would it be easier to create a class for the factory and do the constructor as well
Sergey Protko
@fesor
Jan 03 2016 15:21
this is how my factories is look like
why do you need this factory anyway?
Andrew Lombardi
@kinabalu
Jan 03 2016 15:22
i was under the impression that using factory / service was the best way to make calls to REST services and such using angular
Sergey Protko
@fesor
Jan 03 2016 15:23
Hm… I just saying that you in most of cases you need only .service
so… you need an example of service?
Andrew Lombardi
@kinabalu
Jan 03 2016 15:24
i might, yea :)
Sergey Protko
@fesor
Jan 03 2016 15:24
well… it just pretty the same as controller
class FooBarService {
    constructor(rectangular) {
         “ngInject”;
         this.restangular = restangular;
    }

    fooBar() {
         // do stuff
    }
}
BUT - it waits for code review)
Andrew Lombardi
@kinabalu
Jan 03 2016 15:28
thanks @fesor. I’ll look at your todomvc example as well.
is there a difference between .service and .factory? just the way they are initialized?
Sergey Protko
@fesor
Jan 03 2016 15:47
hm...
yes, only the way it initialized
in case of factory - just function call is performed
in case of service - new instance created (via new) but in javascript constructors can return anything they want
Andrew Lombardi
@kinabalu
Jan 03 2016 15:50
gotcha gotcha. well this todomvc thing is really well done, lots of good examples too
Sergey Protko
@fesor
Jan 03 2016 16:05
There is some things that I don’t like
will update readme
tonight
Andrew Lombardi
@kinabalu
Jan 03 2016 16:32
we’re always critics of our own code :P
Andrew Lombardi
@kinabalu
Jan 03 2016 18:07
@fesor the vendors.js stuff in the todomvc and the changes to webpack.config.js — is that part of some newer release of the starter?
Sergey Protko
@fesor
Jan 03 2016 19:15
well… I will add PR with this changes (also add webpack-dev-server to speedup incremental builds)
actually in my day-to-day work I use very modified version of ng6-starter)
Andrew Lombardi
@kinabalu
Jan 03 2016 19:16
i’ll bet. looks like a nice upgrade to what’s there currently
i wonder if that might be why I’m getting an error trying to have a service going … getting this: Error: [$injector:unpr] Unknown provider: QueryServiceProvider <- QueryService
Sergey Protko
@fesor
Jan 03 2016 19:33
well… how do you call your service?
Andrew Lombardi
@kinabalu
Jan 03 2016 19:34

like this: ` constructor(QueryService) {
"ngInject";
this.QueryService = QueryService;
}

find() {
    this.QueryService.find(this.query);
}

`

Sergey Protko
@fesor
Jan 03 2016 19:35
how do you register your QueryService
Andrew Lombardi
@kinabalu
Jan 03 2016 19:37

kind of copying from your todomvc a bit: `
import angular from 'angular';

import queryService from './queryService';
// import restangular from '../common/3rdparty/restangular';

export default angular
.module('app.services', ['restangular'])
.service({
queryService
});
`

i’ve got the import for services/services.js in the app.js like the todomvc as well
Sergey Protko
@fesor
Jan 03 2016 19:43
service names case sensitive
queryService - this is name of your service)
Andrew Lombardi
@kinabalu
Jan 03 2016 19:46
brilliant.
thank you. it’s all so … confusing :P
Sergey Protko
@fesor
Jan 03 2016 19:50
))
Andrew Lombardi
@kinabalu
Jan 03 2016 20:04
@fesor last one i hope, what in the heck am I screwing up here with restangular: https://gist.github.com/kinabalu/c666abc2503e69bfe286
Sergey Protko
@fesor
Jan 03 2016 20:12
Restangular
again, case sensitive
Andrew Lombardi
@kinabalu
Jan 03 2016 20:14
everywhere?
Sergey Protko
@fesor
Jan 03 2016 20:15
javascript is case sensitive
so yes.
just directive’s name case insensitive becouse HTML is case insensitive to.
Andrew Lombardi
@kinabalu
Jan 03 2016 20:23

@fesor and the import would be import ‘Restangular’ in `// 3rdparty/restangular.js
import 'lodash';
import 'restangular';

export default 'restangular';
`

Sergey Protko
@fesor
Jan 03 2016 20:36
nope, only service name
module name is restangular
Andrew Lombardi
@kinabalu
Jan 03 2016 20:40
@fesor - thanks. this is all so … foreign sometimes :+1:
Sergey Protko
@fesor
Jan 03 2016 20:41
)