Your tutorials are *really* helpful and I'm baffled by the lack of views... this set of 25 tutorials was honestly the least intimidating and most logical flow for introducing angular that I've seen yet, and helped me tons. Thank you!!
This series IMO is the best non-intimidating series I've seen, and a great start before digging deeper. Wish I had seen this first before doing other harder-to-understand series.
Doooooooddd... your explanation is gold! Sadly in 2018 I have to build/maintain some code using AngularJS instead later versions which I prefer. Now I don't have to worry about gluing patches of hair on my head. THANK YOU.
Hello. Instead of multiplying by 4 I tried to multiply Math.random() by the length of the ninjas array. I assumed this would work since $scope was passed into the function but I am noticing that $scope.ninjas is undefined? Why is that and what would be the best way to get the length of the array?
@@mratanusarkar Add this attribute and value in the directive: ng-if="ninjas". The problem is because the $http.get() runs asynchronously. When you try to access the $scope.ninjas it's not actually set at that point. By using the ng-if, you only create the random-ninja directive code once the ninjas variable has a value.
Love these tutorials, thanks Net Ninja! I was wondering if we have to set the random $scope each time we add/remove items in our data array or is there a way to adjust the Math.floor(Math.random() * 4) so it automatically updates to how many items there are?
very helpful tutorial , thank you . but excuse me i have a 2 questions : 1) in the example which you did in the tutorial you made a random ninjas directive to get random ninjas , ok why didn't make it by make another html file with its controller , then inject it in the main html file by ng-include directive ? does directive way save time or easier ? or there are another reasons ? 2) i want to ask about file paths .. i know that if the file which i want to get in the same level , i will just write filename.extention ... and i it is in another folder and i am in another one ../foldername/filename.extention . but i found the paths in angular and node doesn't work in the same way for ex in angular app i have home.html and partialHome.html in the same folder "views" so i thought that i can write but it doesn't work .. but when i write it worked .. why ? is there another technique to get path in angular and node ? if so ,, how can i search about that ? and thank you very much .
Hi for me img is not showing in browser there are no errors logged in console but when I inspected through elements image tag was showing like there was no source inside?
hi, great tutorial but I got confused at 11:40 in this video. why ng-src = "{{}}" , why do you need {{}} to add parameters? why cannot you just use ng-src = " ninjas[0]xxx"? I am so confused with this parameter parse. thanks
Hi Shaun! I have a question. In a previous video you had said that using an expression inside a src attribute wouldn't work and you need to use the ng-src attribute. However, it seems to be working fine here. Can you explain why it works here but previously didn't? Thanks!
in the view, you won't find anything wrong. check the console (in the developer tools of the browser), there you'll be shown an error. Shaun has covered this in the video.
Do the scope:{} keys always have to be all lower-case? I was trying to call mine 'ninjasArr', but it wasn't working. Looked at the HTML and the tag was rendering as 'ninjasarr' but since HTML is technically not case-sensitive, I guess I understand why it could be rendered that way. Once I changed what was in the custom directive's scope to an all lower-case value 'ninjas', everything was aok.
Whenever i make a change in my code, i get a 404 error, and the page is stuck on /directory, if i go back to localhost:8000 which is my server it works
It's angular. Try to picture a pre Web 2.0 Internet Explorer putting functionality out into the web with no controls or community to stop it from doing so. The consequence were the browser wars. You my friend are about to witness the framework wars.
+Benny Powers This is the great thing about directives, you create a whole new scope and pass only the required data to it. There are many good reasons for it, two of them being data security (2 way data binding means more security requirements to avoid wrong manipulation of the data layer) and optimization (the directive only gets the data it needs, so angular doesn't have to "carry" the whole controller scope around :) and you can use the directive in other pages / other scopes with other arrays if you want
Well I think of it as a brick or some kind of Lego cube, the more you separate contents and concerns, the more scalable and flexible your app will be... Here s a documentation about the solid principles, which are development and architecture principles I do really value : www.google.fr/url?q=www.codeproject.com/Articles/703634/SOLID-architecture-principles-using-simple-Csharp&sa=U&ved=0ahUKEwjmwZe16L7MAhWKzRoKHVX_CUIQFggeMAY&sig2=JvLrKBXbj7kXqhkogamGcg&usg=AFQjCNExxjWM8SJNh8-MM3ka06zf6tqF-g the examples are written in C# but the article is really good :)
the image wont display infact im using angular i.7.5 and my jsom data looks different from yours..i cant seem to be able to access this data even. {"data":[{"name":"Biggy","thumb":"content/img/2.jpg"},{"name":"Zakes","thumb":"content/img/3.jpg"}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"data/mydata.json","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK","xhrStatus":"complete"} i tried data[random].thumb but its blank
hi all , those who are all want to display random image by adding length property with json file, the code is below firstModule.directive('randomData', [ '$http', function($http) { return { restrict: 'E', scope: { photo: '=', title: '=' }, templateUrl: 'views/random.html', controller: function ($scope) { $http.get('data/info.json').then(function(response){ var size = response.data.length; $scope.random = Math.floor(Math.random() * size); console.log("the random number is " + $scope.random); }) } } }]); thanks and let me know whether it works or not. bonne chance
My part stuck at this tutorial (custom directive display nothing), how i fix by replace custom directive code in app.js to this code: myNinjaApp.directive('randomNinja', [function(){ return { restrict: 'E', scope: { ninjas: '=ninjas', title: '@' }, templateUrl: 'views/random.html', controller: function($scope){ $scope.random = Math.floor(Math.random() * 4); } }; }]);
Your tutorials are *really* helpful and I'm baffled by the lack of views... this set of 25 tutorials was honestly the least intimidating and most logical flow for introducing angular that I've seen yet, and helped me tons. Thank you!!
Ben Ward Many thanks, really glad you liked it 😀
Haven't understood about scope in directive, HELPPP PLS
yap the part with '=' is new for me, don't quite understand how it goes.
Rasp Berry, i have understood, will explain later
Yes!!
I've been jumping from site to site to find what you simply laid out in like 8 minutes. Thank you, you are awesome!
Great :) thanks for watching!
This series IMO is the best non-intimidating series I've seen, and a great start before digging deeper. Wish I had seen this first before doing other harder-to-understand series.
Thanks, learning Angular is amazing. Incredible that you could find on youtube explanation for any doubt that come to your mind
Fabrizio Bertoglio Thanks 😀 Really glad you liked it!
Yes, great! Thanks a lot
best tutorial man, even afer 4 years of making the video series on it, its still helpful ! thanks a lot
one of the best instructor for sure! Thanks man!
Doooooooddd... your explanation is gold! Sadly in 2018 I have to build/maintain some code using AngularJS instead later versions which I prefer. Now I don't have to worry about gluing patches of hair on my head. THANK YOU.
Probably the best one on directives. Good work.
I watched few, your explanation was the cleanest and most direct. cheers!
So thanks of you, you explained in a very nice and fast paced way. Thank you so much once again
You're very welcome! :)
Your tutorials are really helpful man .
i was stuck, i watched this,now im not stuck , so i subbed!
Hello. Instead of multiplying by 4 I tried to multiply Math.random() by the length of the ninjas array. I assumed this would work since $scope was passed into the function but I am noticing that $scope.ninjas is undefined? Why is that and what would be the best way to get the length of the array?
did u get a solution?
@@mratanusarkar Add this attribute and value in the directive: ng-if="ninjas". The problem is because the $http.get() runs asynchronously. When you try to access the $scope.ninjas it's not actually set at that point. By using the ng-if, you only create the random-ninja directive code once the ninjas variable has a value.
great angular`s explanations. thanks for the best tutorial!
Love these tutorials, thanks Net Ninja!
I was wondering if we have to set the random $scope each time we add/remove items in our data array or is there a way to adjust the Math.floor(Math.random() * 4) so it automatically updates to how many items there are?
Very good and useful tutorial, thanks a lot.
Thanks for this awesome tutorial
very helpful tutorial , thank you .
but excuse me i have a 2 questions :
1) in the example which you did in the tutorial you made a random ninjas directive to get random ninjas , ok why didn't make it by make another html file with its controller , then inject it in the main html file by ng-include directive ? does directive way save time or easier ? or there are another reasons ?
2) i want to ask about file paths .. i know that if the file which i want to get in the same level , i will just write filename.extention ... and i it is in another folder and i am in another one ../foldername/filename.extention . but i found the paths in angular and node doesn't work in the same way for ex in angular app i have home.html and partialHome.html in the same folder "views" so i thought that i can write
but it doesn't work .. but when i write
it worked .. why ? is there another technique to get path in angular and node ?
if so ,, how can i search about that ?
and thank you very much .
Hi for me img is not showing in browser there are no errors logged in console but when I inspected through elements image tag was showing like there was no source inside?
hi, great tutorial but I got confused at 11:40 in this video. why ng-src = "{{}}" , why do you need {{}} to add parameters? why cannot you just use ng-src = " ninjas[0]xxx"? I am so confused with this parameter parse. thanks
oh I got confused with ng-include src.
Hi Shaun! I have a question. In a previous video you had said that using an expression inside a src attribute wouldn't work and you need to use the ng-src attribute. However, it seems to be working fine here. Can you explain why it works here but previously didn't?
Thanks!
in the view, you won't find anything wrong. check the console (in the developer tools of the browser), there you'll be shown an error. Shaun has covered this in the video.
how the ninjas[random] is accessible in random.html as we have defined random in app.js
Do the scope:{} keys always have to be all lower-case?
I was trying to call mine 'ninjasArr', but it wasn't working. Looked at the HTML and the tag was rendering as 'ninjasarr' but since HTML is technically not case-sensitive, I guess I understand why it could be rendered that way. Once I changed what was in the custom directive's scope to an all lower-case value 'ninjas', everything was aok.
Whenever i make a change in my code, i get a 404 error, and the page is stuck on /directory, if i go back to localhost:8000 which is my server it works
I don't understand how "randomNinja" and "random-ninja" are magically paired to each other
It's angular. Try to picture a pre Web 2.0 Internet Explorer putting functionality out into the web with no controls or community to stop it from doing so. The consequence were the browser wars. You my friend are about to witness the framework wars.
Why did you need to create the scope property and pass data through via html attributes? why not use the NinjaController scope?
+Benny Powers This is the great thing about directives, you create a whole new scope and pass only the required data to it. There are many good reasons for it, two of them being data security (2 way data binding means more security requirements to avoid wrong manipulation of the data layer) and optimization (the directive only gets the data it needs, so angular doesn't have to "carry" the whole controller scope around :) and you can use the directive in other pages / other scopes with other arrays if you want
+Jérémy Lempereur cool, so is that why the best practise is moving to components and directives?
Well I think of it as a brick or some kind of Lego cube, the more you separate contents and concerns, the more scalable and flexible your app will be... Here s a documentation about the solid principles, which are development and architecture principles I do really value : www.google.fr/url?q=www.codeproject.com/Articles/703634/SOLID-architecture-principles-using-simple-Csharp&sa=U&ved=0ahUKEwjmwZe16L7MAhWKzRoKHVX_CUIQFggeMAY&sig2=JvLrKBXbj7kXqhkogamGcg&usg=AFQjCNExxjWM8SJNh8-MM3ka06zf6tqF-g the examples are written in C# but the article is really good :)
the image wont display infact im using angular i.7.5 and my jsom data looks different from yours..i cant seem to be able to access this data even.
{"data":[{"name":"Biggy","thumb":"content/img/2.jpg"},{"name":"Zakes","thumb":"content/img/3.jpg"}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"data/mydata.json","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK","xhrStatus":"complete"}
i tried data[random].thumb but its blank
At 16:17 why are we not passing $scope to function like this, please explain
myNinjaApp.directive('randomNinja',[$scope,function($scope) {
return {
restrict: 'E',
scope: {
ninjas: '=',
title: '='
},
tempelateUrl: 'views/random.html',
controller: function($scope)
{
$scope.random = Math.floor(Math.random() * 4);
}
};
}])
Be sure to check your templateUrl
If someone facing issue with http.get().success change it to http.get().then
Haven't understood about scope in directive, HELPPP PLS
there is no source code in the github link, is that updated some where else?
github.com/iamshaunjp/angular-js-playlist
?
hi teacher how to create directive like this
Help me xd
hi all , those who are all want to display random image by adding length property with json file, the code is below
firstModule.directive('randomData', [ '$http', function($http) {
return {
restrict: 'E',
scope: {
photo: '=',
title: '='
},
templateUrl: 'views/random.html',
controller: function ($scope) {
$http.get('data/info.json').then(function(response){
var size = response.data.length;
$scope.random = Math.floor(Math.random() * size);
console.log("the random number is " + $scope.random);
})
}
}
}]);
thanks and let me know whether it works or not. bonne chance
My part stuck at this tutorial (custom directive display nothing), how i fix by replace custom directive code in app.js to this code:
myNinjaApp.directive('randomNinja', [function(){
return {
restrict: 'E',
scope: {
ninjas: '=ninjas',
title: '@'
},
templateUrl: 'views/random.html',
controller: function($scope){
$scope.random = Math.floor(Math.random() * 4);
}
};
}]);