These are chat archives for angular/angular.js

5th
Jun 2015
Miguel Couto
@Mig1st4ck
Jun 05 2015 09:33
hello all
i just upgraded to 1.4.0 and lots of my bindings are now not working
example this template
<div class="form-group">
  <div class="col-xs-{{::sizeT}}">
    <label class="col-xs-{{::sizeL}} control-label">{{::name}}</label>
    <div class="col-xs-{{::sizeI}}">
      <input ng-model="ngModel" class="form-control" placeholder="{{::name}}" bo-hide="list != null" bo-disabled="lfDisabled"/>
      <select ng-model="ngModel" class="form-control" bo-show="list != null" ng-change="lfchange()" bo-disabled="lfDisabled">
        <option value="" ng-selected="ngModel === null || ngModel == ''">Select a {{::name}}...</option>
        <option ng-repeat="opt in list" value="{{::opt[lfvalue]}}" ng-selected="isSel(opt[lfvalue])">{{::showText(opt)}}</option>
      </select>
    </div>
  </div>
</div>
i get an error like
[$parse:syntax] Syntax Error: Token ':' not a primary expression at column 1 of the expression [::sizeT] starting at [::sizeT].
why does this work fine in 1.3.15 and 1.4 gives error???
Nelo Mitranim
@Mitranim
Jun 05 2015 09:36
Are you 100% sure you updated to 1.4 and not some other version?
Miguel Couto
@Mig1st4ck
Jun 05 2015 09:37
humm good question
angular.version gives me 1.2.28
let me double check this
Pascal Precht
@PascalPrecht
Jun 05 2015 09:38
@Mig1st4ck you should rather use ng-class for that anyways
Miguel Couto
@Mig1st4ck
Jun 05 2015 09:39
but i need it to bind only once
Pascal Precht
@PascalPrecht
Jun 05 2015 09:40
Interesting point, can't we use one-time bindings with ng-class?
Miguel Couto
@Mig1st4ck
Jun 05 2015 09:41
i can convert it to use bo-class since i use that directive
but this code is a little old and i didn't upgraded it yet
about the angular version bower installed version 1.2.28 because angular-bootstrap ... :8ball:
Pascal Precht
@PascalPrecht
Jun 05 2015 09:46
Try to use one-time bindings in ng-class first.
wonder if that works
with this you can use bind once on most of angular directives like ng-if ng-show etc
Pascal Precht
@PascalPrecht
Jun 05 2015 10:03
@Mig1st4ck bindonce was a solution in times before angular 1.3
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:03
and it does bind once without any need to {{::var}}
it is still usefull
Pascal Precht
@PascalPrecht
Jun 05 2015 10:04
yea but it's a third party solution. One-time binding in Angular 1.3 has been introduced to solve exactly that issue.
If you're on Angular >= 1.3 use built-in one-time bindings.
Bind-once is not needed anymore
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:06
how do i force my bower to install version 1.4
Pascal Precht
@PascalPrecht
Jun 05 2015 10:06
you specify the version in bower.json
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:06
when some of my dependency need lower versions
i have
"dependencies": {
"sugar": "~1.4.1",
"jquery-ui": "~1.11.4",
"angular": "~1.4.0",
"angular-animate": "~1.4.0",
"angular-sanitize": "~1.4.0",
Pascal Precht
@PascalPrecht
Jun 05 2015 10:06
there's a resolution property that helps
other than that I'd highly recommend to switch to npm for package management
Bower is dead.
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:08
if i switch it need to be to something better that support es6 like jspm
Pascal Precht
@PascalPrecht
Jun 05 2015 10:08
you can also use jspm if you want
but npm is officially supported by the angular team
and language support is not necessarily something that comes from package manager.
stuff that jspm does you can also put together with a bit of npm, systemjs etc.
in other words, I wouldn't choose for a package manager based on a language you want to write in.
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:10
nice point there
right know i am using npm for gulp and build and bower for stuff i need on the page
Pascal Precht
@PascalPrecht
Jun 05 2015 10:11
right
and now ask yourself, why do you do that?
Daviz
@furyscript
Jun 05 2015 10:11
Someone know a module for angular bcrypt?? Or javascript Bcrypt?? I need to crypt password before sending in my backend
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:12
don't really know ...
Nelo Mitranim
@Mitranim
Jun 05 2015 10:12
Btw jspm doesn't require its own section in package.json, you could use it to install npm dependencies with the bonus of maintaining the system config automatically
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:13
1 question if i use npm to install something like jquery does it downloads the whole stuff or just the bundle release? or both...
Pascal Precht
@PascalPrecht
Jun 05 2015 10:13
@Mig1st4ck depends on what jquery has published on npm
oh and while we're at it @Mitranim convinced me about jspm the other day
haven't used it myself but it looks very very promising
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:14
:D
with jspm i just don't like to much about having to do some configs on the page to load dependencies i like more to just bundle and serve that...
but i can be missing some better examples
basicly i found jspm when looking at aurelia...
btw installed 1.4.0 with resolve on bower and now everything is working again.
KenavR
@KenavR
Jun 05 2015 10:34
@furyscript I have not researched this topic enough to form an educated opinion, but I have read that you should use the web crypto API (http://www.w3.org/TR/WebCryptoAPI/, http://caniuse.com/#feat=cryptography) rather than a JS implementation.
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:45
if i have a long list attached to scope
and do a ng-repeat of that list
how can i know that the view is updated with the new data?
the js needs few ms to get the data from server but angular is needed about 14 seconds to put the info visible
jmoont
@jmoont
Jun 05 2015 10:48
last few round 1 tickets for AngularConnect - the official European conference in London - visit angularconnect.com for more info.
Eric M. Dantas
@ericmdantas
Jun 05 2015 10:49
@Mig1st4ck 14 is a long time
since you're making a call to the server, you'd know the new data just arrived in the the success callback
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:50
  function preview() {
    console.log("Request Preview", new Date());
    localStorage.set('lf-repo-' + vm.currentId, vm.SearchParams);
    datacontext.previewData(vm.CurrRepo, vm.SearchParams)
      .then(function (data) {
      vm.previewData = data;
      console.log("Data Refreshed", new Date());
      log("Data Refreshed!<br>" + vm.CurrRepo.Name);
    });
  }
lf-repo.ts:199 Request Preview Fri Jun 05 2015 11:46:35 GMT+0100 (Hora de Verão de GMT)
lf-repo.ts:204 Data Refreshed Fri Jun 05 2015 11:46:35 GMT+0100 (Hora de Verão de GMT)
data from server is too fast...
but
<tr bindonce ng-repeat="line in vm.previewData">
          <td ng-repeat="col in vm.repo.listReport" bo-hide="col.Hidden">
            <div bo-switch="col.option">
              <span bo-switch-when="link"><a ng-click="vm.options.link(line, col)">{{::line[col.ColumnAlias || col.ColumnOri]}}</a></span>
              <span bo-switch-default>{{::line[col.ColumnAlias || col.ColumnOri] | myFormater:col}}</span>
            </div>
          </td>
        </tr>
needs about 14 seconds
i know i need to use track by to improve
but i want to measure the time and also be abre to show a loading on the page
Eric M. Dantas
@ericmdantas
Jun 05 2015 10:52
I see what you mean
two nested ng-repeats might not be the best case in terms of performance, but it still shouldn't take 14 seconds
As for knowing when the ng-repeat is being populated, I have never used an event for that, let me see if I find anything
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:54
dynamic table report... so it needs that :(
Eric M. Dantas
@ericmdantas
Jun 05 2015 10:55
Have you tried this?
Miguel Couto
@Mig1st4ck
Jun 05 2015 10:55
later i can replace this with a plugin like angular-grid http://www.angulargrid.com/
no i didn't
but that seams like a ugly hack...
also 1 more whatcher for each row ( or not ...)
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:09
the thing is: I don't think you have an event for when a ng-repeat finish being filled
so, you'll have to either use something ng-repeat offers, like $last prop
or create your own directive based on the length of the array you received and the number of elements you're diplaying
while these are not the same, you're still loading your view
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:20
hummm
 <tbody>
        <tr ng-repeat="line in vm.previewData track by $index">
          <td ng-repeat="col in ::vm.repo.listReport track by $index" ng-hide="::col.Hidden">
            <div ng-switch="::col.option">
              <span ng-switch-when="link"><a ng-click="vm.options.link(line, col)">{{::line[col.ColumnAlias || col.ColumnOri]}}</a></span>
              <span ng-switch-default>{{::line[col.ColumnAlias || col.ColumnOri] | myFormater:col}}</span>
            </div>
          </td>
        </tr>
      </tbody>
removed bindonce and i even got less whatchers in the aprouch
still i don't get why this takes abot 10 seconds
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:21
how many rows you have?
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:21
1000
8 columns
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:22
hmm
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:22
btw angular gives me about 1 watcher for that block
vm.previewData
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:23
and ng-click, no?
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:23
probably
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:23
also ng-switch
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:23
but that is only 1 per line
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:23
well, you have 1000 of them
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:23
ng-switch uses bind-once
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:24
this one: ng-switch-when="link"
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:24
i use this
to check my watchers
and the full page uses 167
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:24
didn't know about this, thanks
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:24
so its impossible to have 1 per line :D
also if i filter for something thatgives 0 rows it uses same 167 watchers
so that ng-click should be using dom.addevent, so no whatcher needed
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:26
seems right
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:26
know my problem is performance
what else can i use to get better performance
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:27
have you tried adding this big array in blocks?
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:27
my last idea is ngAnimate should be doing something
KenavR
@KenavR
Jun 05 2015 11:28
maybe try ng-if="::!col.Hidden" instead of ng-hide="::col.Hidden" depending on the data this can reduce the dom elements significantly
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:29
good point
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:29
yeah
missed that one
KenavR
@KenavR
Jun 05 2015 11:31
also the dev tools could give you a hint what's really the matter. With 10sek+ the "problem" should be quite obvious.
is the UI blocked in that 10sek?
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:33
a little
since all works with angular
i can't do nothing because a digest is in progress
bt that ng-if didn't improve... since this table don't have columns hidden
Miguel Couto
@Mig1st4ck
Jun 05 2015 11:49
it seams that long lists is not for angular
need to use something to help here like this https://github.com/kamilkp/angular-vs-repeat
have anyone used something similar?
Eric M. Dantas
@ericmdantas
Jun 05 2015 11:58
nope
KenavR
@KenavR
Jun 05 2015 12:34
I actually still believe that's not an angular performance issue, there is something "wrong" with the code. I tried an example with 2500*8 and the page is fully rendered in less than a second.
Jonathan Leitschuh
@JLLeitschuh
Jun 05 2015 14:52
Is there a way to get access to the normalize method outside of the scope of a directive?