These are chat archives for AngularClass/NG6-starter

3rd
Feb 2016
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:13

Hey guys, I'm using the boilerplate ng6-starter, I can't seem to figure out how to have a component inherit the parents scope. The same as we would do with regular angular. <directive></directive>

{restrict: 'E', bindings: {}, scope :false, (...)}
Does that work in the same way? How do I catch the scope in the child controller?

sorry for the bad identation/presentation first time using gitter
Sergey Protko
@fesor
Feb 03 2016 09:17
@icylabsDev pass data via attributes
instead of making unisolated component
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:17
but then I'll end up with a bunch of bindings
is that a good practice?
for lets say more than 3/4 bindings?
Sergey Protko
@fesor
Feb 03 2016 09:18
@icylabsDev what do you mean by bunch of bindings?
@icylabsDev this only means that you have some problems with decomposition of your data
I prefer to pass one object with part of app state
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:19
well lets say I have to access 2 methods and 1 var in the child controller for example "goForward()" "goBackwards()" "currentPage"
I don't need to pass the whole object
Sergey Protko
@fesor
Feb 03 2016 09:20
hm… so you have some kind of pagination component?
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:20
yes
Sergey Protko
@fesor
Feb 03 2016 09:21
<my-pagination on-back=“vm.goBackward()” on-forward=“vm.goForward()” current-page=“currentPage”></my-pagination>
or event
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:21
oh I see
Sergey Protko
@fesor
Feb 03 2016 09:22
<my-pagination on-change=“vm.update(currentPage)” value=“vm.currentPage” total=“vm.pageCount”></my-pagination>
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:22
but just for fun what about scaling in some other example? Theres a threshold where it is actually better to pass the whole object then?
thanks for the help! =)
Sergey Protko
@fesor
Feb 03 2016 09:23
@icylabsDev your components should be reusable as much as possible, but they also should be easy to use.
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:24
ok =) thanks.
I'll try my best!
Sergey Protko
@fesor
Feb 03 2016 09:25
@icylabsDev good luck! Could you share later with solution you came up with?
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:33
yes
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:39
This message was deleted
how do you do that code black thingy
got it
<footer on-back="vm.goBackward" on-forward="vm.goForward" current-page="vm.currentPage"></footer>
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:44
let footerComponent = {
  restrict: 'E',
  bindings: {
    onBack : '=',
    onForward : '=',
    currentPage : '='
  },
  template,
  controller,
  controllerAs: 'vm'
};
class FooterController {
  constructor($http,$scope) {
    this.name = 'footer';
    this.$scope = $scope;
    //access to the bindingVar
    this.$scope.vm.bindingVar
  }
}

FooterController.$inject = ["$http","$scope"];

export default FooterController;
I have a question is that the correct way of doing things? seems like a big hack
Actually I get "RangeError: Maximum call stack size exceeded"
It fires like 10 times
Sergey Protko
@fesor
Feb 03 2016 09:49
Why do you need $scope?
bindings: {
    onBack : ‘&',
    onForward : ‘&',
    currentPage : ‘='
  },
on-back=“vm.goBackward()"
//access to the bindingVar
// bad
this.$scope.vm.bindingVar
// good
this.bindingVar
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:51
=)
Sergey Protko
@fesor
Feb 03 2016 09:51
you should consider to never use $scope in controller
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:51
thank you will try
Sergey Protko
@fesor
Feb 03 2016 09:51
at all
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:52
yes good advice!
it work perfectly like you said
just that I get
Screen Shot 2016-02-03 at 10.53.22.png
Sergey Protko
@fesor
Feb 03 2016 09:54
@icylabsDev this looks like recursion call
also you may find this interesting: i prepared a small example of how to build apps using components: https://github.com/AngularClass/NG6-todomvc-starter
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 09:56
thanks
Diogo Afonso Barroso
@icylabsDev
Feb 03 2016 10:11
yes it was recursion. the names and bindings were wrong
thank you for your help, really cleared my head =)
amazing job with this repo btw
made angular more fun =)
Andrew Lombardi
@kinabalu
Feb 03 2016 17:11
@fesor if you had to define a different API url using NG6-starter, how would you go about it? in the ngbp I had a constant that I manually changed but … that’s fugly
Sergey Protko
@fesor
Feb 03 2016 17:28
@kinabalu what do you mean? Two different API endpoints?
I usually use wrappers around $http service, one for each endpoint
Andrew Lombardi
@kinabalu
Feb 03 2016 17:34
@fesor really it’s just about the URL to the endpoint, one of ‘em e.g. is http://localhost:8080/api/1 and the other is http://staging/api/1, etc. How do you define those without having to change the source at each deploy point?
Sergey Protko
@fesor
Feb 03 2016 17:35
@kinabalu oh, different environments?
I use configs
Andrew Lombardi
@kinabalu
Feb 03 2016 17:35
@fesor yes.
Sergey Protko
@fesor
Feb 03 2016 17:35
wait a minute, will try to find example
Andrew Lombardi
@kinabalu
Feb 03 2016 17:35
@fesor awesome, you’re a life-saver
Sergey Protko
@fesor
Feb 03 2016 17:37
this is not the best way to handle this, but I found it very easy to use.
resolve: {
    root: __dirname + '/frontend',
    alias: {
      'app-config': `${__dirname}/frontend/config/${argv.release ? 'release' : 'local' }.js`
    }
  },
this what I have in my webpack.config.js
you could also use NODE_ENV=production
instead of argv
in my app.js I just point to module app-config, which is just a JSON
// config/local.js
export default {
  APP_DEBUG: true,
  API_ENDPOINT: ‘/app_dev.php/api',
  WS_ENDPOINT: ‘/ws'
}
so when I build project, I can switch what file represents module app-config.
…is it enought?
Andrew Lombardi
@kinabalu
Feb 03 2016 17:41
interesting
Sergey Protko
@fesor
Feb 03 2016 17:42
import config from 'app-config’;

export default angular
    .module('app', [some, deps])
    .constant(config)
    // other stuff
and now you can inject config vars in your services, providers, and anything else
Andrew Lombardi
@kinabalu
Feb 03 2016 17:42
ahh
Sergey Protko
@fesor
Feb 03 2016 17:44
@kinabalu hope this could help you. This solutions is the most easy to work with, but if you know any other approaches I will be glad to here it)
Andrew Lombardi
@kinabalu
Feb 03 2016 17:44
yeah, if i run across, i’ll post here. and how do you build the app? i guess I don’t see where that bit from webpack.config.js goes because I don’t have a resolve function in there right now
Sergey Protko
@fesor
Feb 03 2016 17:56
@kinabalu just place it somewere in webpack.config.js
I juas add alias and nothing more
then just run gulp webpack and all be done.
Andrew Lombardi
@kinabalu
Feb 03 2016 17:59
ahh ok. i’ll try this out here thank you so much!
Sergey Protko
@fesor
Feb 03 2016 18:02
@kinabalu you are welcome)