These are chat archives for angular/angular.js

23rd
Jan 2017
Frederik Prijck
@frederikprijck
Jan 23 2017 07:26
@adamreisnz I guess that's because a component is only a directive with some syntactical sugar (using controllerAs: '$ctrl'by default). Making the view still being bound to the $scope, but the controller exposed on the scope using $ctrl (IIRC)
Ayush Bahuguna
@relentless-coder
Jan 23 2017 08:27
Hi, what is the technical term for this sort of dependency inection?
app.controller("testCtrl", ["$scope", "$log", function(a,b){}])
Roel
@roelzkie15
Jan 23 2017 08:31
anyone knows how to add this sliding-animation to this ng-repeat-end & ng-repeat-start
Ayush Bahuguna
@relentless-coder
Jan 23 2017 08:38
@badcoder28 you didn't read the documentation for ng-animate? It's very simple and easy
Frederik Prijck
@frederikprijck
Jan 23 2017 08:44
@relentless-coder I call this: explicite dependency annotation using the inline bracket notation.
Ayush Bahuguna
@relentless-coder
Jan 23 2017 08:44
@frederikprijck lol. I just named it as dependency injection via an array
Frederik Prijck
@frederikprijck
Jan 23 2017 08:45
I don't think that's clear enough.
Ayush Bahuguna
@relentless-coder
Jan 23 2017 08:46
also, anthony alicea's course on angularjs is really great. Learned for the first time that in case of dependency injection via an arrray the order of the parameters matter.
Frederik Prijck
@frederikprijck
Jan 23 2017 08:46
Coz you could do: MyController.$inject = ["$scope", "$log"];. This is also using an array but I call this: explicite dependency annotation using the $injector notation
Ayush Bahuguna
@relentless-coder
Jan 23 2017 08:47
see, I didn't know that. Now, I need to come up with a new name.
Frederik Prijck
@frederikprijck
Jan 23 2017 08:47
My name is pretty much based on the docs :)

@relentless-coder

also, anthony alicea's course on angularjs is really great. Learned for the first time that in case of dependency injection via an arrray the order of the parameters matter.

