These are chat archives for angular/angular.js

16th
Jan 2017
Ayush Bahuguna
@relentless-coder
Jan 16 2017 05:17
@frederikprijck hey, where should I put my code which is something like if(document.getElementById("some"))? Currently, it is in my controller, and you told me to not put it inside the controller. Also, I was reading the book, and it was mentioned in it too. I think I am supposed to put it inside directives, but then I have different form sections as different views, so I don't know how would I incorporate directives into them...should I keep different views, and then inside each view use a directive?
Frederik Prijck
@frederikprijck
Jan 16 2017 06:11
@relentless-coder imho you should create directives. Have a look at
Frederik Prijck
@frederikprijck
Jan 16 2017 06:26
@relentless-coder Which book is mentioning to put it inside a controller ? :scream:
Sean Murphy
@SeanFullstack
Jan 16 2017 10:38
Good Afternoon,
​I hope I find you well and sorry to bother you on a proffesional forum like this.
​I am currently recruiting for a FullStack JavaScript Developer based in the heart of London on a permanent basis.
The successful JavaScript developer will help rebuild the clients current legacy ecommerce platform and internal applications. This exciting position will involve using the latest JavaScript technology such as ES6, Node, Angular (with Angular2 in mind), Typescript etc.
​As well as building a cutting-edge ecommerce platform, you will also help build a custom Node API and various dashboards to help the business perform more efficiently. While you will be vital to the development side, you will also contribute to planning the architecture and brain storming with a small but highly skilled team.
This is the perfect position if you are extremely passionate about JavaScript and have a desire to work with other like-minded developers.
​If this is of interest and would like to hear more please get incontact urgently for immediate consideration - Paying up to £65,000
Ayush Bahuguna
@relentless-coder
Jan 16 2017 11:00
@frederikprijck no it was mentioned to not put it inside the controller. it is the professional angularjs from wrox publications.
Frederik Prijck
@frederikprijck
Jan 16 2017 11:24
Aaaah, that's good! :)
Ayush Bahuguna
@relentless-coder
Jan 16 2017 11:35
I couldn't fix that issue with console.log logging nothing. I am going to try and store the data on localStorage, will let you know
Frederik Prijck
@frederikprijck
Jan 16 2017 11:44
That's not realy debugging your problem @relentless-coder using localstorage is not a solution to what you where doing. It is supposed to work with a service.
So I guess you didn't manage to reproduce in plunkr ?
Tobbe
@tobbbe
Jan 16 2017 11:54
can i exclude the custom element if I make a component()?
Frederik Prijck
@frederikprijck
Jan 16 2017 11:59
@tobbbe What do you mean ?
Tobbe
@tobbbe
Jan 16 2017 12:01
@frederikprijck if i create a component('myComponent', ...) this will wrap all content of the template with <my-component></my-component>. Can i exclude the <my-compoent>-element?
Frederik Prijck
@frederikprijck
Jan 16 2017 12:03
@tobbbe Afaik no.
Tobbe
@tobbbe
Jan 16 2017 12:03
ok!
Frederik Prijck
@frederikprijck
Jan 16 2017 12:03
This used to be possible when using directives, but that's been removed from angular.
@tobbbe That's rly wasn't a great idea to do anyway.
Tobbe
@tobbbe
Jan 16 2017 12:04
yea right? I thought I had some memory of it
I use components as views with ui-router, and the components doesnt get any css display value so it causes some trouble. Not a big problem but I had a vague memory of this..
tnx anyway!
Frederik Prijck
@frederikprijck
Jan 16 2017 12:09
No problem @tobbbe .
I use components as views with ui-router
Awesome, So do I! Great approach imho!
Tobbe
@tobbbe
Jan 16 2017 12:10
yea! keeps everything in place :)
Frederik Prijck
@frederikprijck
Jan 16 2017 12:13
@tobbbe It's overall an awesome guide. There's somethings I do differently (a little bit differently). But following that guide will help you greate awesome apps
The most important thing I handle differently is that Todd has no structural difference between stateful and stateless components.
George Kalpakas
@gkalpak
Jan 16 2017 12:14

This used to be possible when using directives, but that's been removed from angular.

