These are chat archives for angular/angular.js

27th
Jan 2017
Haopei Yang
@haopei
Jan 27 2017 00:18 UTC
I am having a difficult time understanding the difference between .bootstrap(), .run() and the default initiation in angular app
I’ve read some literature on it, and still a bit confused. Is there a simple summary of how they are different?
Aleksandra Barecka
@OlkaB
Jan 27 2017 05:39 UTC
Hi all! I would like to ask for your help. I'm just starting with angular (exercising with To-do List) and I have a problem with part of js code in angular controller. Could you please look at below pen and help me discover, why $scope.itemToDeletePosition is always returning 0? http://codepen.io/AAwersja/pen/pRWYYd Other suggestions reffering to the code are also welcomed! Thanks.
sandeep gangwar
@sandeepgangwar
Jan 27 2017 06:19 UTC

@OlkaB
$scope.idOfItemToDelete = $scope.taskList[0].id;

You always try to delete first element

Aleksandra Barecka
@OlkaB
Jan 27 2017 06:43 UTC
@sandeepgangwar omg - you're right! Thank you very much:)
sandeep gangwar
@sandeepgangwar
Jan 27 2017 06:51 UTC

@OlkaB

You should pass item as param for deleteTask function
not $scope.item
and assign it to
$scope.idOfItemToDelete = item.id;

http://codepen.io/sandeepgangwar23/pen/xgXeJb

