@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)
Hi, what is the technical term for this sort of dependency inection?
app.controller("testCtrl", ["$scope", "$log", function(a,b){}])
anyone knows how to add this
sliding-animation to this ng-repeat-end & ng-repeat-start
@badcoder28 you didn't read the documentation for ng-animate? It's very simple and easy
@badcoder28 http://www.nganimate.org/
@relentless-coder I call this:
explicite dependency annotation using the inline bracket notation.
@frederikprijck lol. I just named it as
dependency injection via an array
I don't think that's clear enough.
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.
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
see, I didn't know that. Now, I need to come up with a new name.
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 arrraythe 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).
@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.
Starting with the docs is generally a great idea.
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
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.
@relentless-coder i did but i cant see some example with ng-repeat end and start
@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>
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!
@frederikprijck that is what im trying now since maybe the animation wont work with ng-repeat-start and ng-repeat-end
@julianamariemorales how are you calling your startCountdown function ?
@badcoder28 for ng-repeat, ngAnimate provides only three types of animation. enter, leave and move
@julianamariemorales this seems to work https://plnkr.co/edit/iFTpNOPrULU1yhRplNCK
@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)...
@julianamariemorales are you getting any error?
@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);
}
};
@frederikprijck Thank you it worked! Thank you also @relentless-coder :)
@frederikprijck hey, could you explain why would it never be less than zero?
Look at the plunkr: https://plnkr.co/edit/iFTpNOPrULU1yhRplNCK
You start with a value
5 and next you subtract the value 1 from it for 5 times. 5-(5*1) = 0.
okay. I got it, the number of times is equal to initial value of $scope.countdown
Yes !
@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.
@relentless-coder https://gitter.im/wycats/handlebars.js :D I don't do handlebars.
lol. that room hasn't got any activity since november of last year :smile:
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?
Should i install this plugins manually? Or can i define in some app files? Like package.json bower.json?
Yes @devseba_twitter you should add them using package.json . (or using
npm install)
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
@devseba_twitter bower install -S karma or whatever is the name
this will update your package.json file automatically
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
well, your team will then run bower install, and all the dependencies listed in the json file will get downloaded
and push it into git REPO
ok
understand thanks ;)
bower install -S karma or whatever is the name
this will update your package.json file automatically
this is not true.
oh
what????
why??
He needs to do
npm install
but he can install packages with the help of bower too. right?
Not these packages, he shouldn't use bower for karma and jasmine.
npm install --save-dev karma jasmine
maybe problem is that i dont know the difference
i am learning angularjs and all this stuff
like node
npm
bower
grunt
etc
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.
i need this. Probably i will work in project with java and angularJS :P
also, don't use yeoman if you haven't got used to creating files for angular js projects. write them from scratch.
@relentless-coder Why shouldn't he use yeoman? It's making no sense at all.
yeah i am writing it form scratch
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).
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
@relentless-coder About why using npm and not bower. Read the docs: https://karma-runner.github.io/latest/intro/installation.html
@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.
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.
dont worry... I always learn from scratch :)
and by the time i add more tools
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
You are talking to me? Because i dont know :D
@Twentyfoureyes
yes, also to you :)
@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.
@devseba_twitter i was talking about when you starting as a beginner.
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.
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'
]
},
modules: [
path.resolve(__dirname)
],
alias: {
configurations: 'app/configurations',
artifactory: 'artifactory/node_modules'
},
extensions: [
'',
'.js',
'.ts'
]
},
@maxchernin https://gitter.im/webpack/webpack
shit thought i was at the webpack channel
sorry
sorry
@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.
@gkalpak Thanks, ye using inline array annotation is prerry clear aswell
I'm looking for resources on optmizing the build for production in angular 2 app.
I'm using webpack
as of now no code other than wiring up main module and simple component. 6.7M :worried:
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
Any concrete examples ? :D
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
Well, that doesn't look like normal IE behavior to me. You sure you're not making it display the mobile version ?
We don't even have a mobile version, lol
That's what makes it worse
Well, you're saying it's displaying as if its a mobile version ?
Yeah, its somehow deciding I'm viewing it from a phone
or on a phone
And how is he doing that ?
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
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
{
"instant": [
"121212",
"121212121"
]
}
"instant": [
"121212",
"121212121"
]
}
because the majority of our clients probably use it, ugggh
Hello friends how do i parse it using material AngularJS
json.parse
<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;
});
<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).
"instant": [
"121212",
"121212121"
]
} It is server json file(instant.json).
@mehtaharsh1995 json.parse($scope.instants)
json parse shouldn't be neccesary iirc ?
I don't think so, but I just answered the question, lol
In normal Dropdown it will show, But not show in <md-chips-select ng-model="myItems" select-items="instants" ></md-chips-select>
@mehtaharsh1995 according to the docs of https://github.com/qqnc/md-chips-select that should work. But maybe ask them, or create a plunkr.
I have seen that but not work
What is it exactly that's not working?
Actually value is not shown from instant.json( I want to display 121212",
"121212121" from json) using md-chips-select
"121212121" from json) using md-chips-select
Is there any another way to multiple select item from drop-down menu using Material JS?
@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.
ok thanks
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.
Which one?
angular/angular.js#15627
It's on my TODO list. Will review it this week. Be patient :smiley:
ok, thank you. Just need it to be working :)