These are chat archives for angular/angular.js

20th
Jan 2017
Pranay Kumar
@pranaykumar389
Jan 20 2017 00:50
Hello everyone!
I'm making a simple Angular Web Page. For Routing I'm using Angular-ui-router. When I click on Home, About, Contact the templates are not loading. Can someone please help me with my Mistake? Here is the link for plunker https://plnkr.co/edit/8LlDl08JVbQKiD5eWEah?p=preview
Frederik Prijck
@frederikprijck
Jan 20 2017 07:27
@pranaykumar389 There are a few mistakes. Other than that, nice job!
In all your components, you do not need angular.module('homeModel', []) but you need angular.module('homeModel') instead.
Passing a second argument to the module function will create the module. You only need to create it. Not passing the second argument will look for an existing module based on the name and add the components to it. So you only need angular.module('homeModel', []) once (in client-model.js).
Another issue is: In about.component u had templateUrl: '/about.html', while u need templateUrl: 'about.html',
That's all, now everything is working: https://plnkr.co/edit/KSHEpxlR4Ivg1WWLuu7g?p=preview
Pranay Kumar
@pranaykumar389
Jan 20 2017 07:35
Perfect Man! @frederikprijck :sparkles: :thumbsup: :sparkles:
Frederik Prijck
@frederikprijck
Jan 20 2017 07:53
@pranaykumar389 You are welcome ! Goodluck !
@tommck I looked at your issue @ github. I'm sorry for not replying here yesterday (I was not in the situation to troubleshoot your plunkr yesterday)
I don't think it's related to what you're saying. However, there is a change in behavior as of 1.6.0 (your plunkr uses 1.6.1, but according to my tests the bahavior is different as of 1.6.0). But I guess we need to check with @gkalpak (or anyone else whow as involved in 1.6.0) for that
George Kalpakas
@gkalpak
Jan 20 2017 07:59
I'll take a look (although I think this works more consistently between versions than it looks).
Frederik Prijck
@frederikprijck
Jan 20 2017 08:00
To me it feels like as of 1.6.0, $httpBackend calls through by default on templateUrl calls ?
Rok
@zenkkor
Jan 20 2017 08:02
Hey guys! Is there any way to prerender a html template so that the html can be saved in the database
Rok
@zenkkor
Jan 20 2017 08:11
So no way known?:)
What I am trying to achieve is shorten the rendering time because a few checkout pages that we have render in angular
And that has ng-ifs and repeats
And is just not a 100% good experience
(Cant use ng-cloak due to need fast loading and already use ng-bind)
Ayush Bahuguna
@relentless-coder
Jan 20 2017 09:27
@zenkkor if the ng-repeats binds static values(values that won't change, whatsoever), then it is better to hardcode them to avoid digest delays. I have been reading about it in professional angular.js from wrox publication.
Rok
@zenkkor
Jan 20 2017 09:38
@relentless-coder no, sadly that is all dynamic
@relentless-coder it's part of a template builder
Ayush Bahuguna
@relentless-coder
Jan 20 2017 09:41
well, so far what I've learned is that angular creates a watcher for every directive. So, if you are able to bring down the number of directives then you should see some speed improvements
Rok
@zenkkor
Jan 20 2017 09:45
@relentless-coder yes, already did that, thanks. The issue here is also that we would like to offer our clients one off designs, so they could have custom designs for their pages (and not from the builder) and I am trying to unify the rendering part, so it always renders (semi) static html
Ayush Bahuguna
@relentless-coder
Jan 20 2017 09:47
in that case an expert could help you with that. ask @frederikprijck when he's around here
Frederik Prijck
@frederikprijck
Jan 20 2017 09:48
I'm not an expert :joy:
Rok
@zenkkor
Jan 20 2017 09:48
yeah, this problem is kinda complex
the solution I have so far is to just leave what we have and keep optimizing that
and for one off custom order templates render html from db
that uses ng-bind-html
and then determine on compile time if it's a custom template, or one of the "regular" ones
Oh, the reason we can't do that straight away is because our templates render from a json structure
its a nested json that mimicks the bootstrap way (i.e rows have nested columns, which have nested items etc and then that json gets rendered by directives)
Ayush Bahuguna
@relentless-coder
Jan 20 2017 09:51
@frederikprijck you are from where I can see.
@zenkkor for static content, pull it out to a different html and use ng-include, you can save a number of watchers
Rok
@zenkkor
Jan 20 2017 09:51
@relentless-coder yes, that's the current solution, but the rendering will not be unified for both standard templates and custom templates
that's why I was wondering if I could render what we have any way
Ayush Bahuguna
@relentless-coder
Jan 20 2017 10:00
@zenkkor you can ask mentors on pluralsight
Rok
@zenkkor
Jan 20 2017 10:34
@relentless-coder what is pluralsight?
Ayush Bahuguna
@relentless-coder
Jan 20 2017 10:37
yes. there mentors are available, they charge. the lowest is i think $1 for a minute
Rok
@zenkkor
Jan 20 2017 10:37
Ok thanks
how advanced is their knowledge?
this gets into the core of angular itself :)
Ayush Bahuguna
@relentless-coder
Jan 20 2017 10:39
well, the first 5 minutes are I think risk free. so you can see for yourself. the courses on pluralsight go deep, so we can assume that they have quality mentors too
Rok
@zenkkor
Jan 20 2017 10:41
Ok, thanks @relentless-coder !
Ayush Bahuguna
@relentless-coder
Jan 20 2017 10:41
:+1:
akilesh
@akileshv
Jan 20 2017 11:44
how to change the color of input box if it contain invalid value (not while typing) & focus out of input box
Ayush Bahuguna
@relentless-coder
Jan 20 2017 12:57
@frederikprijck I have function inside my service, that accepts a parameter and compares it with the current route parameter. I am trying to use it inside my controller, but I am getting, let's my parameter is "value", value is not defined
Frederik Prijck
@frederikprijck
Jan 20 2017 12:59
can you show your code ?
Ayush Bahuguna
@relentless-coder
Jan 20 2017 13:03
no. I solved it. what i did was that attach a function that accepts a parameter to the scope, then inside that function return the service function with the same parameter. it worked.
now, i need to understand why it worked
also, could you explain me why shouldn't we use if else statements inside our controller. Previously, I didn't use the service, I wrote the function inside the controller itself, but what then I used a service, what i can't seem to understand it that why isn't it allowed
@frederikprijck
Frederik Prijck
@frederikprijck
Jan 20 2017 13:32
why shouldn't we use if else statements inside our controller
Who says that you shouldn't ?
no. I solved it. what i did was that attach a function that accepts a parameter to the scope, then inside that function return the service function with the same parameter. it worked.
Can you show this ?
Ayush Bahuguna
@relentless-coder
Jan 20 2017 13:32
I can't show the code, it's for the organization. I can show you dummy code here
$scope.someFunct = function(value) {
    var someVar = value;
   someService.someMethod(someVar);
and in the service I had a function that accepted a parameter.
Who says that you shouldn't ?
I had a code that used statements like
document.element.addEventListener("click", function(el){ if(el === someValue) { do this.. }else { do this.. } })
you warned me against such code inside my controller
Brad Wertman
@bmwertman
Jan 20 2017 14:29

I have an ng-click set on an anchor tag connected with a $scope’d function in my controller as follows;

template

<a id="add-child"
     class="add-button"
     ng-click="addChild()">
    <i class="icon ion-android-person-add"></i>
    <div id="childwarp">Child</div>
  </a>

controller

App.controller(‘MyCtrl, [
‘$scope’,
‘userService’,
‘$firebaseObject’,
function($scope, userService){
    var user = userService.getUser(),
            ref = firebase.database().ref(),
            userRef = ref.child('users').child(user.user_id),
            userObj = $firebaseObject(userRef),
            schoolsRef = ref.child('schools'),
            childrenRef = ref.child('users/' + user.user_id + '/children’);

    $scope.addChild = function(){
          childrenRef.set({
               name: 'Child\'s name?',
               grade: 13,
               pic: '?'
          });
     };
}]);

The ng-click is not getting the click event even though other scoped functions in the same controller are. When I set a break point in the controller all are shown as registered in $scope. I’m not sure what else to check.

Troy Hawley
@troywoy
Jan 20 2017 14:44
@bmwertman, are you getting JavaScript errors? You're injecting $firebaseObject but it's not part of your function parameters so I'd assumed you're getting an undefined error.
Brad Wertman
@bmwertman
Jan 20 2017 14:46
No, no errors. It gets injected in my code. Just forgot to add it here.
Troy Hawley
@troywoy
Jan 20 2017 14:47
Well it all seems sound if you say there are no errors. Only thing I would make sure of is that ng-controller="MyCtrl" is on the page somewhere as a parent element of your anchor.
Trioj
@trioj
Jan 20 2017 14:48
How do you know addChild isn't being called? In other words, how do you know ng-click isn't firing that function vs the code in the function isn't working?
Brad Wertman
@bmwertman
Jan 20 2017 14:49
It gets set in ui-routerusing the controller setting as follows;
name: 'profile',
        url: '/profile',
        params:{
          isNewUser: null
        },
        templateUrl: 'templates/user_profile.html',
        controller: ‘MyCtrl’
@trioj I set a break point in the first line inside the function. It does’t get hit. I can also usually see the ng-click get highlighted in Chrome inspector when it gets clicked, i’m not seeing that.
Trioj
@trioj
Jan 20 2017 14:52
10-4.
Brad Wertman
@bmwertman
Jan 20 2017 14:52
?
Trioj
@trioj
Jan 20 2017 14:53
ok ;)
Brad Wertman
@bmwertman
Jan 20 2017 14:53
Oh cb talk, gotcha
Thought you were referencing docs or something, lol
Trioj
@trioj
Jan 20 2017 14:54
heh, no, just recognizing all your bases were covered.
Brad Wertman
@bmwertman
Jan 20 2017 15:04

I do see this warning in the console when I click the ng-click,

Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

But it shows up a lot of other times and I don’t think it’s directly related.

Nicholai Nissen
@Nicholaiii
Jan 20 2017 16:09
@relentless-coder generally it is considered a bad practise to manipulate dom inside a controller. That is what directives are for.
George Kalpakas
@gkalpak
Jan 20 2017 17:05
What about manipulating it from inside directive controllers?
Frederik Prijck
@frederikprijck
Jan 20 2017 17:19
@gkalpak what's ur opinion about dom manipulation in directive controllers ? :D
Tom McKearney
@tommck
Jan 20 2017 18:02
So.. in 1.5.10, with an <input type="checkbox">, input.attr('checked') would returned "checked" if it was checked and "undefined" if it was not. in 1.6, it does not do that.
I noticed that there were attr() changes, but none described in the migration seem to point to this behavior changing
This plunker demonstrates that: http://plnkr.co/edit/I5WCZ3?p=preview
Troy Hawley
@troywoy
Jan 20 2017 18:09
I tend to keep my DOM manipulation inside of Angular defined methods like link where I'm provided the el as a parameter. Otherwise you're reaching out to the DOM to try and obtain it which is messy and can fail if you don't have the correct el.
Tom McKearney
@tommck
Jan 20 2017 18:18
man, i've been doing well with updating ng 1.x versions relatively soon after they come out, but 1.6 has been problematic for me :)
Tom McKearney
@tommck
Jan 20 2017 18:47
so, it seems that passing through a two-way bound value to ng-model in a directive isn't working right in 1.6? "my-checkbox" has "model: '='" on its scope and 'ng-model="model"' in its HTML, but this isn't working for me in 1.6.. anyone know why that might be?
tommck @tommck guesses everyone's watching the US presidential inauguration or something
Frederik Prijck
@frederikprijck
Jan 20 2017 19:09
@tommck I'm not. I'm looking at ur plunkr atm :D
Tom McKearney
@tommck
Jan 20 2017 19:10
oh, cool :)
Frederik Prijck
@frederikprijck
Jan 20 2017 19:10
Your last comment is still about the same plunkr, right ?
Tom McKearney
@tommck
Jan 20 2017 19:10
yes
I can't figure out why that stopped working w/ 1.6
John Nolette
@neetjn
Jan 20 2017 19:13
It's because checked is a property and not an attribute
Change .attr to .prop.
:+1:
Tom McKearney
@tommck
Jan 20 2017 19:14
did that change from jQuery 2 to 3?
that attr() no longer works?
(for props)
Frederik Prijck
@frederikprijck
Jan 20 2017 19:15
it does idd work using prop http://plnkr.co/edit/6wdLmx?p=preview
Tom McKearney
@tommck
Jan 20 2017 19:16
oh, sweet! I totally forgot about the attr/prop switch
thanks so much
John Nolette
@neetjn
Jan 20 2017 19:22
:)
"The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes."
Tom McKearney
@tommck
Jan 20 2017 19:25
yeah, I totally forgot about that.. but jqLite was emulating pre-jQuery-1.6 attr() functionality?
John Nolette
@neetjn
Jan 20 2017 19:25
The ideology behind it is that attributes should be static, and properties are dynamic references.
Frederik Prijck
@frederikprijck
Jan 20 2017 19:25
@tommck I realy love how you always provide plunkrs using tests :D
John Nolette
@neetjn
Jan 20 2017 19:26
@code, personally no idea why it worked.
They may have updated their spec.
Most likely because recent changes on Safari prohibit you from retrieving dynamic attributes.
And JQuery's only real pull is their flexibility cross-browser.
Tom McKearney
@tommck
Jan 20 2017 19:32
oh well, my tests need to be changed anyway.
George Kalpakas
@gkalpak
Jan 20 2017 19:45
@tommck: This is the commit that changed it: angular/angular.js@7ceb5f6
Tom McKearney
@tommck
Jan 20 2017 19:47
:+1:
George Kalpakas
@gkalpak
Jan 20 2017 19:47
It seems that this breaking change is indeed missing from the changelog and the Migration Guide.
Aha, it's because it was marked as refactor, which isn't included in the changelog.
I will add it. Thx @tommck for bringing it up :smiley:
Tom McKearney
@tommck
Jan 20 2017 19:53
yeah, should definitely put stuff like that in there!
Tom McKearney
@tommck
Jan 20 2017 20:13
hmm.. fancy $q processing to detect situations where rejects aren't handled isn't fancy enough :)
it's not aware of when you do a scope.$watch() on a promise and then handle it in there
Tom McKearney
@tommck
Jan 20 2017 21:49
Is there a schedule for patch releases like 1.6.2?
the milestone says 1.6.2 is 18 days late and 9% complete, but that info never seems right
George Kalpakas
@gkalpak
Jan 20 2017 23:24
We usually try to release every ~2 weeks, but that is rarely the case when there are holidays involved :smiley:
The plan is to release 1.6.2 next week (9% is accurate but misleading).