These are chat archives for angular/angular.js

2nd
Jan 2017
Matt
@TheeMattOliver
Jan 02 2017 01:29
Would anyone like to look at an Angular app I'm working on and tell me why my client-side routing will not render my static html files? I don't want to use Jade. My server routes are all working, but on the client side I 404 whenever I try to load the resources.
Eugene Serkin
@jeserkin
Jan 02 2017 07:13
@TheeMattOliver "would anyone like to" - doubtful, "can anyone look" - on the other hand would be more correct way to say it :) So where is the link? Or what should we look at?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 10:31
How can I get the option inside my filter like : ng-options="option in app.list | filter:app.myFilter(option, position)"
I get option = undefined
With this filter: ng-options="option in app.list | filter:app.myFilter"
I get function myFilter(item) { }... But how can I keep item and add extra parameters?
mohitgarg23
@mohitgarg23
Jan 02 2017 10:41
hi
Eugene Serkin
@jeserkin
Jan 02 2017 11:15
@Elfayer iirc, ng-options="option for option in app.list | filter:app.myFilter(option, position)"

From docs:

for array data sources:
label for value in array
for object data sources:
label for (key , value) in object

Those are minimal criterias as far as I can tell

@mohitgarg23 hi
Frederik Prijck
@frederikprijck
Jan 02 2017 11:21
@TheeMattOliver Have you tried reproducing the problem in a plunkr ?
That's pretty much the first step in order to understand what's going on.
I can and am willing to take a look at it, but only if it's not a bloated app.
Mohammad Wali
@mohammadwali
Jan 02 2017 11:39
hey guys
do we have any way to handle dynamic row heights with md-virtual-repeat ?
Frederik Prijck
@frederikprijck
Jan 02 2017 11:41
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 11:57
@jeserkin The problem is the filter that doesn't get the values I'm looking for
Frederik Prijck
@frederikprijck
Jan 02 2017 11:58
@Elfayer Did you modify the code as @jeserkin said ?
ng-options="option for option in app.list | filter:app.myFilter(option, position)"
But what is app.myFilter ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:00
@frederikprijck I reduced the synthax, here is the real one: option.id as option.name for option in app.list | filter:app.myFilter(option, position) track by option.id
Frederik Prijck
@frederikprijck
Jan 02 2017 12:03
So what is app.myFilter ?
And you can't pass the option to filter afaik.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:04
function myFilter(item, position) {
        // Display only if the item.id isn't contained in selected array
        return vm.selected.indexOf(item.id) == -1;
    }
@frederikprijck Yep that's my problem
Frederik Prijck
@frederikprijck
Jan 02 2017 12:04
So whay are you trying to do ?
Coz to me, that doesn't make any sense.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:05
I'm trying to hide the selected items to other dropdowns showing the same list.
Frederik Prijck
@frederikprijck
Jan 02 2017 12:05
What is vm in vm.selected.indexOf(item.id) == -1;
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:05
var vm = this;, it's like my controlelr scope
Frederik Prijck
@frederikprijck
Jan 02 2017 12:05
so what you want is this:
function myFilter(items, position) {
        // Display only if the item.id isn't contained in selected array
        return items.filter(item => vm.selected.indexOf(item.id) == -1);
    }