It is still possible with directives (although deprecated and not recommeneded.

Tobbe
@tobbbe
Jan 16 2017 12:15
@frederikprijck ah ok! why dont u have any structural differences?
Frederik Prijck
@frederikprijck
Jan 16 2017 12:15
@tobbbe I do, todd doesn't IIRC.
Tobbe
@tobbbe
Jan 16 2017 12:15
@gkalpak alright, then I wont use it
oh! hehe okey. How do u seperate them?
Frederik Prijck
@frederikprijck
Jan 16 2017 12:16
I generally use naming conventions to seperate them.
component vs container e.g.
Tobbe
@tobbbe
Jan 16 2017 12:16
mm ok, smart
Frederik Prijck
@frederikprijck
Jan 16 2017 12:20
Todd does use some way to seperate them I guess.
Frederik Prijck
@frederikprijck
Jan 16 2017 12:31
@tobbbe I'd say todd uses the root components as smart ones (e.g. calendar) and the sub components as dumb ones (e.g. calendar-grid) http://prntscr.com/dwadjp
Not sure tho.
But I prefer to name the smart ones containers (but technically they are just components), that way I don't have to open the file in order to know it's a smart or dumb one.
Frederik Prijck
@frederikprijck
Jan 16 2017 12:44
I also don't put everything in one giant components folder. But use a folder per "module" and add appropriate folders below. So in the above screenshot I'd use: calendar\components and calendar\containers and calendar\services and events\components and events\containers and events\services. I sometimes even add a folder sub-modules to each of the modules if there are smaller submodules.
Apart from that I realy think the guide is awesome @tobbbe
Tobbe
@tobbbe
Jan 16 2017 12:47
@frederikprijck nice input! it sounds sane to be even more specific as you say if you do large projects. But Im still working on remembering the patterns right now hehe
Frederik Prijck
@frederikprijck
Jan 16 2017 12:48
@tobbbe Ye, you don't have to overdo things on small projects. (well you don't have to overdo things on large projects neither :P )
And I think small variations on general style guides aren't bad. I think if you're using 80 - 90% of the guide, you're project's architetcure is awesome anyhow. There's no silver bullet rule .
Tobbe
@tobbbe
Jan 16 2017 12:54
yea! absoultley agree. Just having and following a styleguide is a huge plus. Unfortulanty none of my colleagues is intreseted in having one.............
frustrating..
Ayush Bahuguna
@relentless-coder
Jan 16 2017 13:05
@frederikprijck no, i couldn't. I had the same code. I didn't change anything. I can't understand for now
Frederik Prijck
@frederikprijck
Jan 16 2017 13:15
@relentless-coder and you're 100% sure it's identical? Sounds highly unlikely...
Ayush Bahuguna
@relentless-coder
Jan 16 2017 13:18
yes. it is identical, not even similar. Identical.
Frederik Prijck
@frederikprijck
Jan 16 2017 13:19
so @relentless-coder same code, same versions, same browser, different result ?
If your project is public, I can have a look at it if you want.
Wim Huiskes
@wimhuiskes
Jan 16 2017 13:21
@frederikprijck which one do you recommend? angular 1.6.1 or 2.0?
reason i ask is because i bought a book about 1.6.1 and watching a course about 2.0, they are completly different
Frederik Prijck
@frederikprijck
Jan 16 2017 13:24
@wimhuiskes They are completely different and, as I said before, it depends on ur JS knowledge.
As your JS knowledge was limited, I'd go for angular 1.6.
Wim Huiskes
@wimhuiskes
Jan 16 2017 13:24
i dont want to make the same mistake i made with action script 2.0 and 3.0
Frederik Prijck
@frederikprijck
Jan 16 2017 13:25
For using 2+, you'll have to be familiar with WebPack, ES6, modern way of doing JavaScript.
I'd say starting 2+ today is a better idea.
Wim Huiskes
@wimhuiskes
Jan 16 2017 13:25
thought so :smile:
Frederik Prijck
@frederikprijck
Jan 16 2017 13:25
But it has a higher learning curve.
Wim Huiskes
@wimhuiskes
Jan 16 2017 13:26
what are you using the most?
Frederik Prijck
@frederikprijck
Jan 16 2017 13:28
That's irrelevant. But I'm using 1.6 the most as not alot of my customers are already on 2.
Wim Huiskes
@wimhuiskes
Jan 16 2017 13:29
because is have my own business, i need to keep up, so i want to make a right choice
Frederik Prijck
@frederikprijck
Jan 16 2017 13:31
If you're developing projects in-house, I'd go for 2. But be aware that you'll need to be familiar with some modern way of doing JavaScript. (Es6, Modular, preferably TypeScript)
But Angular 1.6 is awesome aswell.
Wim Huiskes
@wimhuiskes
Jan 16 2017 13:32
thanks for the advice :+1:
Dylin Maust
@dylin-maust
Jan 16 2017 15:09
Hello again
Another question on stateless components
I'm using one-way binding and I touched on this by reading the style guide.. what's the best approach propagate the changes back up from a child component (stateless) to a stateful parent component when there's no inherent event that fires?
Imagine one big form, but different sections of the form are separated into stateless components. There's no submit button per stateless component section, which would typically be used to fire an event and push the changes back up to the parent component.
Dylin Maust
@dylin-maust
Jan 16 2017 15:15
I believe $onChanges(changes) doesn't fire because I'm passing the object in by reference and modifying properties of it, or I could use that
Or maybe my use case doesn't lend itself well to splitting up the form into multiple components
am0nshi
@am0nshi
Jan 16 2017 16:50
hi guys
where is the best practice to store temporary data between controllers or etc...? i need to save chat input field in customer session, but each time i change route - i re-create another one controller. i think to subscribe on $destroy and store it somewhere, but... where? session storage? $rootScope? window.storage = {} ?
Frederik Prijck
@frederikprijck
Jan 16 2017 17:12
@TimeBomb006 That's in the styleguide.
Search for One-way dataflow and Events
@am0nshi Is you only need it between controllers: a service. If you need to store it between page loads: local storage.
Dylin Maust
@dylin-maust
Jan 16 2017 18:19
Yeah I actually made my way there
Arup Rakshit
@aruprakshit
Jan 16 2017 18:35
how do I show these 2 readonly field as 2.00 https://plnkr.co/edit/LRkenXXCEzV9AXd54pRe ? I want them to show always 2 decimal points appended if it is an integer. Any hints?
Frederik Prijck
@frederikprijck
Jan 16 2017 18:52
George Kalpakas
@gkalpak
Jan 16 2017 18:52
Note that number:2 will always show exactly 2 decimal digits (even if the number has more).
Also, since they are read-only, you can also use ng-value (instead of ng-model).
Arup Rakshit
@aruprakshit
Jan 16 2017 18:54
hmm both works. I tested. Any advantage to use 1 over another?
Frederik Prijck
@frederikprijck
Jan 16 2017 18:54
ng-model has more possibilities, such as validation IIRC
Arup Rakshit
@aruprakshit
Jan 16 2017 18:54
with ng-model I get error in console..
Frederik Prijck
@frederikprijck
Jan 16 2017 18:54
But as it's readonly, I guess that's not needed.
George Kalpakas
@gkalpak
Jan 16 2017 18:55
you can't really use filters with the ngModel expression, because the resulting expression is not assignable.
Arup Rakshit
@aruprakshit
Jan 16 2017 18:55
ok
George Kalpakas
@gkalpak
Jan 16 2017 18:55
(There are way to work around it, by using ngModelOptions with {getterSetter: true}.)
But, if you don't need any of the ngModel stuff (validations, formatters etc) - which is usually the case for readonly fields - ng-value is more appropriate.
Frederik Prijck
@frederikprijck
Jan 16 2017 18:57
Wow, my bad. Didn't notice the errors (I saw the filter working so ...). That's new, didn't know.
SO ng-value will remove the errors @gkalpak ?
George Kalpakas
@gkalpak
Jan 16 2017 18:57
I didn't check, but I think so
Arup Rakshit
@aruprakshit
Jan 16 2017 18:58
no error with ng-value .. thanks both of you .. https://plnkr.co/edit/LRkenXXCEzV9AXd54pRe?p=preview
last question. can I set default value to 0.0 .. say a model is undefined or null
because most of them come from server,, so sometimes they are null
George Kalpakas
@gkalpak
Jan 16 2017 19:00
You can (but the complexity depends on the exact requirements :grin:)
Does the default value get applied at the beginning only, or any time the field is cleared?
Does the default value get applied if the model value is falsy, or specifically undefined? Etc
Arup Rakshit
@aruprakshit
Jan 16 2017 19:01
I have 3-4 price fields, and client want always to show them 2 decimal points. like if nothing show just 0.00
ok it will be always null or undefined or 0 or actual value 122.23
no other possibilities
George Kalpakas
@gkalpak
Jan 16 2017 19:03
Assuming you don't want to use a number field, you could use a formatter and/or parser that sets the value to 0 when it's empty.
Or are we talking about the readonly fields form above?
Arup Rakshit
@aruprakshit
Jan 16 2017 19:04
yes
same fields
they are readonly
George Kalpakas
@gkalpak
Jan 16 2017 19:09
Then, you can use ng-value="(foo || 0) | number:2" (make sure not to use {{ ... }} with ngValue as you have in your plnkr): https://plnkr.co/edit/lAuoKvC3dJpfaDcUwH6R?p=preview
If you don't want to add || 0 everywhere, you can create your own filter (based on numberFilter), or overwrite numberFilter itself, in order to treat falsy (null, undefined, etc) as 0.
Arup Rakshit
@aruprakshit
Jan 16 2017 19:10
yes.. that is why getting syntax error :p
I was like wtf. hehe
pulling my hair
@gkalpak thanks once again
George Kalpakas
@gkalpak
Jan 16 2017 19:14
Here is the custom number filter btw: https://plnkr.co/edit/gDPwy3k3BQND4nvB25Kh?p=preview
It's pretty consice:
app.filter('numberOrDefault', function(numberFilter) {
  return function(input, fractionSize, defaultValue) {
    if (!input) input = defaultValue || 0;
    return numberFilter(input, fractionSize);
  };
});
Arup Rakshit
@aruprakshit
Jan 16 2017 19:50
@gkalpak thank you
jkishbaugh
@jkishbaugh
Jan 16 2017 20:53
I am new to angular trying to do the pomodoro timer with angular but I am making a mistake somewhere because I can't get app controller to replace my expressions. Please take a look and help me out.
Frederik Prijck
@frederikprijck
Jan 16 2017 21:03
@jkishbaugh replace app.controller = ('MainCtrl', function($scope, $interval) { with app.controller('MainCtrl', function($scope, $interval) {
jkishbaugh
@jkishbaugh
Jan 16 2017 21:06
@frederikprijck Thanks that fixed it.
Marcos Silva
@marcos5ilva
Jan 16 2017 21:17
hey guys, I newbie question. I'm trying to insert a twitter share button in a smal angular project
Matt Erman
@CodeLiftSleep
Jan 16 2017 21:56
Hey how do I change the title of the opened tab similar to what ViewBag.Title does?
Frederik Prijck
@frederikprijck
Jan 16 2017 21:57
you mean of the tab of your browser ?
Matt Erman
@CodeLiftSleep
Jan 16 2017 21:57
yes
So I can get rid of this dan razor, lol
damn'
Frederik Prijck
@frederikprijck
Jan 16 2017 21:58
there's several options, I guess setting document.title is the easiest
Matt Erman
@CodeLiftSleep
Jan 16 2017 22:00
OK cool
Carlos Amaral
@CarlosAmaral
Jan 16 2017 22:38
@frederikprijck ty
SamD
@SamD
Jan 16 2017 22:48
Is there a gitter
SamD
@SamD
Jan 16 2017 22:54
Err didn't mean to post that not completed is there a gutter channel specifically for angular 2?
*gitter auto correct on phone
Be nice if we could edit or delete posts
George Kalpakas
@gkalpak
Jan 16 2017 22:56
We can
SamD
@SamD
Jan 16 2017 22:56
I can't on Android
George Kalpakas
@gkalpak
Jan 16 2017 22:56
Some features are not available on mobile :grin:
Anyway, the ng2+ channel is at https://gitter.im/angular/angular.
SamD
@SamD
Jan 16 2017 22:57
Oh there we go u need to double tap, I tried single and holding down
Thanks