These are chat archives for angular/angular.js

12th
Jan 2017
James Salamon
@lorezzed
Jan 12 2017 04:43 UTC
which one is faster, $evalAsync or $applyAsync?
James Salamon
@lorezzed
Jan 12 2017 04:49 UTC
in terms of updating something in the DOM
George Kalpakas
@gkalpak
Jan 12 2017 08:08 UTC
They are about the same.
If you are already inside a digest, I think $evalAsync will happen sooner.
James Salamon
@lorezzed
Jan 12 2017 08:12 UTC
thanks @gkalpak
do you know how to speed up ng-repeat?
I have a list that takes about 1 - 2s to show a change in the DOM
however getting the length ($ctrl.mylist.length) shows its updating very fast < 200ms
George Kalpakas
@gkalpak
Jan 12 2017 08:19 UTC
It depends on what is slowing it down.
Could be too many elements or too many bindings or too expensive bindings etc
Frederik Prijck
@frederikprijck
Jan 12 2017 08:21 UTC
@gkalpak @lorezzed Or a missing track by might be a reason aswell, no ? Not neccesarly, but possibly.
George Kalpakas
@gkalpak
Jan 12 2017 08:22 UTC
I had "etc" at the end (there can be a lot of things) :smiley:
Frederik Prijck
@frederikprijck
Jan 12 2017 08:23 UTC
Well, thats true :joy:
James Salamon
@lorezzed
Jan 12 2017 08:37 UTC
ah I think it's because it's relying on a $watch
James Salamon
@lorezzed
Jan 12 2017 08:42 UTC
can confirm, $watchGroups are slow as :shit:
George Kalpakas
@gkalpak
Jan 12 2017 08:52 UTC
$watchGroups are essentially yntactic suger over multiple $watchers. They are not any more efficient than adding a $watch for each item in the list. (Not to be confused with $watchCollection which is something different.)
James Salamon
@lorezzed
Jan 12 2017 09:33 UTC
yep $watches are slow
going to use rx instead
Frederik Prijck
@frederikprijck
Jan 12 2017 09:47 UTC
Not sure how rx is going to replace a $watcher tbh @lorezzed
George Kalpakas
@gkalpak
Jan 12 2017 10:08 UTC
I assume you replace scope.$watch('foo', callback) with scope.foo.subscribe(callback) (and make scope.foo an Observable).
Frederik Prijck
@frederikprijck
Jan 12 2017 10:12 UTC
Makes sense, I'm even using that aswell. :scream:
@gkalpak I guess I was distracted by "replacing a watcher by rx" and I was more thinking like: 'You need a watcher anyway to trigger the digest cycle in angular 1" ... But well, if you assign a variable in the subscribe and add a binding to that variable you have your watch anyway (internally, that is I guess). So made no sense what I asked. Sorry @lorezzed , my bad.
Frederik Prijck
@frederikprijck
Jan 12 2017 10:18 UTC
I realy love how rxjs works well with the angular 1 digest cycle (so far). Are there any issues you know about with combining them (with or without immutability) @gkalpak ?
Pearl
@Prashastii_twitter
Jan 12 2017 10:40 UTC
how to make synchronous http calls?
Paul "Joey" Clark
@joeytwiddle
Jan 12 2017 10:41 UTC
Don’t do that, unless you want the browser to freeze.
Just handle whatever you want to do in the http callback function.
Frederik Prijck
@frederikprijck
Jan 12 2017 10:45 UTC
@Prashastii_twitter There shouldn't be no need to do that imho.
Anyway, using $http I guess you cant even do a sync call due to: https://github.com/angular/angular.js/blob/master/src/ng/httpBackend.js#L74
Which passes true as 3th param to the xhrReq.open(method, url, async); method https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
Frederik Prijck
@frederikprijck
Jan 12 2017 10:51 UTC
But if you want and have to to do it sync, you can use the above link and not pass true as 3th param. But you realy shouldn't.
George Kalpakas
@gkalpak
Jan 12 2017 10:51 UTC
It is possible to make sync $http (but is not recommended and I am not telling you how :grin:)
(It is not that straight-forward anyway.)
No idea about painpoint with Observables + $digest, @frederikprijck
But the discussion here inspired me to look into integrating Observables with the digest (or at least $watch), so if anyone has insights to share, that would be great.
Frederik Prijck
@frederikprijck
Jan 12 2017 10:54 UTC
Insights on issues ? or on using it ?
I'm using ngrx/store (being a local copy to drop angular2 dependencies) + rxjs with my angular 1 app.
Currently it's working awesome, no "visible" performance issues so far.
I think 95% of the code on the current project is rxjs :D
Frederik Prijck
@frederikprijck
Jan 12 2017 11:01 UTC
Frederik Prijck
@frederikprijck
Jan 12 2017 11:40 UTC
The only downside is that the temp work around is not so temporary :'(
James Salamon
@lorezzed
Jan 12 2017 12:13 UTC
@frederikprijck @gkalpak going to use combinelatest in place of $watchGroup
Frederik Prijck
@frederikprijck
Jan 12 2017 12:14 UTC
If your array has observables I guess that could work idd.
James Salamon
@lorezzed
Jan 12 2017 12:14 UTC
don't even need to check if all the observables have loaded before it executes the first time :D
Frederik Prijck
@frederikprijck
Jan 12 2017 12:15 UTC
I'd say if you can avoid manual watchers, I'd always do that. I gotta admit I think as I'm doing this current project for 1 year and a half, I only needed to use max 5 manual watchers so far.
James Salamon
@lorezzed
Jan 12 2017 12:15 UTC
yeah I gotta convert to the $watch values to observables subjects first
Frederik Prijck
@frederikprijck
Jan 12 2017 12:15 UTC
Not only for watchgroups that is ...
James Salamon
@lorezzed
Jan 12 2017 12:15 UTC
using a Subject and called .next in place
Frederik Prijck
@frederikprijck
Jan 12 2017 12:15 UTC
So you're watching every item in the array and calling next on the approriate subject ?
James Salamon
@lorezzed
Jan 12 2017 12:16 UTC
calling next on any of the values will cause the combineLatest observable to update
George Kalpakas
@gkalpak
Jan 12 2017 12:22 UTC
If anyone is interested, I have a (very basic) POC of decorating $watchCollection (which is for example used by ngRepeat under the hood) to "undrstand" observables and subscribe to them, instead of checking them on every $digest.
James Salamon
@lorezzed
Jan 12 2017 12:25 UTC
nice work
Frederik Prijck
@frederikprijck
Jan 12 2017 12:25 UTC
@gkalpak ftw, looks neat yet complex :D
@gkalpak Gotta admit I aint no fan of this:
ng-repeat="item in app.items$"
But I guess that's where your POC is about, right ?
George Kalpakas
@gkalpak
Jan 12 2017 12:28 UTC
What don't you like? The trailing $?
Frederik Prijck
@frederikprijck
Jan 12 2017 12:28 UTC
Well, it conflicts abit with how ng2 handles ngFor and observables, no ?
James Salamon
@lorezzed
Jan 12 2017 12:29 UTC
ng2 would just add an async pipe on the end
Frederik Prijck
@frederikprijck
Jan 12 2017 12:29 UTC
Ye, async will subscribe just as @gkalpak code does.
So I do like how it works, it just feels abit odd to put an observable there.
You could think it will iterate over all the items emitted by the observable
yet it will iterate only over every item for a single item emission (being an array)
George Kalpakas
@gkalpak
Jan 12 2017 12:31 UTC
It might be possible to do the same with a pipe (@petebacondarwin has suggested the idea of the pipe). I am not sure (haven't given it much thought).
I don't think iterating over the observable values is of much help (nor similar to what ng2+ does).
I am not saying a trailing $ is a good API, of course. It was just easy for a POC :smiley:
Frederik Prijck
@frederikprijck
Jan 12 2017 12:32 UTC
A trailing one is okay, in this case.
But if you write: ng-repeat="item in app.items$", and item$ is an observable, one could expect this to show an entry for every item emitted by the observable.
George Kalpakas
@gkalpak
Jan 12 2017 12:33 UTC
(Part of why it is not a good API :stuck_out_tongue: )
I was mainly interested of making it work through $watchCollection. I have no idea what a good API for this would.
Frederik Prijck
@frederikprijck
Jan 12 2017 12:34 UTC
But nvm, it looks awesome for a first POC. :D
George Kalpakas
@gkalpak
Jan 12 2017 12:34 UTC
(And of cource, being a POC, it can't handle anything more than the simplest expressions.)
Frederik Prijck
@frederikprijck
Jan 12 2017 12:34 UTC
Ye idd, I realized that now @gkalpak. Sorry :D
So you guys are talking/thinking about making ng1 love observables more ? As you mention pete talking about pipe's aswell ?
George Kalpakas
@gkalpak
Jan 12 2017 12:35 UTC
That's always on our radar (but nothing concrete yet).
Frederik Prijck
@frederikprijck
Jan 12 2017 12:37 UTC
@gkalpak Awesome.
Using NGRX, RXJS, Unidrectional Dataflow in ng1 realy make development feel close to ng2 (as ngrx is getting more and more common over there iirc), despite the differences.
Frederik Prijck
@frederikprijck
Jan 12 2017 12:47 UTC
I'd think watching for changes on objects in an array emitted by an observable in a comparable way might get a bit tricky... :see_no_evil:
If you feel like doing another POC @gkalpak ... :D
George Kalpakas
@gkalpak
Jan 12 2017 12:52 UTC
You mean something like $watchCollectioning on an emitted array?
am0nshi
@am0nshi
Jan 12 2017 12:52 UTC
guys, can ony1 help with idea, how can i properly organize routing for SPA app. i'm writting chat, which have static left nd right sidebars, but the middle of the page with chat whould be route-dependable, like chat/:userId. how can i properly organize this? use $routeProvider and ng-route? or can i manually handle location change? coz i need save state to organize quick switch between customers
Frederik Prijck
@frederikprijck
Jan 12 2017 12:52 UTC
@am0nshi Yes you use ngRoute or ui-Router.
There is no need to handle is manually.
Mbuyu Lucas Makayi
@makayi
Jan 12 2017 12:59 UTC
@am0nshi use UI-router's nested states and views
Frederik Prijck
@frederikprijck
Jan 12 2017 13:01 UTC
@gkalpak Nvm what I said, I ment this, but it works . https://codepen.io/anon/pen/WRwzKp?editors=1010 Somehow I thought we needed a deep comparison for this (that watchCollection by default only watches adding or deleting items. But that's not true. I guess I mixed it up with the objectEquality on $watch)
am0nshi
@am0nshi
Jan 12 2017 13:44 UTC
@frederikprijck @makayi thanks guys, and got second question, how can i build-in template into my base template and do not load them from server? coz i physically have only one template, which i want to manipulate via route
Mbuyu Lucas Makayi
@makayi
Jan 12 2017 13:46 UTC
@am0nshi let get this straight, you want to embed a templete into a template(base)?
am0nshi
@am0nshi
Jan 12 2017 13:47 UTC
@makayi i think i will be the best solution
Mbuyu Lucas Makayi
@makayi
Jan 12 2017 13:49 UTC
@am0nshi If you are using UI-router you can use Ui-View directive. Checkout my github repo for an example: https://github.com/makayi/Bakwetu. I have a home template that I inject other templates into using the ui-view directive.
am0nshi
@am0nshi
Jan 12 2017 13:50 UTC
@makayi i've use ng-route with ng-view directive, the question is how can i build-in part of template into main template and use it? i've read about it > 2yrs ago, but didn't remember the technology =\
some kind of template compilation
Frederik Prijck
@frederikprijck
Jan 12 2017 13:51 UTC
@am0nshi It's abit unclear to me what you want.
Maybe directives/components is what you are looking for ? But I honostly have no idea what you're looking for :(
am0nshi
@am0nshi
Jan 12 2017 13:52 UTC
@frederikprijck want to store route-dependend html into main template of the page and do not load them separately via route
Mbuyu Lucas Makayi
@makayi
Jan 12 2017 13:53 UTC
I haven't used Ng-route and ng-view before. Plus like you @frederikprijck is saying, it is hard to understand your issue, please clarify.
am0nshi
@am0nshi
Jan 12 2017 13:53 UTC
give me 5 mins please, im currently searching this solution
@makayi @frederikprijck https://docs.angularjs.org/api/ng/directive/script text/ng-template
@makayi @frederikprijck thanks for help, going to realize :)
Alex
@atodicebear
Jan 12 2017 13:59 UTC

Hey,
I get an error for ng-init I think -> TypeError: Cannot set property 'onload' of null
If I comment ng-init out the Error disappears

.html
<tr dir-paginate="v in $ctrl.htmlV" ng-init="originalTitel=v.dict_Langs[$ctrl.orig].HtmlLang.titel">
.js
class HtmlvalueComponent {
    constructor($http, $scope, Auth, $uibModal) {
      this.$http = $http;
      this.$scope = $scope;
      this.orig = 0;
    } // closing constructor
    /* ----------------------------------------------------------------------- */
    // "Get" All neccessary Datas on Init of Page
    $onInit() {
      this.showLang(7, 7);
     } 
// Change of Languages /Code
    showLang(code, code2) {
      this.$http.get('...' + code + '/' + code2)
        .then(response => {
          this.htmlV = response.data;
          console.log(this.htmlV);
        });
      (code <= code2 ?this.orig = 0:this.orig=1);
    }

this.orig is at no Point null or undefined so why it Errors?
Is there something like $onLoad(){} in Angular to set there the Values of this.orig or did I somewhere else something wrong?

Frederik Prijck
@frederikprijck
Jan 12 2017 14:02 UTC
@atodicebear can you create a plunkr ?
I'd say the issue is with v. But not sure.
Frederik Prijck
@frederikprijck
Jan 12 2017 14:16 UTC
You could check that using:
<tr dir-paginate="v in $ctrl.htmlV" ng-init="originalTitel=v"> {{originalTitel}}
Alex
@atodicebear
Jan 12 2017 14:43 UTC

@frederikprijck Ive tried but could not reproduce.
<tr dir-paginate="v in $ctrl.htmlV" ng-init="originalTitel=v"> {{originalTitel}} <-- Works gives me Infos out
By further Inspecting it seems have to do with TinyMce + ui-tinymce maybe.

<td>
         <input type="text" class="form-control" placeholder="//Html Values Titel" ng-value="originalTitel" ng-readonly='true'></input>
            <textarea ui-tinymce='tinymceOptionsRead' ng-model='originalText' ></textarea>
          </td>

If I comment that out no Problems at all.
With this in it Errors
TypeError: Cannot set property 'onload' of null if I change the Site and Loading the Site Errors TypeError: o is not a Constructor.
And one Step more is that in Development Mode everything works but this Error happen only in Production Mode...
I dont know where to start to check where the Problem could be :worried:

Shubham Singh
@imshubhamsingh
Jan 12 2017 14:53 UTC
@gkalpak thanks man
Renato Martins
@orochamartins
Jan 12 2017 17:01 UTC
Hi, after creating a Controller and insert it in a newly created Component, do i have i need to add it to my HTML code on the template? Because i have some functions that are related to the HTML content of the template on the ControllerJS, but when i load the APP, it doesnt work, it only works if i put the functions on the JS i created to initialize the APP.
Mahadevan
@karthic2914
Jan 12 2017 17:26 UTC
Hi all
angular.module('videoPortal',['ngMessages']).controller('logincntrl', function($scope){
    $scope.signIn = function (){
            alert("Check");
    }
});
I have code like this but when i am running i am getting error as
```
Argument 'logcntrl' is not a function, got undefined
Argument 'logincntrl' is not a function, got undefined
I already defined in html as
<div class="form" ng-controller="logincntrl">
                <div class="row">
                    <span class="col-sm-8 col-xs-8 col-md-8 pagetitle">
                        Login to get started
                     </span>
                     <span class="col-sm-4 col-xs-4 col-md-4 text-right">
                        <i class="fa fa-sign-in fa-3x" aria-hidden="true"></i>
                       </span>
                </div>

                <form name="loginName"  novalidate="" ng-submit="signIn()">
                <div class="margap15px"></div> 
                    <div class="input-group margin-bottom-sm">
                      <span class="input-group-addon"><i class="fa fa-user fa-fw iconColor"></i></span>
                      <input class="form-control" name="user_name" ng-model="username" type="text" placeholder="Username" required>
                    </div>
                     <div ng-messages="loginName.$submitted && loginName.user_name.$error" >
                        <p ng-message="required">Username is required.</p>
                    </div>
                    <div class="margap15px"></div>
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                      <input class="form-control" name="pass_word" ng-model="password" type="password" placeholder="Password" required>
                    </div>
                     <div ng-messages="loginName.$submitted && loginName.pass_word.$error">
                        <p ng-message="required">Password is required.</p>
                    </div>
                    <div class="margap15px"></div>
                  <button>Login</button>
                </form>
              </div>
sorry for the long code
Fan Lintao
@mutoulbj
Jan 12 2017 17:29 UTC
Maybe you should require the loginctrl module first before use it on js
Mahadevan
@karthic2914
Jan 12 2017 17:30 UTC
I have included controller also in the angular js
sorry in the html
@mutoulbj can you please let me know what was that
any suggestion
i am struggling here
Renato Martins
@orochamartins
Jan 12 2017 17:35 UTC
did you linked the controller right in your index?
Mahadevan
@karthic2914
Jan 12 2017 17:35 UTC
yes
<script type="text/javascript" src="script/angular-messages.js"></script>
    <script type="text/javascript" src="script/app.js"></script>
    <script type="text/javascript" src="script/controller/lgnControl.js"></script>
    <script type="text/javascript" src="script/controller/videoControl.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
Daniel Maldonado
@dannymk
Jan 12 2017 17:40 UTC
This may be a simple question but is there such a thing as a SPA loading "modules/separate apps" dynamically? I have an SPA that is pretty basic. A co-worker develops another spa which is "supposed" to b loaded at any time in response to a user clicking a button. Is it possible to do this and share state by using something like REDUX?
Renato Martins
@orochamartins
Jan 12 2017 17:42 UTC
@karthic2914 Did you initialized the App in your HTML? There's no typos?
Mahadevan
@karthic2914
Jan 12 2017 17:45 UTC

No @orochamartins

```

<html ng-app="videoPortal">
Mahadevan
@karthic2914
Jan 12 2017 17:56 UTC
?
Frederik Prijck
@frederikprijck
Jan 12 2017 18:48 UTC
@karthic2914 It might be better to reproduce it in a plunkr, here's a working (very basic) version: https://plnkr.co/edit/UwK2QjuQDvhj2APNUvGm?p=preview
SesioN
@SesioN
Jan 12 2017 19:05 UTC
Is this an angular bug ? https://plnkr.co/edit/yYg8RMQF73jgE7WkEbBl?p=preview (Try changing the input text, see how directive2 doesn't notice the change)
Or am I doing it wrong? also doing $watch(function() { return $scope.model() } is not an option, as then model() is getting executed in the wrong context, eg no access to this
Mahadevan
@karthic2914
Jan 12 2017 19:07 UTC
@frederikprijck but i want controller in different js
Frederik Prijck
@frederikprijck
Jan 12 2017 19:08 UTC
Ah so the code you pasted is not ur actual code. @karthic2914
I guess you didn't include the controller file in ur html ? Can you check that ?
@SesioN You're not supposed to pass functions using 2 way data binding
Santhosh Adari
@bhaachitraka
Jan 12 2017 19:15 UTC
i am still trying to figure out why i need to switch to angular 2 is the compilation from typescript to java script not going to make my app slow?
SesioN
@SesioN
Jan 12 2017 19:15 UTC
so the only way of solving this, would be not using 2 way data binding, but implementing NgModelController.. right?
@frederikprijck
Frederik Prijck
@frederikprijck
Jan 12 2017 19:15 UTC
@bhaachitraka You dont need to switch. And No, compilation happens at build time, not run time.
@SesioN I'm not sure what you're trying to do. Could you elaborate ?
Santhosh Adari
@bhaachitraka
Jan 12 2017 19:16 UTC
@frederikprijck we are starting a brand new app. in that case should we just blindly go with the pack and make angular2 our js framework?
Frederik Prijck
@frederikprijck
Jan 12 2017 19:17 UTC
@bhaachitraka Why would you ever go blindly with the pack ?
Imho there's nothing wrong with Angular 1 or Angular 2.
Go with what you feel comfortable imho.
But Angular2 will not result in slower apps, unless you write them that way.
Santhosh Adari
@bhaachitraka
Jan 12 2017 19:18 UTC
got it. just trying to evaluate. what ever i read online no one ever speak strongly on why angular2 is better than angular 1.5
so trying to get some inputs from the group
Frederik Prijck
@frederikprijck
Jan 12 2017 19:19 UTC
Angular2 is better for alot of reasons, but that doesn't make angular1 bad.
SesioN
@SesioN
Jan 12 2017 19:25 UTC
@frederikprijck I've been using this directive in my app, https://github.com/indrimuska/angular-switcher, some of my objects functions are defined as getter/setter
and I need to use those also with the directive that I linked, but when supplying my getterSetter as in the directive2 at plunker
it doesn't work.. so I was looking on how I can make it support both, normal and getterSetter
Mahadevan
@karthic2914
Jan 12 2017 19:48 UTC
earlier one which posted that was working now
thanks for all
now i have one more query i am using ng-message to show the error
 <form name="loginName" ng-controller="loginCtrl"  ng-submit="signIn()" no-validate>
                <div class="margap15px"></div> 
                    <div class="input-group margin-bottom-sm">
                      <span class="input-group-addon"><i class="fa fa-user fa-fw iconColor"></i></span>
                      <input class="form-control" name="user_name" ng-model="user_name" type="text" placeholder="Username" required>
                    </div>
                     <div ng-messages="loginName.$submitted && loginName.user_name.$error" >
                        <p ng-message="required">Username is required.</p>
                    </div>
                    <div class="margap15px"></div>
                    <div class="input-group">
                      <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                      <input class="form-control" name="pass_word" ng-model="pass_word" type="password" placeholder="Password" required>
                    </div>
                     <div ng-messages="loginName.$submitted && loginName.pass_word.$error">
                        <p ng-message="required">Password is required.</p>
                    </div>
                    <div class="margap15px"></div>
                  <input type="Submit" value="Submit"/>
                </form>
but i am getting jquery validation not ng messages
Frederik Prijck
@frederikprijck
Jan 12 2017 19:57 UTC
@karthic2914 Not sure if that's the reason, but u should use novalidate not no-validate
Mahadevan
@karthic2914
Jan 12 2017 19:59 UTC
we shouldn't use novalidate we have to use no-validate
i checked tht
actually i am getting the error message as tool tip please fill out this field
i have not given this message at all
Frederik Prijck
@frederikprijck
Jan 12 2017 20:05 UTC
@karthic2914 Where did u see that u need no-validate ?
Afaik there aint no no-validate attribute on a form.
Renato Martins
@orochamartins
Jan 12 2017 20:46 UTC
Guys, when creating a component like this:
app.component('menu',{
    templateUrl: 'components/menu/menu.html',
    controller: 'menuController'});
If i put some function in that 'menuController'
do i need to connect 'menuController' in my 'menu.html' template?
Frederik Prijck
@frederikprijck
Jan 12 2017 21:04 UTC
@orochamartins No, all controller methods are available in the html on the $ctrl object by default. (for components this is)
Frederik Prijck
@frederikprijck
Jan 12 2017 21:21 UTC
@orochamartins This only counts for controller methods, not functions inside the controller.
Renato Martins
@orochamartins
Jan 12 2017 22:06 UTC
So lets imagine i have a function inside that controller above called 'putData'. If i want to use that function on my template. I need to to $ctrl.putData ? Even if that function doesnt need any params?
Frederik Prijck
@frederikprijck
Jan 12 2017 22:06 UTC
If it's a method, u can do : $ctrl.putData(). (you do need the () part)