So you apply a filter to the entire collection
and reduce the collection to only those items that should be looped over.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:07
that doesn't work because it returns a new set of the array.
And the ng-model breaks, see : https://jsfiddle.net/rdkqw5gt/
(it's an old filter I tried, but it's doing what you say)
Frederik Prijck
@frederikprijck
Jan 02 2017 12:09
Dno what that fiddle is doing tbh @Elfayer
What's not working ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:11
when you select a value on the first dropdown, this option shouldn't be available on the second one (this is working), but when you select a value on the second dropdown( and the frst one already have one), the values in the selected array goes to [null, null]
Frederik Prijck
@frederikprijck
Jan 02 2017 12:13
I guess what you're doing is abit wrong.
But let me check it.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:14
I'm sure it is ^^
Frederik Prijck
@frederikprijck
Jan 02 2017 12:18
And you realy need to do this using a filter @Elfayer ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:18
nop
I now how to do this using ng-repeat and ng-hide, but I heard it's better to use ng-options, so I'm trying to make it work with it...
Frederik Prijck
@frederikprijck
Jan 02 2017 12:20
What's the use of keep ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:22
I should remove all the selected options, but not if it's the selection of the dropdown I'm filtering, otherwise it loses its selection.
(I don't know if that makes sense)
Frederik Prijck
@frederikprijck
Jan 02 2017 12:24
K
So we have this so far: https://jsfiddle.net/rdkqw5gt/3/
That's the same result as ur code, right ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:25
yep
Frederik Prijck
@frederikprijck
Jan 02 2017 12:30
Who told u to use ng-options for this btw ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:31

It's in the doc : https://docs.angularjs.org/api/ng/directive/ngOptions

In many cases, ngRepeat can be used on <option> elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits:

  • more flexibility in how the <select>'s model is assigned via the select as part of the comprehension expression
  • reduced memory consumption by not creating a new scope for each repeated instance
  • increased render speed by creating the options in a documentFragment instead of individually
Frederik Prijck
@frederikprijck
Jan 02 2017 12:32
Where does the docs say to use it in a situation like this ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:33
well, it just says that it's better to use ng-options on a <select> for some reasons. While ng-repeat can be used anywhere.
Frederik Prijck
@frederikprijck
Jan 02 2017 12:34
Ye that's true.
But I'm unsure if what you're trying to do is the easiest using a filter on ng-options.
Afaik it's not working because of the filter being triggered and resetting the ng-model
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:35
right^^ not the easiest, I just think it'd be so stupid that it is not possible...
Not possible to achieve the same using no-options
right
Frederik Prijck
@frederikprijck
Jan 02 2017 12:36
I'm not sure you should think it's stupid that it's not working.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:36
That's why I tried another synthax of filter like : list | filter:nameOfTheFilter in which way you just have to return true or false to show or hide a value. But I can't get the correct parameters in that case
Frederik Prijck
@frederikprijck
Jan 02 2017 12:37
Ofcourse u cant.
The filter is applied to the list, not the items in the list.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:38
hm, you can apply it to the item
Frederik Prijck
@frederikprijck
Jan 02 2017 12:38
A watch should allow u to do what u want tho.
What do you mean, you can apply it to the item ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:38
arf a watch against a gn-repeat, I'm not sure :/
Frederik Prijck
@frederikprijck
Jan 02 2017 12:38
I am.
A watch is the easiest solution afaik.
But I'm still thinking about the filter tho.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:39
with this synthax: list | filter:myFilter and no specifications on parameters, you get : function myFilter(item, index) {}
but you can't send it as follow if you need extra parameters : option in list | filter:myFilter(option, extras), you'll get option = undefined
Frederik Prijck
@frederikprijck
Jan 02 2017 12:44
could u edit ur fiddle @Elfayer ?
So i can check it ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:44
sure
here you have the item
and here you don't : https://jsfiddle.net/rdkqw5gt/5/
just sending the option : option in array | filter:arrayFilter(option)
Frederik Prijck
@frederikprijck
Jan 02 2017 12:49
There u have the option, no ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:51
No, it's using the first synthax as you wrote it, see : https://jsfiddle.net/rdkqw5gt/8/
It doesn't send the string : option in array | filter:arrayFilter:option:'toto'
Frederik Prijck
@frederikprijck
Jan 02 2017 12:54
I'd just create a directive with a watch tho.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:54
sounds heavy... Directives should only be used to manipulate dom
Frederik Prijck
@frederikprijck
Jan 02 2017 12:55
component*
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:55
Don't you think ng-repeat is a better way in the end?
Frederik Prijck
@frederikprijck
Jan 02 2017 12:55
sounds heavy... Directives should only be used to manipulate dom
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:55
oh a component, with a watcher...
Frederik Prijck
@frederikprijck
Jan 02 2017 12:55
Use a component
No
A component without a watcher.
using the $onChanges hook
or a directive with a watcher.
Don't you think ng-repeat is a better way in the end?
No.
But you will need an ng-repeat anyway.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 12:57
why? sounds like a nicer way to manage this in the end. You don't have to complexify too much
Frederik Prijck
@frederikprijck
Jan 02 2017 12:57
lol
:)
What I would do is

create a component(directive) with 2 input bindings (scope inputs):

  • items
  • itemsToHide

Hook into the $onChanges (or use a watcher) to handle input changes.

