These are chat archives for angular/angular.js

24th
Jan 2017
Matmo10
@Matmo10
Jan 24 2017 00:30
How is it possible that dashboardVm.tableFilterFn is being invoked?
<tr class="table-entry" ng-if="false"
ng-repeat="tableEntry in dashboardVm.tableData |  filter:dashboardVm.tableFilterFn | orderBy:dashboardVm.tableSorter:!dashboardVm.isSortOrderAscending track by tableEntry.entryId">
With ng-if=“false” …. it shouldn’t be invoked right? But it is...
(angular 1.5.8) This is like angular 101…how could this be possible lol
Matmo10
@Matmo10
Jan 24 2017 02:12
Even in this example, vm.getData() is called:
<div ng-if="false">
<tr ng-repeat="data in vm.getData()"><td>...</td></tr>
</div>
wtf?
Jan 24 2017 06:49

Hello, I have a question. I write in angular 1.5.8, ES6, Karma(jasmine). I would like to make a couple of tests to do this, but I don't have any idea how can I test this (and similar) method:

checkVideo(videoId) {
return this.$http({ method: 'GET', url: this.createRequestUrl(videoId) }).then((response) => { if (response.data.items.length === 0) { return this.$q.reject();
}

return this.$q.resolve({ info: response, id: videoId }); }); } How can I test if it works? I'm new with unit testing and angular. Maybe someone knows some good articles about it? I couldn't find anything suitable in google. (maybe I just don't know so well english and just haven't idea what I need to find) In addition, I want to ask if these tests are well written: import { YoutubeService } from './youtube.service.js'; let service; describe('Youtube api service', () => { beforeEach(angular.mock.module('app')); beforeEach(() => { service = new YoutubeService(); }); it('should get an ID from long youtube link', () => { let link = 'https://www.youtube.com/watch?v=TFeSNOdNtyo'; let id = service.getId(link); expect(id).toBe('TFeSNOdNtyo'); }); it('should get an ID from short youtube link', () => { let link = 'https://www.youtu.be/TFeSNOdNtyo'; let id = service.getId(link); expect(id).toBe('TFeSNOdNtyo'); }); it('should get an ID from same ID', () => { let inputID = 'TFeSNOdNtyo'; let id = service.getId(inputID); expect(id).toBe('TFeSNOdNtyo'); }); }); Adrian Kopytko @adriankopytko Jan 24 2017 06:54 Any tips or something? Frederik Prijck @frederikprijck Jan 24 2017 06:55 The tests look fine so far @Shimizo , although you could move the let service declaration inside the describe. The only think I don't like about the tests is you're not making use of angular in these tests. So you either don't need to mock the angular module and leave it out, or fetch the YoutubeService instance using angular's DI. Adrian Kopytko @adriankopytko Jan 24 2017 06:57 @frederikprijck Thank you, but I don't know what I should do. I'm totally newbie. Okay, I removed beforeEach(angular.mock.module('app'); Still works, fine. Adrian Kopytko @adriankopytko Jan 24 2017 07:02 I have one test more, which does not pass: it('should return a video object with response and ID', () => { let id = 'TFeSNOdNtyo'; let object = service.checkVideo(id); expect(object.response.data.items.length).greaterThan(-1); expect(object.videoId).toBe('TFeSNOdNtyo'); }); It should test my method I pasted above. Error: TypeError: this.$http is not a function

What should I do?
Frederik Prijck
@frederikprijck
Jan 24 2017 07:04
@Shimizo to remove that error you should use my first approach in the gist, the one called with angular. That way angular can instantiate the $http dependency. Adrian Kopytko @adriankopytko Jan 24 2017 07:09 @frederikprijck Okay, I have it. Now I should make my last (earlier with$http error) test async?
Frederik Prijck
@frederikprijck
Jan 24 2017 07:14
You should mock the $http call tbh, or use Jasmine spies. Adrian Kopytko @adriankopytko Jan 24 2017 07:21 I don't exactly know how I should mock the$http call, can you show me an example?
Frederik Prijck
@frederikprijck
Jan 24 2017 07:23
Sebastian Wierzbicki
Jan 24 2017 07:53
Hi guys...
I saw in some project
two files
package.json
and bower.json
is it correct to use both tools in project?
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 07:59
bower.json is used by bower (https://www.npmjs.com/package/bower) when running bower install
package.json is used by npm when you run npm install
and yes, it is correct to use both tools
Sebastian Wierzbicki
Jan 24 2017 08:03
but this tool are different? I was thinking that we could choose one of them
and do the same job
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 08:05
@devseba_twitter a little differrent, if you just focus on front-end, i think bower is enough
Frederik Prijck
@frederikprijck
Jan 24 2017 08:20
@nguyenkhuyen @devseba_twitter I only use NPM atm.
Bower might be a little bit easier to step in, but I don't use it anymore. Projects such as angular2 don't even support bower anymore. Alot of people also consider it "dead" (where dead is a little bit harsh, but npm has so many advantages over bower that one could consider it irrelevant in modern web development projects).
WuYang
@yy7054wyq5
Jan 24 2017 08:26
But bower can specify a install folder. npm ?
How?
Frederik Prijck
@frederikprijck
Jan 24 2017 08:33
It looks like you can't structurely change the install folder, but you can specify it on a dependency basis I guess (but I don't think you should do that)
But never the less, I don't see any reason for using bower just for that particular reason.
WuYang
@yy7054wyq5
Jan 24 2017 08:35
Ok,i hope npm will plus it~
Frederik Prijck
@frederikprijck
Jan 24 2017 08:35
I don't think it's a feature you should need with npm. (atleast not for most things)
WuYang
@yy7054wyq5
Jan 24 2017 08:36
• .- ||||
-.- |||
Frederik Prijck
@frederikprijck
Jan 24 2017 08:37
Have alook at https://gofore.com/stop-using-bower/ @yy7054wyq5
WuYang
@yy7054wyq5
Jan 24 2017 08:38
I hava stop use bower...
Sebastian Wierzbicki
Jan 24 2017 08:39
WuYang
@yy7054wyq5
Jan 24 2017 08:40
I hava a another problem.When i run 'webdriver-manager update' in cmd.The cmd show me a msg.
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 08:40
i switched to yarn , and next will be webpack :smile:
WuYang
@yy7054wyq5
Jan 24 2017 08:41
The msg is :
SyntaxError: Unexpected token ...
C:\Users\wuyang\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\built\lib\cli\logger.js:66
info(...msgs) {
^^^
SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:404:25)
at Object.Module._extensions..js (module.js:432:10)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (C:\Users\wuyang\AppData\Roaming\npm\node_modules\protractor\node_modules\webdriver-manager\built\
lib\cli\index.js:8:10)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
webpack is too hard.
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 08:43
agree @yy7054wyq5
WuYang
@yy7054wyq5
Jan 24 2017 08:43
:smile:
Joel Santos
@St3ps
Jan 24 2017 08:51

Hello everyone! I'm trying to build a website inspired in this layout: http://www.buildinamsterdam.com

The main features i'm intending to capture are the style of the page transitions, so the animations. I was refered I could approach this with Angular UI, but i'm looking for a second opinion, I'd like the opportunity to learn Angular but I also am at work and need to convince my boss this is the right path :p
So, can you guys help me please?

Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 08:53
@yy7054wyq5 can you try to uninstall webdriver-manager package and reinstall ?
WuYang
@yy7054wyq5
Jan 24 2017 08:54
I have a try.But the problem still appear.
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 08:55
so weird, i installed and updated successfully in my machine
WuYang
@yy7054wyq5
Jan 24 2017 08:55
My node.js version is 5.1.0
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 08:55
oh, i'm using 6.9.1
WuYang
@yy7054wyq5
Jan 24 2017 08:56
Really? That means i must update the node.js?
Paul "Joey" Clark
@joeytwiddle
Jan 24 2017 08:57
Yes you must.
But you can also complain to the library author ;)
WuYang
@yy7054wyq5
Jan 24 2017 08:59
I have submit this issue to protractor github.
Paul "Joey" Clark
@joeytwiddle
Jan 24 2017 08:59
Looks like it comes from the webdriver-manager package, not protractor
(protractor uses webdriver-manager, but the “bug" is in webdriver-manager, not protractor)
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 08:59
i think you also should consider to upgrade node version too @yy7054wyq5
WuYang
@yy7054wyq5
Jan 24 2017 09:01
I will try. @nguyenkhuyen
Nguyen Khuyen
@nguyenkhuyen
Jan 24 2017 09:01
:+1:
WuYang
@yy7054wyq5
Jan 24 2017 09:01
What do you mean? @joeytwiddle
:smile:
oh,get it.
Paul "Joey" Clark
@joeytwiddle
Jan 24 2017 09:02
Of course, they might say that the bug is with us, for using old versions of Node! :D
WuYang
@yy7054wyq5
Jan 24 2017 09:04
ok.
Sebastian Wierzbicki
Jan 24 2017 10:11
Does exist some book for angularjs learnig but with grunt/bower etc. explanation?
Sebastian Wierzbicki
Jan 24 2017 10:20
Ok i see small chapter about it. Here: https://www.packtpub.com/web-development/angularjs-essentials
Ravi Rajput
@Ravslee
Jan 24 2017 14:54
hi i need help
with angular
Jan 24 2017 14:54
..
Matt Erman
@CodeLiftSleep
Jan 24 2017 14:54
1 or 2?
Ravi Rajput
@Ravslee
Jan 24 2017 14:54
im working on SINGLE PAGE APPLICATION, I integrated facebook share
1
but the share button requires refresh
i am very new to angular Js
give me ideas to achieve it
Jan 24 2017 14:55
Ravi, i can't use satellizer?
Matt Erman
@CodeLiftSleep
Jan 24 2017 14:55
what do you mean needs to refresh?
Matt Erman
@CodeLiftSleep
Jan 24 2017 14:55
to see it?
Jan 24 2017 14:55
sorry *
Ravi Rajput
@Ravslee
Jan 24 2017 14:56
means the page requires refresh , after refresh the fb share button appears
Jan 24 2017 14:56
Satellizer is very simple, try it
Ravi Rajput
@Ravslee
Jan 24 2017 14:57
satellizer is for auth only
i guess
i have a blog page
i put a fb share button,
Matt Erman
@CodeLiftSleep
Jan 24 2017 14:57
can you put it in a function and then just call the function once it loads/
?
Ravi Rajput
@Ravslee
Jan 24 2017 14:57
yes
Matt Erman
@CodeLiftSleep
Jan 24 2017 14:58
try $route.reload Ravi Rajput @Ravslee Jan 24 2017 14:58 fb-sdk inside function Matt Erman @CodeLiftSleep Jan 24 2017 14:58$route.reload()
make sure you inject $route in the controller or component whichever you are using Ravi Rajput @Ravslee Jan 24 2017 14:58 caan you explain me in short , working of$route.reload
yes i injected,
Matt Erman
@CodeLiftSleep
Jan 24 2017 14:59
there is a lot of info there and link to the official documentation of angular about it
Troy Hawley
@troywoy
Jan 24 2017 14:59
Last I knew, you could parse the DOM using Facebooks library to get dynamic buttons to appear after page load. No refresh required.
Ravi Rajput
@Ravslee
Jan 24 2017 14:59
but then whats the use of SPA
if page requires refresh
Erigers
@Erigers
Jan 24 2017 14:59
hello guys, I’m trying to create tabs with nested routes and ui-sref as links. It changes the section just fine but then it reloads the page. It’s been a while since I worked with angular 1 so is this a normal behaviour or should I be on the look out for something else, like reload on state change for example
Matt Erman
@CodeLiftSleep
Jan 24 2017 15:00
it shouldn't require a refresh
because on page refresh you are going to lost any data
lose
Ravi Rajput
@Ravslee
Jan 24 2017 15:00
hmmm
so
Matt Erman
@CodeLiftSleep
Jan 24 2017 15:00
unless you store it somewhere
and then retrieve it
using something like ng-cookies or ng-storage
Ravi Rajput
@Ravslee
Jan 24 2017 15:01
yeah
thanks
Troy Hawley
@troywoy
Jan 24 2017 15:01
Not sure how outdated it is, but it used to be FB.XFBML.parse();, or specifically FB.XFBML.parse(myElement); to get buttons rendered.
Ravi Rajput
@Ravslee
Jan 24 2017 15:02
troy fb provided a code
<div .....
Matt Erman
@CodeLiftSleep
Jan 24 2017 15:02
couldn't you set an ng-show to trigger once that stuff finishied loading?
Ravi Rajput
@Ravslee
Jan 24 2017 15:03
matt problem is fb-sdk is not triggered iguess when i route to some page
which contains fb share button
thats why the Fb share button doesnt appear
and when i refresh, it appears
Matt Erman
@CodeLiftSleep
Jan 24 2017 15:04
hmm...interesting, I don't have a lot of experience with that type of stuff...most of the stuff I do at work and on the side projects I do are not interacting with other API's other than our own
Ravi Rajput
@Ravslee
Jan 24 2017 15:05
@CodeLiftSleep oki :)
Troy Hawley
@troywoy
Jan 24 2017 15:05
Correct, it only triggers during the initial addition of the <script> block. That is the only time Facebook is aware of any DOM and attempts to parse and render them at that point. You need to tell Facebook to parse the DOM again at a later point in order for it to be aware of new buttons.
Ravi Rajput
@Ravslee
Jan 24 2017 15:05
yeah
Matt Erman
@CodeLiftSleep
Jan 24 2017 15:05
could you set a timeout function to trigger again once the page finishes loading?
Ravi Rajput
@Ravslee
Jan 24 2017 15:05
and i need idea
how do i achieve it in a simple way
umm
Troy Hawley
@troywoy
Jan 24 2017 15:06
Ravi Rajput
@Ravslee
Jan 24 2017 15:06
but i need a perfect solution
troy dom is inside html
Matt Erman
@CodeLiftSleep
Jan 24 2017 15:07
Here check this out..not sure if this is the same thing or not, but it sounds similar enough
Ravi Rajput
@Ravslee
Jan 24 2017 15:08
im sorry troy
not getting u
Troy Hawley
@troywoy
Jan 24 2017 15:10
I am not familiar with your application so I can't say exactly where, but it should go in JavaScript somewhere that is executed after your DOM updates. Maybe that's as simple as using setTimeout(...)? Maybe you're using ui-router, then you can add it in your $stateChangeSuccess event? Ravi Rajput @Ravslee Jan 24 2017 15:11 im angular-route using angular-route Troy Hawley @troywoy Jan 24 2017 15:11 Then use$routeChangeSuccess
Matt Erman
@CodeLiftSleep
Jan 24 2017 15:12
I prefer ui-router but that's a topic for another day, lol
Renato Martins
@orochamartins
Jan 24 2017 15:12
Guys, im having a hard time implementing this API: https://github.com/nickb1080/nba in a simple App that im trying to do. How can i get data from that using \$http?
Ravi Rajput
@Ravslee
Jan 24 2017 15:13
i wil use someday, as i am new to angular, i prefer angular-route :package:
ok let me try troy.. thanks
thanks for you time guys
Ravi Rajput
@Ravslee
Jan 24 2017 15:18
https://github.com/720kb/angular-socialshare some one just suggested me this
no -callbacks require just i have to use directives in html elements
Troy Hawley
@troywoy
Jan 24 2017 15:22
That looks like a third party solution just mimicing the URLs you'd be routed to. If you're fine with that then go for it, but I don't think they're using anything native so your buttons won't look the same or include the same "facebook only" logic like total likes, etc.
Ravi Rajput
@Ravslee
Jan 24 2017 17:22
hi do we use SEO for angular
Matmo10
@Matmo10
Jan 24 2017 17:58
Anyone know why this is printing out “GETTING DATA” and invoking vm.getData() ? https://plnkr.co/edit/1sa4ICWJcLnFvgoMh2OF?p=preview
Seems like some weird edge case with ng-if / ng-repeat and <table> <tr> ‘s
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:07
because you are simply checking false instead of a variable, and false will always evaluate to false
Matmo10
@Matmo10
Jan 24 2017 18:08
Exactly
So why is the nested content invoking functions?
When it shouldn’t even be added to the DOM?
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:08
because you are telling it to do it if its false
its doing exactly what you are telling it to
Matmo10
@Matmo10
Jan 24 2017 18:09
That’s now how ng-if works
it will render it
Only if the expression evaluates to true
Ravi Rajput
@Ravslee
Jan 24 2017 18:09
nested content invokni
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:09
it is true
false = false
there is no variable to check, false will = fales
Matmo10
@Matmo10
Jan 24 2017 18:09
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:09
false
Ravi Rajput
@Ravslee
Jan 24 2017 18:10
{{ {{ }} }} ? is that what u want?
Matmo10
@Matmo10
Jan 24 2017 18:10
If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:10
OK, but you aren't checking it against anytjhing
false isn't an expression its a boolean value
Matmo10
@Matmo10
Jan 24 2017 18:10
I know, I’m just doing it to show the simplest use-case. I have a more complex setup in my app
This is just the minimal example of the problem
Ravi Rajput
@Ravslee
Jan 24 2017 18:11
better use ng-show
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:11
picka variable to use and set it true or false and then substitute the variable in there
Ravi Rajput
@Ravslee
Jan 24 2017 18:11
ng-hide
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:11
yeah I don't like ng-if unless its something more complex, I typically use ng-show or ng-hide
Ravi Rajput
@Ravslee
Jan 24 2017 18:12
use ng-show/ng-hide n use variable
assign it to ng-show/ng-hide
Matmo10
@Matmo10
Jan 24 2017 18:12
@CodeLiftSleep I am doing that, this is just the minimal example to reproduce this issue I’m facing
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:12
@Ravi no, its an expresion, you don't use {{ }} in angular expressions
Ravi Rajput
@Ravslee
Jan 24 2017 18:12
no no
matt what i am saying is , assign a variable boolean value in controller
Matmo10
@Matmo10
Jan 24 2017 18:13
I know man
Ravi Rajput
@Ravslee
Jan 24 2017 18:13
and use that varible in ng-show/hide
Matmo10
@Matmo10
Jan 24 2017 18:13
I know lol
I am
This is just an example
Ravi Rajput
@Ravslee
Jan 24 2017 18:14
@Matmo10 ok :D
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:14
I dont know its working for me...put some text in there instead of {{entry}} and change ng-if from true to false
Ravi Rajput
@Ravslee
Jan 24 2017 18:15
guys i seriouly need help , while sharing my content on social sites , no content appears , its just bcz web-crawlers unable to look for links of SPA apps build using angular
Matmo10
@Matmo10
Jan 24 2017 18:15
Ravi Rajput
@Ravslee
Jan 24 2017 18:15
@CodeLiftSleep
Matmo10
@Matmo10
Jan 24 2017 18:17
@CodeLiftSleep The point is nested content should never render (and therefore never invoke any angular expressions in that nested content) when ng-if=“false”. I can get things to render fine if I need to
I’m going to open an issue on github lol
Ravi Rajput
@Ravslee
Jan 24 2017 18:21
put on staackoverflow
Matmo10
@Matmo10
Jan 24 2017 18:21
@Ravslee :point_up: January 24, 2017 10:15 AM What do you mean
Ravi Rajput
@Ravslee
Jan 24 2017 18:21
I am not getting your issue :package:
Troy Hawley
@troywoy
Jan 24 2017 18:22
The reason you see the console.log is due to the directive priority. ng-if has a priority of 600 and ng-repeat has a priority of 1000, with higher priorities going first.
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:22
I don't see where its invoking nested content, it's invoking content on the same line as the ng-if statement...if you want to avoid that, simply put a <div> above the ng-repeat and call the ng-if there
the nested content is the {{entry}}
<div ng-if="false">
<tr ng-repeat="entry in vm.getData()">
<td>{{entry}}</td>
</tr>
</div>
problem solved
Matmo10
@Matmo10
Jan 24 2017 18:25
I tried that
Doesn’t work
I suspect because div’s aren’t supposed to be there in tables
@twh1808 Thanks….at least I understand why now
Troy Hawley
@troywoy
Jan 24 2017 18:25
@Matmo10, yeah it does although I wouldn't suggest sticking divs randomly inside the table like that.
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:26
Oh yeah, forgot it was a table...
I use UI-grid for tables, much easier to work woith
with
Matmo10
@Matmo10
Jan 24 2017 18:27
The thing is I have this:
ng-repeat="tableEntry in dashboardVm.tableData |  filter:dashboardVm.tableFilterFn | orderBy:dashboardVm.tableSorter:!dashboardVm.isSortOrderAscending”>
…
</tr>
<i class="fa fa-spinner fa-pulse fa-spin sri-spinner"></i>
</td>
</tr>
Ravi Rajput
@Ravslee
Jan 24 2017 18:27
who will help me with SEO
Matmo10
@Matmo10
Jan 24 2017 18:27
And I don’t want the dashboardVm.tableFilterFn to be invoked
@Ravslee Google “Angular 1 SEO” lol
Troy Hawley
@troywoy
Jan 24 2017 18:28
You'll need to move the ng-if to a parent element, wherever that may be.
Matmo10
@Matmo10
Jan 24 2017 18:28
The next parent is <tbody>
But I want the other <tr> to be there
Ravi Rajput
@Ravslee
Jan 24 2017 18:29
matmo i m new :D
Matmo10
@Matmo10
Jan 24 2017 18:30
I’m just short circuiting my filter function at the moment which works, I was just confused why this was happening this way lol
Troy Hawley
@troywoy
Jan 24 2017 18:30
Then I'd do something like:
<tbody ng-if="foobars">
<tr ng-repeat="foobar in foobars">{{ foobar }}</tr>
</tbody>
<tbody ng-if="!foobars">
<tr> The other tr...</tr>
</tbody>
Matmo10
@Matmo10
Jan 24 2017 18:30
Ah
Good call
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:30
My suggestion: Use UI-grid or AG-Grid and you'll be much happier
and write a lot less code
Matmo10
@Matmo10
Jan 24 2017 18:31
@CodeLiftSleep you’re right but its too late now lol
Troy Hawley
@troywoy
Jan 24 2017 18:31
It's a little messier and I wouldn't suggest it if you can get around it, but sometimes you're just forced down a road like that.
Matmo10
@Matmo10
Jan 24 2017 18:31
not enough time
fml
Matt Erman
@CodeLiftSleep
Jan 24 2017 18:31