This is mentioned in the official docs aswell (tho maybe not in the most clear way, but it's there).

Ayush Bahuguna
@relentless-coder
Jan 23 2017 08:49
@frederikprijck I have a hard time reading docs. I either want a book or a video.
although, I know I should get in the habbit, therefore, yesterday I picked up express and read it's docs instead.
Frederik Prijck
@frederikprijck
Jan 23 2017 08:50
Starting with the docs is generally a great idea.
Ayush Bahuguna
@relentless-coder
Jan 23 2017 08:52
But, angular js docs contain a lot of heavy words. It get's difficult for me to get the context, since I am not a native speaker
Frederik Prijck
@frederikprijck
Jan 23 2017 08:53
There's nothing wrong with learning angularjs using video tutorials btw. Just ensure to also check the docs (or even source code). I think it's great thing to combine both.
Roel
@roelzkie15
Jan 23 2017 08:57
@relentless-coder i did but i cant see some example with ng-repeat end and start
Frederik Prijck
@frederikprijck
Jan 23 2017 09:00
@badcoder28 I'm not familiar with ngAnimate, but what about: <div ng-repeat="item in itens" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">...</div>
Juliana Marie
@julianamariemorales
Jan 23 2017 09:07

Hi guys, Im trying to use the $interval service to initiate a countdown, however, it seems my countdown is not working. I created a startCountdown function n to call it. Am I calling the service wrong?

var anghttp4 = angular.module('anghttp4', []);

anghttp4.controller ('MainController', function($scope, $http, $interval){
  var onUserComplete = function(response){
    $scope.user = response.data;
    $http.get($scope.user.repos_url)
      .then(onRepos, onErr);

    $scope.success = "Successfully got user from Github!";
    $scope.message = "alert alert-success";
  };

  var onRepos =function(response){
    $scope.repos = response.data;
  };

  var onErr = function(whathappened){
    $scope.error = "Could not get user data";
    $scope.message = "alert alert-danger";
  };

    $scope.search = function(username){
    $http.get ("https://api.github.com/users/" + username)
    .then(onUserComplete, onErr);
  };

  $scope.username =  "julianamariemorales";
  $scope.countdown = 5;

  //startCountdown();
  $scope.startCountdown = function() {
      $interval($scope.decrementCountDown, 1000,$scope.countdown);
    };
    $scope.decrementCountDown = function() {
      $scope.countdown -= 1;
      if ($scope.countdown < -1) {
        $scope.search($scope.username);
      }
    };


  /*
  //$interval(fn, delay, [count], [invokeApply], [Pass]);
  var decrementCountDown = function() {
    $scope.countdown -= 1;
    if ($scope.countdown < -1) {
      $scope.search($scope.username);
    }

    $scope.startCountdown = function() {
        $interval(decrementCountDown, 1000,$scope.countdown);
     };
     $scope.startCountdown();
   };
   */

});

Thank you!

Roel
@roelzkie15
Jan 23 2017 09:07
@frederikprijck that is what im trying now since maybe the animation wont work with ng-repeat-start and ng-repeat-end
Ayush Bahuguna
@relentless-coder
Jan 23 2017 09:13
@julianamariemorales how are you calling your startCountdown function ?
@badcoder28 for ng-repeat, ngAnimate provides only three types of animation. enter, leave and move
Frederik Prijck
@frederikprijck
Jan 23 2017 09:15
@julianamariemorales this seems to work https://plnkr.co/edit/iFTpNOPrULU1yhRplNCK
Juliana Marie
@julianamariemorales
Jan 23 2017 09:20
@relentless-coder @frederikprijck I have $scope.startCountdown(); before the module ends. Sorry I meant the countdown works but the automatic search that I want to happen when the countdown ends does not work. This part does not execute $scope.search($scope.username)...
Ayush Bahuguna
@relentless-coder
Jan 23 2017 09:22
@julianamariemorales are you getting any error?
Frederik Prijck
@frederikprijck
Jan 23 2017 09:24
@julianamariemorales $scope.countdown will never be lower then -1.
You need:
$scope.decrementCountDown = function() {
      $scope.countdown -= 1;
      if ($scope.countdown === 0) {
        $scope.search($scope.username);
      }
    };
Juliana Marie
@julianamariemorales
Jan 23 2017 09:26
@frederikprijck Thank you it worked! Thank you also @relentless-coder :)
Ayush Bahuguna
@relentless-coder
Jan 23 2017 09:28
@frederikprijck hey, could you explain why would it never be less than zero?
Frederik Prijck
@frederikprijck
Jan 23 2017 09:29
You start with a value 5 and next you subtract the value 1 from it for 5 times. 5-(5*1) = 0.
Ayush Bahuguna
@relentless-coder
Jan 23 2017 09:30
okay. I got it, the number of times is equal to initial value of $scope.countdown
Frederik Prijck
@frederikprijck
Jan 23 2017 09:31
Yes !
Ayush Bahuguna
@relentless-coder
Jan 23 2017 09:51
@frederikprijck hey, do you have experience with handlebars.js ? I am using it on my portfolio website because the html was overpopulated with repeated content. but for a certain functionality, I am supposed to retrieve a nodelist of 'li' elements. After using handlebars, i am getting an HTMLcollection, and it's not even converting to an array.
Frederik Prijck
@frederikprijck
Jan 23 2017 09:57
@relentless-coder https://gitter.im/wycats/handlebars.js :D I don't do handlebars.
Ayush Bahuguna
@relentless-coder
Jan 23 2017 09:58
lol. that room hasn't got any activity since november of last year :smile:
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:02
Hi guys. if i want use karma/jasmine... generally i want test my app.
Should i install this plugins manually? Or can i define in some app files? Like package.json bower.json?
Frederik Prijck
@frederikprijck
Jan 23 2017 10:06
Yes @devseba_twitter you should add them using package.json . (or using npm install)
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:08
ok but do i know it correctly? when i will use npm install i will instal it manually in nodem_modules or globally (-g) on my OS. Yep?
But adding dependency to package.json will be automatic?
Of course i mean the installation this dependency will be automatic
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:10
@devseba_twitter bower install -S karma or whatever is the name
this will update your package.json file automatically
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:11
oh ok understand
but what if i work in a teamt
for example of course
when i do bower install -S karma
this add to bower.json (or package.json) a dependency
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:12
well, your team will then run bower install, and all the dependencies listed in the json file will get downloaded
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:12
and push it into git REPO
ok
understand thanks ;)
Frederik Prijck
@frederikprijck
Jan 23 2017 10:12
bower install -S karma or whatever is the name
this will update your package.json file automatically
this is not true.
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:12
oh
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:12
what????
why??
Frederik Prijck
@frederikprijck
Jan 23 2017 10:13
He needs to do npm install
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:13
but he can install packages with the help of bower too. right?
Frederik Prijck
@frederikprijck
Jan 23 2017 10:13
Not these packages, he shouldn't use bower for karma and jasmine.
npm install --save-dev karma jasmine
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:15
maybe problem is that i dont know the difference
i am learning angularjs and all this stuff
like node
npm
bower
grunt
etc
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:15
okay. that's what wrong. I thought the syntax was wrong. but why shouldn't the karma and jasmine be downloaded through bower?
@devseba_twitter to be honest, don't dive into that stuff. This is coming from someone who has recently started angular js. I am guessing you'd be practicing on small apps, so you don't really need grunt files, which I think you'd mostly use to concat your files or minify them, but you don't really need it for like one css file.
focus on learning angular. of course, np and node are kind of important, but that's about it, you don't really want to drown in build systems.
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:18
i need this. Probably i will work in project with java and angularJS :P
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:20
also, don't use yeoman if you haven't got used to creating files for angular js projects. write them from scratch.
Frederik Prijck
@frederikprijck
Jan 23 2017 10:21
@relentless-coder Why shouldn't he use yeoman? It's making no sense at all.
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:21
yeah i am writing it form scratch
Frederik Prijck
@frederikprijck
Jan 23 2017 10:21
You want him to use bower for karma/jasmine and not use yeoman. I'm not sure why. He should use npm for karma/jasmine and is free to use yeoman (i'd even advice if it you lack some experience).
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:21
But i will use yeoman
because it gives me that what i want... nice structure :)
but first of all i am creating it from scratch
because i like learn by this way
Frederik Prijck
@frederikprijck
Jan 23 2017 10:23
@relentless-coder About why using npm and not bower. Read the docs: https://karma-runner.github.io/latest/intro/installation.html
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:24
@frederikprijck i am not prohibiting him from using yeoman. it's just that, how would he understand the code structure for directives and routing if he hasn't written it from scratch at least once. That's what I not liked about professional angularjs from wrox publication. it starts with a project, but then straight away starts using yeoman, without even explaining what is the code structure.
Frederik Prijck
@frederikprijck
Jan 23 2017 10:25
Because learning angular is not about learning grunt, gulp, webpack etc.
There are great starters to help u scaffold a project so you can focus on angular only. Personally I started learning angular based on scaffold tools and it helped me alot.
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:25
dont worry... I always learn from scratch :)
and by the time i add more tools
Dieter De Ridder
@Twentyfoureyes
Jan 23 2017 10:26
It's not because you use a yeoman generator, that you can't write and angular controller from scratch. The advantage of a yeoman generator is that you don't have to bother with your project setup and build
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:27
You are talking to me? Because i dont know :D
@Twentyfoureyes
Dieter De Ridder
@Twentyfoureyes
Jan 23 2017 10:29
yes, also to you :)
Ayush Bahuguna
@relentless-coder
Jan 23 2017 10:29
@frederikprijck not talking about the working of yeoman. For example, in the book, when the need of routing came, he didn't explain the route parameters, just started asking to put paths to when and otherwise. For a beginner, it gets really confusing.
@devseba_twitter i was talking about when you starting as a beginner.
Sebastian Wierzbicki
@devseba_twitter
Jan 23 2017 10:30
So i will repeat. I always try learn from scratch. And with the passing of time i add another tools. So...
I am writting app mannualy. But probably in future i will use yeoman.
etc.
Max Chernin
@maxchernin
Jan 23 2017 12:00
hi im trying to migrate to webpack 2
does the alias field stay the same?
resolve: {
modules: [
path.resolve(__dirname)
],
alias: {
configurations: 'app/configurations',
artifactory: 'artifactory/node_modules'
},
extensions: [
'',
'.js',
'.ts'
]
},
Frederik Prijck
@frederikprijck
Jan 23 2017 12:01
Max Chernin
@maxchernin
Jan 23 2017 12:02
shit thought i was at the webpack channel
sorry
George Kalpakas
@gkalpak
Jan 23 2017 12:14
@relentless-coder , @frederikprijck, I know I'm late to the party, but since it wasn't mentioned in the discussion (I think), the official name of the ["foo", "bar", function(foo, bar) {...}] injection style (according to the docs) is Inline Array Annotation.
Frederik Prijck
@frederikprijck
Jan 23 2017 12:16
@gkalpak Thanks, ye using inline array annotation is prerry clear aswell
Diego de Souza
@diegodesouza
Jan 23 2017 15:56
I'm looking for resources on optmizing the build for production in angular 2 app.
I'm using webpack
Diego de Souza
@diegodesouza
Jan 23 2017 16:09
as of now no code other than wiring up main module and simple component. 6.7M :worried:
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:49
for the love of everything holy...does anyone have an idea of how to stop IE from displaying things as if its a mobile version? It's breaking the site
Frederik Prijck
@frederikprijck
Jan 23 2017 16:49
Any concrete examples ? :D
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:51
Lol, no, it just started happening....at first it was an issue with not recognizing ES6 code...I transpiled it, everything was working fine in IE, then all of a sudden it decided that this was a mobile version and it would display it that way and its wrecking the site
Frederik Prijck
@frederikprijck
Jan 23 2017 16:52
Well, that doesn't look like normal IE behavior to me. You sure you're not making it display the mobile version ?
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:52
We don't even have a mobile version, lol
That's what makes it worse
Frederik Prijck
@frederikprijck
Jan 23 2017 16:53
Well, you're saying it's displaying as if its a mobile version ?
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:53
Yeah, its somehow deciding I'm viewing it from a phone
or on a phone
Frederik Prijck
@frederikprijck
Jan 23 2017 16:53
And how is he doing that ?
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:53
and its got the little mobile version menu thing at the top, etc
No idea
Apparently this is a common thing based on the literally hundreds of google searches that came back
IE needs to be thrown in a grave and covered with a metric ton of dirt this thing sucks
so instead of actually doing something productive, I have to sit here and figure out why IE sucks and how to make it work right
Frederik Prijck
@frederikprijck
Jan 23 2017 16:55
If you want you can send me a screenshot... But maybe send me in PM as this aint angular related and we're flooding the channel abit :D
mehtaharsh1995
@mehtaharsh1995
Jan 23 2017 16:55
{
"instant": [
"121212",
"121212121"
]
}
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:55
because the majority of our clients probably use it, ugggh
mehtaharsh1995
@mehtaharsh1995
Jan 23 2017 16:56
Hello friends how do i parse it using material AngularJS
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:56
json.parse
mehtaharsh1995
@mehtaharsh1995
Jan 23 2017 16:58
<span>You have selected: {{myItems}} </span>
<md-chips-select ng-model="myItems" select-items="instants" ></md-chips-select>
$http.get('instant.json')
.then(function(response) {
$scope.instants = response.data.instant;
});
{
"instant": [
"121212",
"121212121"
]
} It is server json file(instant.json).
Matt Erman
@CodeLiftSleep
Jan 23 2017 16:59
@mehtaharsh1995 json.parse($scope.instants)
Frederik Prijck
@frederikprijck
Jan 23 2017 17:00
json parse shouldn't be neccesary iirc ?
Matt Erman
@CodeLiftSleep
Jan 23 2017 17:00
I don't think so, but I just answered the question, lol
mehtaharsh1995
@mehtaharsh1995
Jan 23 2017 17:01
In normal Dropdown it will show, But not show in <md-chips-select ng-model="myItems" select-items="instants" ></md-chips-select>
Frederik Prijck
@frederikprijck
Jan 23 2017 17:01
@mehtaharsh1995 according to the docs of https://github.com/qqnc/md-chips-select that should work. But maybe ask them, or create a plunkr.
mehtaharsh1995
@mehtaharsh1995
Jan 23 2017 17:02
I have seen that but not work
Frederik Prijck
@frederikprijck
Jan 23 2017 17:03
What is it exactly that's not working?
mehtaharsh1995
@mehtaharsh1995
Jan 23 2017 17:07
Actually value is not shown from instant.json( I want to display 121212",
"121212121" from json) using md-chips-select
Is there any another way to multiple select item from drop-down menu using Material JS?
Frederik Prijck
@frederikprijck
Jan 23 2017 17:18
@mehtaharsh1995 I guess there are a few libraries, but I haven't realy used one. Feel free to reproduce the problem in a plunkr so I can take a look at it.
mehtaharsh1995
@mehtaharsh1995
Jan 23 2017 17:19
ok thanks
vteremasov
@vteremasov
Jan 23 2017 18:06
Hi guys, how long does it take to review a pr, actually ? I've submit a pr and it looks like I still need some checks to apply however I've followed the contribution guideline.
George Kalpakas
@gkalpak
Jan 23 2017 18:16
Which one?
vteremasov
@vteremasov
Jan 23 2017 18:24
angular/angular.js#15627
George Kalpakas
@gkalpak
Jan 23 2017 19:26
It's on my TODO list. Will review it this week. Be patient :smiley:
vteremasov
@vteremasov
Jan 23 2017 19:27
ok, thank you. Just need it to be working :)