Using directives/components is not complexify'ing things btw.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:00
But you will need an ng-repeat anyway.
Why do you say that ?
Frederik Prijck
@frederikprijck
Jan 02 2017 13:00
Coz you are showing a list of items
hence ng-repeat.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:01
So you'd drop ng-options?^^
Frederik Prijck
@frederikprijck
Jan 02 2017 13:01
no.
the filter.
Using a filter on the html gives you no control over when it's executed, as it's gonna be executed EVERYTIME a digest happens.
using a watcher (or onchanges hook) gives u more control over that .
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:03
so component, no-options and $onChange hook ?
Frederik Prijck
@frederikprijck
Jan 02 2017 13:03
Even tho I still wonder why it's not possible using a filter, I don't think dropping the filter is gonna result in performance loss.
component, options and $onChanges.
But I'm still not 100% sure if it's the way to go.
@gkalpak any idea ? :D
Eugene Serkin
@jeserkin
Jan 02 2017 13:04
Sry guys. Been afk.
Frederik Prijck
@frederikprijck
Jan 02 2017 13:05
@Elfayer U never use directives ?
Or you only use components ?
Eugene Serkin
@jeserkin
Jan 02 2017 13:05
Isn't it one and the same? :D
never use directives == only use components :D
Frederik Prijck
@frederikprijck
Jan 02 2017 13:05
Well he said:
sounds heavy... Directives should only be used to manipulate dom
@jeserkin No.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:06
@frederikprijck now comes the best part, this dropdowns are in a table =) How do I make a row component in angular ?
I come from Angular 1.4, but I'd prefer to use component syntax now.
Eugene Serkin
@jeserkin
Jan 02 2017 13:06
component is same directive
Frederik Prijck
@frederikprijck
Jan 02 2017 13:06
component === directive.
why do u need a row component @Elfayer ? It's just a part of the row ?
or an entire row ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:07
a part of the row, but two <td>
I'd rather have a component per row
Frederik Prijck
@frederikprijck
Jan 02 2017 13:07
You can't afaik
Eugene Serkin
@jeserkin
Jan 02 2017 13:07
@frederikprijck I was referencing syntactic sugar not underlying structure :)
Frederik Prijck
@frederikprijck
Jan 02 2017 13:07
:(
And I was refering to this:
never use directives == only use components
Eugene Serkin
@jeserkin
Jan 02 2017 13:08
You referenced wrong person :D
Frederik Prijck
@frederikprijck
Jan 02 2017 13:08
Never use directives could mean never use components
Depending of the person's interpretation of a directive.
Eugene Serkin
@jeserkin
Jan 02 2017 13:08
:)
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:08
omg -- I didn't miss angular, it's like I always have to fight the framework u_u
Frederik Prijck
@frederikprijck
Jan 02 2017 13:09
Weird :)
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:10
soooo, I'll have to use ng-repeat with ng-hide in the end, and use one big controller for the whole table since I can't have a component per line =/
isn't it?
Frederik Prijck
@frederikprijck
Jan 02 2017 13:11
You can't have a component per tr
but you can use components in the tr.
So up to u to make it one giant controller or not.
But I'm still not sure if it's impossible using ur approach @Elfayer
It doesn't look like it, but I aint no filter expert
Eugene Serkin
@jeserkin
Jan 02 2017 13:12

but you can use components in the tr.

better yet use them inside td/th respectively

Frederik Prijck
@frederikprijck
Jan 02 2017 13:12
Well in ng2 we can use tr components iirc.
Not 100% sure tho.
Eugene Serkin
@jeserkin
Jan 02 2017 13:13
This is not ng2 SPARTA
Frederik Prijck
@frederikprijck
Jan 02 2017 13:13
Well, this is Angular :)
Eugene Serkin
@jeserkin
Jan 02 2017 13:14
Same thing :)
Frederik Prijck
@frederikprijck
Jan 02 2017 13:14
And they want to move towards Angular, without any number .
Eugene Serkin
@jeserkin
Jan 02 2017 13:14
Developer vs. AngularJS = Fight
Who wants to move?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:14
you should give a try to VueJS guys, just saying u_u
Eugene Serkin
@jeserkin
Jan 02 2017 13:14
Or Riot
Or Elm
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:15
Can't tell, never tried Riot
Eugene Serkin
@jeserkin
Jan 02 2017 13:15
There is a ton of frameworks
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:15
VueJS got inspiration from Elm I think
Frederik Prijck
@frederikprijck
Jan 02 2017 13:15
No need @Elfayer
Eugene Serkin
@jeserkin
Jan 02 2017 13:15
It is all based on developers view of what they prefer to use.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:15
VueJS is the best out there =)
Frederik Prijck
@frederikprijck
Jan 02 2017 13:15
No problems using angularjs for me.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:15
perf & API
Frederik Prijck
@frederikprijck
Jan 02 2017 13:15
The best is relative.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:15
even better perf than react ;)
Frederik Prijck
@frederikprijck
Jan 02 2017 13:15
And don't compare vue performance when writing code like that :)
Angular 2 is faster then react.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:16
no madder how you write it
Eugene Serkin
@jeserkin
Jan 02 2017 13:16

