AngularJS: ng-if, ng-repeat, ng-show, ng-hide and Bootstrap CSS framework integration

Covers the following:
-How to do a simple search for records using AJAX together with AngularJS
-How to integrate Bootstrap CSS framework as part of AnguarJS application
-How to use ng-if, ng-show and ng-hide
-Differences between ng-if and ng-show/ng-hide
-How to work with ng-repeat
-How to display multiple records using ng-repeat
-How to fetch multiple rows through AJAX and bind using ng-repeat
-How to make using ng-if/ng-show inside ng-repeat
-Inspect various scope object when dealing with ng-if and ng-show
Source code: www.techcbt.com...

[@shivanisehdev8817]

very well explained. I suggest even if someone starting to go with Angular v2, Must go through these videos too. It just gives you all you need for angular.

[@vishnubenny]

A different level tutorial... Hat's off man... Greetings from a beginner...

[@mohammadadilalam7185]

and one thing more I want to say , some of tutorials on KZbin are only seen on desktop but I thank you your tutorial are good at phone also.

[@Techcbt-online]

Thanks Adil.

[@jeannemccabe5752]

Thank you for this comprehensive series. Listening to the jargon repeatedly helps!!!

[@Techcbt-online]

Sorry for the jargon. Couldn't help better at the moment. Hopefully it gets improved eventually. Thanks for encouraging us. Thanks a ton.

[@chengtie]

nice video... btw, could you please tell me which "color theme" of sublime text you used in the video? additionally, did you use a particular font?

[@Techcbt-online]

Thanks. It is "Dawn". No additional fonts.

[@soccerwithcoachtomiwa5803]

please i am having issues with the node api .The link you gave is outdated. i have tried to develop my own api but i cant get it right.

[@deenmehta7425]

Hi Please help on the below:- Print the JSON in angular js, I can see the output in console, but not able to print the same in screen even not getting any error in log.Below are the code: Enter Employee Number Search Employee Number {{empNo}} Employee Name {{empName}} Employee Post {{empPost}} Employee Salary {{empSal}} ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var myApp = angular.module('myApp',[]); myApp.controller('myCtrl',['$scope','$log','empService', function($scope,$log,empService){ $log.log('Inside controller'); $scope.doSearch = function(){ empService.findEmpById($scope.searchEmpNum,function(r){ $scope.empNo= r.empNo; $scope.empName= r.empName; $scope.empPost= r.empPost; $scope.empSal= r.empSal; }); } }]) myApp.service('empService',['$log','$http',function($log,$http){ $log.log('Instantiating empService'); this.findEmpById =function(empNo,cb){ alert("Hello"); $http({ url:'localhost:8085/empinfosystemnew/rest/allEmployee/' + empNo, method:'GET' }) .success(function(response){ $log.log(response.singleEmployee); cb(response.singleEmployee); }, function(response){ $log.log('Some error occured'); }) } }]) --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [Object] 0 : Object empName : "JONNY" empNo : "7610" empPost : "DOCTOR" empSal : "50000" __proto__ : Object length : 1

[@prabhakaranm8235]

Sir, how to build Rest Api.

[@MrPulkitg1708]

Thank you Sir! I am stuck at a particular case. When we search the Employee records based on an ID and that ID is not present, I am getting the below error: "TypeError: Cannot read property 'ID' of null" The line where the error is coming, is where the $scope member is being assigned the ID. (empService.GetEmployeeById($scope.searchEID, function (r) { $scope.eid = r.ID; ......) Could you please assist on how to handle this?

[@Techcbt-online]

try "if (r) {$scope.eid = r.ID;}"

[@chengjinfei8139]

amazing ~real world angularJS development workflow ! please cover improve performance of NG-repeat and ng-class

[@Techcbt-online]

Thank you..will see what we can

[@banuprakashnagumothu]

In which video you explained how to reduce the ng-repeat scope data

[@Techcbt-online]

We did not. The topics related to performance and patterns are not covered yet. We are busy with Angular 2 series now. We will be back once that series is completed. Keep tuned.

[@aalokitchhabra9031]

@@Techcbt-online Sir any updates on your angular 2 series. please let me know about the link to get the series.

[@advancecodes4878]

Sir where have come employee data,,,,,, it is from database,is't it?

[@rahulismyid]

That is a great tutorial. However i have a question... what is the difference between ng-click and ng-submit. Can u please explain about this? That'll help a lot.

[@rotrose7531]

This is a super great series, but without the employee apis, it is a pain to follow it. can you please kindly point out where the employee api was created. I am happy to follow.

[@marrakulamurugan8226]

Hi Tech CBT , your way of explanation is awesome ...But we need one crud application with the combination of rUI Router and Bootstrap with beautiful tables.... Please sir i am requesting you guys please make that videos as soon as possible many people are waiting for full length crud app

[@Techcbt-online]

Will do eventually. Thanks.

[@benzrioualsouhail478]

That is a great tutorial, I'm realy respecting u man ty a lot. one qst plz where can I find the web service Employe bcz the link in the description dosn't work and thank you again.

[@deepakbellodi5917]

source code link is not working please update with correct link in the discription/

[@radhikagupta2313]

Hi what can be done if this is the issue: ngShow (if)"strName == '-place your name here-'" Output 'Awesome name!' ngHide (else)"strName == '-place your name here-'" Output strName, ' is a not my name'

[@Techcbt-online]

jsfiddle?

[@EliteCameraman6]

Dear all, please provide me with rest api in order to compete tutorial.

[@Techcbt-online]

You can download it from here: www.techcbt.com/Post/354/Angular-JS-basics/how-to-work-with-ng-if-ng-repeat-bootstrap-in-angular-js

[@rachitapatrorichi7678]

Sir, Thanks for the great tutorial and information rich lecture videos but I am stuck in this video. I am unable to build the REST API. I am new to this technology so bit confused. It would be great if you help me with the lecture video of how to build the REST API. I tried this link "www.techcbt.com/Post/354/Angular-JS-basics/how-to-work-with-ng-if-ng-repeat-bootstrap-in-angular-js", mentioned in the earlier post, but its not working

[@feihua1807]

Same question, looking for someone to help Thanks!

[@TellaTrix]

Video was too long brother try to keep it as sort as possible, I mean around 15 - 20 min max with practical.

[@joaorocha278]

excelent!!!!

[@AshishsinghRawat92]

HI Your videos are really helpful. For learning purpose I started created a APP from scratch. Had some question. 1.How to update the data in ngRepeat. I am loading the data from $https service and showing only 10 objects out of 1000 using limitTo. created the next button which will be showing the next to objects. github.com/ashish9342/yourPlace/blob/dev/app/scripts/controllers/edirectoryCtrl.js#L38 It would be really helpful if you can make a video on this. and help me :)

[@deenmehta7425]

This is my json data which i am getting from rest service: { "singleEmployee": [ { "empNo": "7839", "empName": "KING", "empPost": "PRESIDENT", "empSal": "5000" } ] }

[@ranjithkea]

make shorter videos