Aleksandra Barecka
@OlkaB
Jan 27 2017 06:54 UTC
@sandeepgangwar it's working great! Thank you once again:)
sandeep gangwar
@sandeepgangwar
Jan 27 2017 06:54 UTC
@OlkaB Welcome :smile:
Robert Kapp
@kapprob
Jan 27 2017 07:44 UTC
Hey everyone! I have an Asp.Net Web Application with cshtml Files (MVC, Razor). The cshtml files are integrated in a CMS as Content and List Modules and so on. Some (and only some) of these Modules i need to run with angular 2. Is it even possible to integrate angular 2 only partial in a project? Like i don't want the whole site to be an angular 2 App, but this one individual module of the Site. Thanks in advance! Hope someone can help me out..
Problem is, if there are two angular Modules on the site, i would need two apps. I heard of simply bootstrapping two apps but i'm a beginner in angular 2...
Frederik Prijck
@frederikprijck
Jan 27 2017 07:48 UTC
@Intergalactic-Robotronic https://gitter.im/angular/angular
Harmanpreet Singh
@harman052
Jan 27 2017 08:06 UTC
Hi friends! I need little help regarding AngularJS validations. I implemented validations in form that appears into a dialog box. Validations are working fine, the only problem is, they flash up for a fraction of second when the dialog box loads. Once loaded, they disappear. This is happening only on IE 11. Tried to find out the root cause, but all in vain. Please help! Thanks for reading.
Frederik Prijck
@frederikprijck
Jan 27 2017 08:47 UTC
@harman052 I'm not familiar with that issue. Would you mind to reproduce in a plunkr so I can have a look ?
George Kalpakas
@gkalpak
Jan 27 2017 08:50 UTC
@haopei: angular.bootstrap() is used to...bootstrap an AngularJS app. I.e. it takes all the services, directives, controllers, filters, configurations, initialization instructions that you have provided and builds an app out of it.
myApp.run() is a method for providing initialization instructions. The name might be a little confusing. It doesn't run anything at the time. It lets you provide a callback that will be called once the module/app is bootstraped. I guess onInit or onBootstrap or afterBootstrap would be more descriptive names :smiley:
Harmanpreet Singh
@harman052
Jan 27 2017 09:30 UTC
@frederikprijck so I was fortunate enough to got a suggestion from colleague, that was to try changing ng-show with ng-if and it worked!
I will dig into it why and how this happened.
George Kalpakas
@gkalpak
Jan 27 2017 09:58 UTC
Are you using ngAnimate? I think this may be related to animation stuff and how temporary classes are applied. Most such isues are fixed by applying appropriate styling to the correct classes (but it can be tricky :smiley:).
If you can avoid it altogether with ngIf, I would say go for it :smiley:
Frederik Prijck
@frederikprijck
Jan 27 2017 10:07 UTC
Is angular's validation mechanism (in specific, custom validators) supposed to work well with checkValidity() (https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity)?
Coz I'm using a library which validates an input using: var isValid = (typeof $input[0].checkValidity === "undefined" || $input[0].checkValidity());.
But I'm unsure if this is a great idea ? I got a feeling my custom validator isn't being picked up by checkValidity. (or I'm doing something wrong in the validator)
Frederik Prijck
@frederikprijck
Jan 27 2017 10:14 UTC
export class UniquePropertyValue implements angular.IDirective {
    restrict = 'A';
    require = 'ngModel';
    scope = {
        property: '@',
        items: '<',
        exclude: '<'
    };
    link(scope: IUniquePropertyValueScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes, ngModel: angular.INgModelController) {

        ngModel.$validators['uniquePropertyValue'] = (modelValue) => {
            return !scope.items || (scope.exclude && modelValue === scope.exclude) || !scope.items.some(item => item[scope.property] === modelValue);
        };

        scope.$watch('items', () => { ngModel.$validate(); });
    }
}
Frederik Prijck
@frederikprijck
Jan 27 2017 10:20 UTC
Using a $parser and setting validity explicitly doesn't work either.
Haopei Yang
@haopei
Jan 27 2017 10:20 UTC
@gkalpak thank you for the explanation. It is a little more clear now. I think I am missing the foundational knowledge of angular's order of execution. Let me research that a little bit. If you have any resources, please point me to them. Thank you again!
ChristopheSR
@ChristopheSR
Jan 27 2017 10:30 UTC
I am developing an app with a large json datafile and I am struggeling with the service and the async pipe
George Kalpakas
@gkalpak
Jan 27 2017 10:32 UTC
@haopei: My favorite resources are this, this, this and this (but I am biased :stuck_out_tongue:).
You can also find some useful resources here.
ChristopheSR
@ChristopheSR
Jan 27 2017 10:32 UTC
I want to work with observe and interval but keep getting the following error Property 'interval' does not exist on type 'Observable<Response>'

`import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { IProduct } from './product';

@Injectable()
export class ProductService {
private _productUrl = 'api/products/products.json';

constructor(private _http: Http) {}

getProducts(): Observable<IProduct[]> {
return this._http.get(this._productUrl)
.interval(1000)
.map((response: Response) => <IProduct[]> response.json())
.catch(this.handleError);
}

private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}

}`

George Kalpakas
@gkalpak
Jan 27 2017 10:34 UTC
@ChristopheSR: Try on the Angular channel.
@frederikprijck: Where's the plnkr? :wink:
basicly, typing 'Test' should be invalid.
There's no validity showing on page load, you can trigger it by typing in the textbox.
But I'm not sure if this is supposed to work that way @gkalpak
George Kalpakas
@gkalpak
Jan 27 2017 10:39 UTC
Ah, no this won't work. I don't think you can affect checkValidity in that way.
AFAIK, it will only check for the restriction that HTML5 knows about (e.g. required, pattern, type etc).
Frederik Prijck
@frederikprijck
Jan 27 2017 10:39 UTC
ng-required works fine, but I guess that makes use of required.
George Kalpakas
@gkalpak
Jan 27 2017 10:39 UTC
Right
Frederik Prijck
@frederikprijck
Jan 27 2017 10:39 UTC
But that sux, coz that code is inside a library I'm using.
:D
I shouldn't have used that library tho. But they aint gonna let me replace it.
George Kalpakas
@gkalpak
Jan 27 2017 10:40 UTC
¯\_(ツ)_/¯
Frederik Prijck
@frederikprijck
Jan 27 2017 10:41 UTC
Is there any other way this could work @gkalpak ? So I can monkey patch the library :(
I doubt it's easy/possible
George Kalpakas
@gkalpak
Jan 27 2017 10:42 UTC
So, basically the librry needs for checkValidity to take into account ngModel.
Frederik Prijck
@frederikprijck
Jan 27 2017 10:44 UTC
But checkValidity is a default JS method, right ?
George Kalpakas
@gkalpak
Jan 27 2017 10:45 UTC
You might be able to hack around it, but it would get too messy. I wouldn't do it.
This works :joy:
George Kalpakas
@gkalpak
Jan 27 2017 10:48 UTC
If you don't want to use the library that relies on checkValidity, then you're golden.
Actually you might be able to do it with setCustomValidity
Frederik Prijck
@frederikprijck
Jan 27 2017 10:51 UTC
Awesomesause! @gkalpak
George Kalpakas
@gkalpak
Jan 27 2017 10:52 UTC
(Just a POC - be careful in production :wink:)
Frederik Prijck
@frederikprijck
Jan 27 2017 10:53 UTC
Don't validator's call ngModel's setValidity method ?
George Kalpakas
@gkalpak
Jan 27 2017 11:12 UTC
Probably
Frederik Prijck
@frederikprijck
Jan 27 2017 11:24 UTC
Thanks @gkalpak , it does seem to work in the browsers I need to support.
Frederik Prijck
@frederikprijck
Jan 27 2017 11:32 UTC
Nevermind, some built in validators (e.g. ng-maxlength) don't work neither.
Frederik Prijck
@frederikprijck
Jan 27 2017 11:51 UTC
I'm going to throw out the library, not sure if it was a good idea to use it anyway. :joy: Thanks tho @gkalpak
Haopei Yang
@haopei
Jan 27 2017 14:05 UTC
@gkalpak thank you :)
ankitdhama
@ankitdhama
Jan 27 2017 14:49 UTC
Can someone please send the example of single page application in angularjs with pretty url (without using #! in the url)
localhost/home in place of locahost/#home
Any link of example application will be a great help
ankitdhama
@ankitdhama
Jan 27 2017 14:56 UTC
thanks a lot @frederikprijck
I think it will not work when i refresh the page @frederikprijck
Frederik Prijck
@frederikprijck
Jan 27 2017 15:02 UTC
And why do you think that ?
ankitdhama
@ankitdhama
Jan 27 2017 15:04 UTC
Because i had already used $locationProvider it works great but when we refresh the page it show 404 error
@frederikprijck
Frederik Prijck
@frederikprijck
Jan 27 2017 15:04 UTC
That doesn't sound expected behavior.
ankitdhama
@ankitdhama
Jan 27 2017 15:06 UTC
yes it does, i will host a sample app on iis server to show the issue
Frederik Prijck
@frederikprijck
Jan 27 2017 15:12 UTC
It still doesn't sound like expected behavior.
Christiaan Scheermeijer
@ChristiaanScheermeijer
Jan 27 2017 15:35 UTC
@frederikprijck, do you have configured your webserver to support HTML5 routing?
Matteo
@matteoPhre
Jan 27 2017 15:37 UTC
hi guys!! i have a problem with date filter in IE11. I'm usign angular 1.5.7 and sometimes it cannot format this type of date [Tue Nov 11 2014 00:00:00 GMT+0100 (ora solare Europa occidentale)]
it returns null in binding
any helps would be appreciated :)
Christiaan Scheermeijer
@ChristiaanScheermeijer
Jan 27 2017 15:48 UTC
How do you parse the Date string?
Matteo
@matteoPhre
Jan 27 2017 15:49 UTC
{{suggestedPosting.insertTimestamp | date:'dd/MM/yyyy'}}
Christiaan Scheermeijer
@ChristiaanScheermeijer
Jan 27 2017 15:50 UTC
And you insert a string like this? Tue Nov 11 2014 00:00:00 GMT+0100
Matteo
@matteoPhre
Jan 27 2017 15:50 UTC
yep
i saw that is a IE issue, not properly an angular issue
Christiaan Scheermeijer
@ChristiaanScheermeijer
Jan 27 2017 15:51 UTC
Ok, not really a convenient format
its not Angular related but browser related
Matteo
@matteoPhre
Jan 27 2017 15:52 UTC
yes i saw that is an explorer issue for seconds in time i think
Christiaan Scheermeijer
@ChristiaanScheermeijer
Jan 27 2017 15:52 UTC
Do you have a library like moment.js included?
Matteo
@matteoPhre
Jan 27 2017 15:57 UTC
yes i have moment included, i have to change format before binding in html?
Christiaan Scheermeijer
@ChristiaanScheermeijer
Jan 27 2017 16:09 UTC
No, but you can use moment.js to parse the string