VueJS is the best out there =)

You might have chosen wrong room for that discussion :D

Frederik Prijck
@frederikprijck
Jan 02 2017 13:16
Idd.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:16
but you have looots of optimization to work on
Frederik Prijck
@frederikprijck
Jan 02 2017 13:16
Angular > *
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:16
@jeserkin just try it =P
Eugene Serkin
@jeserkin
Jan 02 2017 13:16
Why?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:16
I have done 2y of angular
so far
1y of vue, I prefer vue, by far
Frederik Prijck
@frederikprijck
Jan 02 2017 13:17
And u just started using components @Elfayer ?
Not sure if the issue is the framework.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:17
and 3months of angular 2 also
Eugene Serkin
@jeserkin
Jan 02 2017 13:17
What have you done for 2y in angular?

And u just started components ?

You stole my point :D

Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:17
Oo
it's comes out from 1.5 guys
Eugene Serkin
@jeserkin
Jan 02 2017 13:17
Yes. It did.
And angular2 came out in september
So what?
Frederik Prijck
@frederikprijck
Jan 02 2017 13:18
@Elfayer 1.5 was in beta in 2015.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:18
vue have it natively from the beginning (alright it's newer), I'm not saying angular is wrong, I was a huge fan, but it had its time
Eugene Serkin
@jeserkin
Jan 02 2017 13:18
It still was known, that components will come out with it
Frederik Prijck
@frederikprijck
Jan 02 2017 13:18
@Elfayer Angular1 is still getting better.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:19
the framework is hard as hell
Frederik Prijck
@frederikprijck
Jan 02 2017 13:19
But if you are just starting using components in angular, I guess you still need to learn alot.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:19
you can't defend that
Frederik Prijck
@frederikprijck
Jan 02 2017 13:19
If it's hard, you aren't their yet.
It is hard to master.
I won't deny that.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:19
yep
Eugene Serkin
@jeserkin
Jan 02 2017 13:19
I like ng2 only for binding to typescript and new standard features. Everything else is plain old angularjs + it still all transpiled to plain vanilla js
Frederik Prijck
@frederikprijck
Jan 02 2017 13:20
Yep, I'm doing both ng1 and 2 and my code is kinda identical.
Apart from some parts that is.
So stop blaming angular 1 @Elfayer and start mastering it using the sourcecode nstead of reading posts online.
Coz ye, imo alot of posts are not great
and will guide u towards directives, $scope etc.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:22
I'm not reading posts, see I tried. I have my opinion.
I'm not blaming angular1, I was a fan of it, again.
but today it's changing
I think angular1 had a lot of good ideas.
Frederik Prijck
@frederikprijck
Jan 02 2017 13:23
Today?
Coz of the issue u have ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:23
no
Frederik Prijck
@frederikprijck
Jan 02 2017 13:24
Anyone uses what he wants, that's for sure.
Angular > * , but that's my opinion.
But I won't join any vue/react room to go tell the guys they should try angular :P
So what would you tell me if I would let u try convince me @Elfayer ?
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:26
I wasn't at first, I'm just frustrated to realize it's still complicated to make something work using angular1. I'm certainly not the best at it, not sayin' u_u. But still, it's been 2 days I'm stuck on this, and so far I didn't find an easy solution like I missed something.
Eugene Serkin
@jeserkin
Jan 02 2017 13:29
@Elfayer wrong again. JavaScript is complicated. If you want easy, try Java. You have one JVM and your code should work there. That is it. With JavaScript you have different browsers, different behaviour and different versions. Some is covered by angular and some still requires developer to main it.
I do not like some angular1 features, but it doesn't mean, that I will go back to jQuery, just because of the few bumps in the road.
Rémi Vanrenterghem
@Elfayer
Jan 02 2017 13:33
I won't go back to jQuery either ;)
Frederik Prijck
@frederikprijck
Jan 02 2017 13:33
@Elfayer use a watch.
Eugene Serkin
@jeserkin
Jan 02 2017 13:36
If only all this talk in chat and complains would be golden code, then I could probably have millions by now :D
Frederik Prijck
@frederikprijck
Jan 02 2017 13:40
You don't write golden code ?
Such a shame.
Eugene Serkin
@jeserkin
Jan 02 2017 13:52
Yep. I am bad this way.
Youssef26
@Youssef26
Jan 02 2017 13:53
hey guys, I have a question, how do i import data from a service, to the url of another service?
app.factory('someService', ['$http', function($http) {
    return $http.get('someUrl/' + $scope.data.from.another.service)
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
}]);
this doesnt work
in the controller
theOtherService.success(function(data) {
        $scope.data = data;
also in the controller, do i do this JS app.controller('MainController', ['$scope', 'someService', 'theOtherService, function($scope, weather) {
or
app.controller('MainController', ['$scope',['someService', 'theOtherService'], function($scope, weather) {
Youssef26
@Youssef26
Jan 02 2017 14:01
@frederikprijck help?
C.A. Reis
@drcharlie98
Jan 02 2017 14:02
hi...
Frederik Prijck
@frederikprijck
Jan 02 2017 14:02
@Youssef26 Read the docs.
dont use .success and .error.
C.A. Reis
@drcharlie98
Jan 02 2017 14:02
I wonder why I don't seem to get to the main chat
Frederik Prijck
@frederikprijck
Jan 02 2017 14:02
What main chat @drcharlie98
Youssef26
@Youssef26
Jan 02 2017 14:03
the problem is that i dont understand the docs
im a very slow learner :/
C.A. Reis
@drcharlie98
Jan 02 2017 14:04
:) lol somehow when I click on the main chat room I see some code I tried to ask help about, but nothing else
Frederik Prijck
@frederikprijck
Jan 02 2017 14:05
app.factory('someService', ['$http', function($http) {
   return {
      getData(params) : function() {
         return $http.get('someUrl/' + params);
      } 
   }
}]);
And use it:
app.controller('MainController', ['$scope','someService', 'theOtherService', function($scope, someService, theOtherService) {
    someService.getData($scope.data.from.another.service).then(function(data) {  
      $scope.data = data; 
  };
}
That's what u need @Youssef26
C.A. Reis
@drcharlie98
Jan 02 2017 14:06
I am only a beginner, taking the first little project, but it looks pretty ugly
Frederik Prijck
@frederikprijck
Jan 02 2017 14:06
I'm only pasting it to help him.
And what's so ugly about it @drcharlie98 ?
C.A. Reis
@drcharlie98
Jan 02 2017 14:06
good on you for doing it :)
Youssef26
@Youssef26
Jan 02 2017 14:06
and the other service stays the same?
thank you fredrik :3
Frederik Prijck
@frederikprijck
Jan 02 2017 14:07
@Youssef26 I have no idea what ur other service looks like.
Looking at ur code, I doubt it's going to stay the same.
Youssef26
@Youssef26
Jan 02 2017 14:08
app.factory('OtherService', ['$http', function($http) {
    return $http.get('someUrl')
        .success(function(data) {
            return data;
        })
        .error(function(err) {
            return err;
        });
}]);
Frederik Prijck
@frederikprijck
Jan 02 2017 14:08
no.
You should be able to fix that by looking at the changes I did.
Youssef26
@Youssef26
Jan 02 2017 14:08
do i do the same as the one you pasted above?
ok..
Frederik Prijck
@frederikprijck
Jan 02 2017 14:09
But read the docs
Youssef26
@Youssef26
Jan 02 2017 14:09
i see now, thanks :D
Frederik Prijck
@frederikprijck
Jan 02 2017 14:09
untill u understand them
coz we aint gonna make the app for u.
Youssef26
@Youssef26
Jan 02 2017 14:09
where in the docs?
:P
Frederik Prijck
@frederikprijck
Jan 02 2017 14:09
Everywhere
Matt Erman
@CodeLiftSleep
Jan 02 2017 16:50
@Youssef26 .success and .error are deprecated...use .then and .catch
Eugene Serkin
@jeserkin
Jan 02 2017 17:15
Or even better $resource(?)
Youssef26
@Youssef26
Jan 02 2017 17:17
I wonder if there is a way to call the getData() every few seconds..
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:43
I prefer to use REstangular myself over $reource
Youssef26
@Youssef26
Jan 02 2017 17:50
      $interval( service.getData().then(function(data) {
              $scope.data = data;
          }), 1000);
did i do something wrong? Angular crashed
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:51
Probably because its calling that function every second...why would you even need to do that?
Youssef26
@Youssef26
Jan 02 2017 17:52
because the data at the service updates each seconds
second*
I tried using setInterval(), that crashed also
sorry for bad english
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:54
what are you trying to do...I guess that should be the first question
Youssef26
@Youssef26
Jan 02 2017 17:54
I am trying to get the JSON from the service, each 1000 ms
and set it to $scope.data
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:55
I know that but why?
Youssef26
@Youssef26
Jan 02 2017 17:55
because the JSON is updated each second...
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:56
I'd probably do it every 5 seconds...change it to 5000
Youssef26
@Youssef26
Jan 02 2017 17:56
crashed..
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:57
whats teh debugger say
the
Youssef26
@Youssef26
Jan 02 2017 17:57
what is that
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:58
Lol...man you are really coding blind aren't you, haha
using Chrome?
Youssef26
@Youssef26
Jan 02 2017 17:58
yeah
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:58
hit F12
Youssef26
@Youssef26
Jan 02 2017 17:58
i know what a debugger is , I was wondering how to get in VS code
Matt Erman
@CodeLiftSleep
Jan 02 2017 17:58
should be a red message in the console
you don't get it in VS Code, you get it in chrome
well, you could, but that is a configuration settings
Youssef26
@Youssef26
Jan 02 2017 17:59
angular.js:12722 TypeError: service.getData is not a function
at new <anonymous> (MainController.js:24)
at Object.e [as invoke] (angular.js:4535)
at N.instance (angular.js:9380)
at I (angular.js:8497)
at g (angular.js:7929)
at g (angular.js:7932)
at angular.js:7809
at angular.js:1682
at r.$eval (angular.js:16251)
at r.$apply (angular.js:16351)
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:00
OK, then its not a function...post the code for service.getData
Youssef26
@Youssef26
Jan 02 2017 18:01
app.factory('service', ['$http', function($http) {
    return {
        getData(param) {
            return $http.get('censoredUrl'+param);
        }
    }
}]);
when i call getData outside the $interval, it works
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:02
is $interval inside a different controller?
Youssef26
@Youssef26
Jan 02 2017 18:02
nope,
I am trying to look at AngularJs docs, I cant seem to find anything of use
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:03
it should be this:
```JS
app.factory('service', ['$http', function($http) {
    return {
        getData: function(param) {
            return $http.get('censoredUrl'+param);
        }
    }
}]);
factory is an object
service is a function
Youssef26
@Youssef26
Jan 02 2017 18:04
'Type expected'
it says this at the : function() part
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:05
do you hae a parameter you are passing in?
have
Youssef26
@Youssef26
Jan 02 2017 18:06
at the moment the paramet is an empty string ''
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:06
you aren't apssing a parameter in
Youssef26
@Youssef26
Jan 02 2017 18:06
that i set in manually when i call getdata
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:06
right
Youssef26
@Youssef26
Jan 02 2017 18:06
i just removed because i thought it was pointless since it didnt affect anything in the url
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:06
in the above example you just called service.getData() no parameter
technically it shouldn't because it just gets set to undefined
but try it
Youssef26
@Youssef26
Jan 02 2017 18:07
I called it with a parameter and still crashed
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:08
put it ni a plunker and post the plunker
its hard to troubleshoot wiohtout trying to run it..proably something simple
Youssef26
@Youssef26
Jan 02 2017 18:08
im on it
nanomoffet
@nanomoffet
Jan 02 2017 18:10
What would cause a directive to fail silently once converted to a component? I stripped it down to absolute basics - empty controller function, string for template, as directive it renders as component there's no template and no errors.
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:10
did you try setting console.logs or stepping through it to see where it is failing?
Frederik Prijck
@frederikprijck
Jan 02 2017 18:11
@nanomoffet incorrect selector ?
Not registered correctly to the module ?
(it's an object instead of a function returning an object)
And yes, have you tried debugging whether or not the constructor or even the $onInit of the controller is called ?
I've also had issues where my component used an incorrect template url
but the template existed, so angular loads that one without throwing a 404.
Frederik Prijck
@frederikprijck
Jan 02 2017 18:16
The template had an ng-if='$ctrl.shouldShow' which won't fail when used with an incorrect controller but won't render the content either as it's undefined, hence falsy.
Matt Erman
@CodeLiftSleep
Jan 02 2017 18:17
@frederikprijck do you have any experience in Ui-Grid? Their gitter isn't very active, having an issue where my cellClass isn't returning properly even though its calculating the right value, the column is blank
Frederik Prijck
@frederikprijck
Jan 02 2017 18:17
Nope :(
@nanomoffet I think the last one got me most of the times when migrating a directive to a component.
nanomoffet
@nanomoffet
Jan 02 2017 18:20

It's weird. I've tried the things you're all mentioning. Breakpoints and console.logs don't even fire within the directive or component. This super basic code works:

app.directive("myDoctor", function () {
        return {
            template:’test’,
            controller: function() {}
        };
    });

And this doesn't:

app.component("myDoctor",  {
            template:’test’,
            controller: function() {}
    });
Frederik Prijck
@frederikprijck
Jan 02 2017 18:23
nanomoffet
@nanomoffet
Jan 02 2017 18:24
...I'm so confused, then. It's a .net project, I didn't think to try them outside that context. I don't get why the component version isn't rendering in the actual project then.
Frederik Prijck
@frederikprijck
Jan 02 2017 18:25
It's always a good idea to pull a problem out its context
nanomoffet
@nanomoffet
Jan 02 2017 18:25
Yeah, thanks! At least I now know I'm not going crazy and missing something in the angular code
Frederik Prijck
@frederikprijck
Jan 02 2017 18:26
If it's public I can have a look
I can read .NEt pretty fluently unless it's to old.
:D
nanomoffet
@nanomoffet
Jan 02 2017 18:27
I would totally take you up on that if it was a public project
Any thoughts on where I should look without being able to see it?
Frederik Prijck
@frederikprijck
Jan 02 2017 18:28
A tip: pulling things outside it's context often brings u to the conclusion that the problem is not what u think it is :D
Well, is it realy such a small component as the one u pasted?
If not, start with making it that simple.
nanomoffet
@nanomoffet
Jan 02 2017 18:29
I have it pared down to that simple in .net to troubleshoot, which is why I was confused with why it still wasn't rendering
Frederik Prijck
@frederikprijck
Jan 02 2017 18:30
What do you mean with 'in .NET' btw ?
So this code is literaly from ur code base?
app.component("myDoctor",  {
            template:’test’,
            controller: function() {}
    });
nanomoffet
@nanomoffet
Jan 02 2017 18:31
the actual angular file within the solution.
Yes, within my code base
Frederik Prijck
@frederikprijck
Jan 02 2017 18:31
The quotes for the template are odd tho, but that shouldn't silently fail it. I guess it should throw an exception.
nanomoffet
@nanomoffet
Jan 02 2017 18:31
it's stripped down - there's some bindings and a real template that are missing from the directive pre-conversion, but I was trying to isolate the issue
Frederik Prijck
@frederikprijck
Jan 02 2017 18:38
Can you check them @nanomoffet ?
That's about all I can think of what can be wrong with such a small component ...
nanomoffet
@nanomoffet
Jan 02 2017 18:39
Yeah, tried ', ", or the ` which are a leftover from the inline template it had. They all do the same. Work for directive, not component.
Tried clearing cache in case it was a browser issue, no dice.
Frederik Prijck
@frederikprijck
Jan 02 2017 18:40
And you don't have the old directive registered using the same name ?
Dylin Maust
@dylin-maust
Jan 02 2017 18:40

What's the recommended approach into breaking a large single page into smaller functional areas? Currently, I have a pretty large HTML page with many form fields. Visually, this page is split up into multiple cards, with relevant form fields inside each card. I'd like to separate those cards out into separate components, but also some of those card bindings depend on values from other cards. And ultimately, I need to serialize all those form fields into one object to POST to the web service.

Is refactoring these cards into separate'components the way to go? I'm not as familiar with data binding from parent to child (I'm using two-way binding.. shame I know).

Frederik Prijck
@frederikprijck
Jan 02 2017 18:40
The directive is part of your output javascript code ? (dno if ur using some bundler or not)
@TimeBomb006 Yes, and avoid two way binding.
nanomoffet
@nanomoffet
Jan 02 2017 18:41
the old directive exists, but in a different directory. There is bundling. I have a boolean switch to compile the component version, but for testing I've been switching the code from directive to component within the file the bundler is pointing to
Frederik Prijck
@frederikprijck
Jan 02 2017 18:41
If you want to know the way to go, don't use two way databinding. @TimeBomb006
@nanomoffet Are you also registering that directive to app ?
If yes, is it the same name as the directive ? (highly unlikely tho)
@nanomoffet Can you check if the directive is part of the bundled output ?
nanomoffet
@nanomoffet
Jan 02 2017 18:42
yeah, I'll check
Frederik Prijck
@frederikprijck
Jan 02 2017 18:42
The component I mean @nanomoffet :D
nanomoffet
@nanomoffet
Jan 02 2017 18:43
sure
yeah, the component file is being included. i can see it in the source
Dylin Maust
@dylin-maust
Jan 02 2017 18:45
Yeah, I know two way binding it's terrible. Unfortunately, we're under a bit of a time crunch and this is my first major Angular project. So I'm not sure if it makes sense to refactor at this point, despite the bad practices..
Which is funny because I configured the project to use webpack, ES6 modules and classes, and it's generally pretty modern, but I've neglected the core functionality by not using one-way/one-time binding.
Frederik Prijck
@frederikprijck
Jan 02 2017 18:48
But u're asking for best practises.
So don't use them is what you get :D
Other then that, yes put them in components but don't use two way bindings anymore .
Dylin Maust
@dylin-maust
Jan 02 2017 18:49
I understand. And I will definitely spend some off-hours looking into it.
Frederik Prijck
@frederikprijck
Jan 02 2017 18:49
There aint no off-hours @TimeBomb006 . Being an Angular developer is no job, it's a lifestyle.
Eugene Serkin
@jeserkin
Jan 02 2017 18:50
It is own personal vice :D
Jestoni Salonga
@jcsgithub
Jan 02 2017 18:56

Hi guys, need help getting multiple images and creating 1 zip file.

I have an array of external image links:

var myImages = ["sample.com/1.jpg", "sample.com/2,jpg"];

I want to get the image data from each links and use each image data in creating a zip file using JSZip . My problem right now is generating those image data. Note that I'm doing this on the client side. Is this possible? Any ideas in implementing it much better?

Frederik Prijck
@frederikprijck
Jan 02 2017 19:00
@jcsgithub something like:
$http.get(url, {responseType: "arraybuffer"})
    .then(function(data) {
        createUrZipWithTheContent(data);
    }
)
Or if you want to have multiple images in the same zip you can do:
var promises = [
  $http.get(url, {responseType: "arraybuffer"}),
  $http.get(url2, {responseType: "arraybuffer"})
];
$q.all(promises)
    .then(function(data) {
        createUrZipWithTheContentOfBothImages(data);
    }
)
In the last sample, data is an array.
Jestoni Salonga
@jcsgithub
Jan 02 2017 19:06
I've tried your example. It seems it would work, but my links are all 'HTTP' and now there's this HTTPS insecure error.
Frederik Prijck
@frederikprijck
Jan 02 2017 19:06
Your site is served over https and ur calling http ?
Jestoni Salonga
@jcsgithub
Jan 02 2017 19:07
Yea, it's just that I got my links by scraping another website.
https to http is not allowed.
Other then that I got no clue.
Jestoni Salonga
@jcsgithub
Jan 02 2017 19:11
Thanks for that, you gave me some ideas. I'll investigate further or just find another workaround.
Frederik Prijck
@frederikprijck
Jan 02 2017 19:11
No problem.
Goodluck :)