Learn Angular 10, Web API & SQL Server by Creating a Web Application from Scratch

Sdílet
Vložit
  • čas přidán 31. 07. 2020
  • Source Code: github.com/ArtOfEngineer/Angu...
    Related Tutorials:
    --------------------
    React JS + Python Django + SQLite full-stack app
    • React JS + Python Djan...
    --------------------
    React JS + .NET Core Web API + Microsoft SQL full stack app
    • React JS + .NET Core W...
    --------------------
    .NET Core API + Vue JS + Microsoft SQL full-stack web app
    • .NET Core API + Vue JS...
    --------------------
    ASP .NET Core Web API + Microsoft SQL CRUD APIs
    • ASP .NET Core Web API ...
    --------------------
    ASP .Net Core Web API + MySQL | CRUD APIs Tutorial
    • ASP .Net Core Web API ...
    --------------------
    .NET Core Web API + PostgreSQL | CRUD APIs
    • .NET Core Web API + Po...
    --------------------
    .Net Core Web API + MongoDB CRUD APIs
    • .Net Core Web API + Mo...
    --------------------
    Python Django + SQLite | REST APIs
    • Python Django + SQLite...
    --------------------
    Python Django + PostgreSQL | REST API Tutorial
    • Python Django + Postgr...
    --------------------
    Python Django + MySQL CRUD API Tutorial
    • Python Django + MySQL ...
    --------------------
    Python Django + MongoDB CRUD API Tutorial
    • Python Django + MongoD...
    --------------------
    Python Django + Microsoft SQL Server CRUD API Tutorial
    • Python Django + Micros...
    --------------------
     Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. www.kite.com/get-kite/?...
    Python and Angular app tutorial video: • Learn Angular 10, Pyth...
    Learn to create a simple web application from scratch using Angular 10, ASP .NET Web API and Microsoft SQL Server.
    1:12 : Install SQL Server and SQL Server Management Studio.
    4:26 : Install Visual Studio.
    5:50 : Install Visual Studio Code.
    6:56 : Install POSTMAN.
    7:44 : Install Node JS.
    8:43 : Install Angular 10.
    10:01 : Create DB and Tables in Microsoft SQL Server.
    16:51 : Create .NET Web API Project.
    20:38 : Force API to return JSON response only.
    22:49 : Enable CORS.
    24:52 : Create Models.
    27:22 : API for Department Screen : GET.
    33:13 : API for Department Screen : POST, PUT and DELETE.
    36:48 : APIs for Employee Screen.
    43:30 : Upload Photo API.
    46:32 : Angular Project Intro.
    48:02 : Create Angular 10 Project.
    51:38 : Generate Components and Services in the Angular Project.
    53:57 : Add Service methods to consume APIs.
    59:32 : Routing in Angular.
    1:01:42 : Add Bootstrap to our Angular App.
    1:02:45 : Navigation Menu using Bootstrap.
    1:04:50 : Show Department Screen with Bootstrap Table.
    1:08:49 : Modal Pop Up Window using Bootstrap.
    1:12:39 : Add and Edit Pop Up Screen for Department.
    1:17:24 : Delete Department.
    1:19:12 : Show Employee Screen with Bootstrap table.
    1:22:31 : Upload Photo, Add and Edit Employee Details Pop Up Screen.
    1:31:34 : Custom Sorting and Filtering to our Bootstrap table.
    1:36:41 : How to get Publishable files of .NET Web API and Angular.

Komentáře • 345

  • @IngoBing
    @IngoBing Před 3 lety +6

    So much content in so clear and compressed format. Amazing work.

  • @aleessagar1803
    @aleessagar1803 Před 3 lety +29

    What a good way to to teach!. First time in my life, too much learning in minimum period of time and everything is conceptually clear. Thanks 🥰😍

  • @jaynick8933
    @jaynick8933 Před 2 lety

    Excellent job!! Thank God for the pause button because the context moved quickly! I love it!! Many thanks!!

  • @aussieraver7182
    @aussieraver7182 Před 3 lety +7

    THESE ARE EXACTLY THE TECHNOLOGIES I REQUIRE!

  • @tjjudd101
    @tjjudd101 Před 3 lety +25

    Thank you for making tutorial videos like this. It's astounding how the practical skills needed to build applications are neglected at the university level in favor of pure theory. This is excellent content. Please keep doing what you're doing.

    • @salvadorrhett5078
      @salvadorrhett5078 Před 2 lety

      You prolly dont care at all but does someone know of a way to get back into an Instagram account??
      I stupidly lost my account password. I would love any assistance you can offer me

    • @carldrogo9492
      @carldrogo9492 Před 2 lety

      @@salvadorrhett5078 do you at least know the email address for the Instagram account?

    • @lazaarclubb6981
      @lazaarclubb6981 Před 9 měsíci

      @@salvadorrhett5078 answer bro

  • @coding-gemini
    @coding-gemini Před 3 lety +6

    Excellent video, thanks for sharing. I think the only part missing was authentication and authorization part but rest all looks awesome

  • @mrCetus
    @mrCetus Před 2 lety +1

    If only college & university tutors were as clear and straight forward to the end-product. Then 90% of IT students would end up as great software developers. You made it seem like a walk in the park.

  • @dharanimallikarjunan6827

    Thank you so much! Such a useful video...I have created my own API and done CRUD using this one video! Kudos to the creator

  • @niallodwyer6657
    @niallodwyer6657 Před 2 lety

    Excellent Video - deals with some many concepts/areas with just the right amount of detail.

  • @jehangirgotla766
    @jehangirgotla766 Před 3 lety +2

    Amazing video. So many concepts in one well done piece of knowledge art. Thanks.

  • @awadsheikh5714
    @awadsheikh5714 Před 3 lety +1

    You are the best instructor I have ever seen

  • @arsnb9m907
    @arsnb9m907 Před 2 lety

    Excellent video! This is the way to introduce Angular to experienced developers.

  • @SanuKumar_jsr
    @SanuKumar_jsr Před 3 lety +1

    A live deployment tutorial will complete this.
    BTW, excellent explanation!

  • @Blueglitter73
    @Blueglitter73 Před 2 lety

    This is very helpful! I'm able to learn more about developing with APIs this way!

  • @subhanagarajan2673
    @subhanagarajan2673 Před 3 lety +1

    really very useful video...the flow u explained is admirable...Great work...

  • @heyharshdeep
    @heyharshdeep Před 3 lety +1

    Thank you so much for providing such good content. this video gives me the confidence to learn Angular.

  • @hrushikeshvyas5840
    @hrushikeshvyas5840 Před 2 lety

    Excellent demo.. I ah really happy..you saved a lot of time..this helps to any developer who wants to migrate to anguler

  • @melakugirma7803
    @melakugirma7803 Před 3 lety

    best instructor I have ever seen !!

  • @DooMWhite
    @DooMWhite Před 3 lety +18

    Holy shit, you are my savior.

  • @LaFCueva
    @LaFCueva Před 3 lety +1

    This is such a great and useful tutorial, thank you so much!!

  • @ahlemgguemdani6868
    @ahlemgguemdani6868 Před rokem

    Very good tutorial, an amazing and well explained overview for someone who begin with this stack. Thank u so mutch

  • @taamcyat
    @taamcyat Před 2 lety

    Wow!!!. I learned so much in 1.5 hours!!! Many Thanks!!!

  • @astan7861
    @astan7861 Před 4 lety +1

    Very nice...very well explained....keep making such videos 👍👍

  • @maheshmekala7746
    @maheshmekala7746 Před 3 lety

    Excellent, Clarity, useful

  • @boboaung3811
    @boboaung3811 Před 3 lety +2

    Thank you so much! It really helpful for me! thank!

  • @ShivamSingh-vh1xz
    @ShivamSingh-vh1xz Před 3 lety

    It is really helpful even for beginners . thanks for such a wonderful video,😊😀😊😊❤️❤️

  • @sushmapatil4478
    @sushmapatil4478 Před 8 měsíci

    thank u so much now i get clarity how angular works

  • @paulachena488
    @paulachena488 Před 3 lety +2

    This is great!! Thank you!!

  • @fmskreg7424
    @fmskreg7424 Před 3 lety +3

    excellent, at first looks easy, but it is quite hard indeed

  • @RohanAbeysinghe
    @RohanAbeysinghe Před 4 lety +1

    Very useful tutorial, keep it doing...

  • @jamquincy123
    @jamquincy123 Před 3 lety +2

    Thank You for the video! Is there another video to show working with deployable’s?

  • @cantsergaming4195
    @cantsergaming4195 Před 3 lety +1

    Thanks man. Hope you create a deployment tutorial of this. :D

  • @crikey4336
    @crikey4336 Před 3 lety +10

    SQL like at 39:26 is ripe for a SQL injection attack. SQL statements should *never* be prepared by concatenating user input (even if your user input has validation that attempts to prevent injection.) As an example, query = "insert into dbo.Employee values (@employeeName, @department,@dateOfJoining,@photoFileName)" and then add parameters to the SqlCommand is the way to do it.

    • @SwaggyProfessor
      @SwaggyProfessor Před 3 lety +4

      He specifically mentions at around 28:10 that he will skip some of the best practices just to keep the tutorial simple.

  • @natalialuna4732
    @natalialuna4732 Před 3 lety

    Thanks a lot for this! it helped me understand a lot!

  • @gopinathk3505
    @gopinathk3505 Před 3 lety

    Thank you so much! It is really great way of teaching

  • @syedabbasali9826
    @syedabbasali9826 Před 3 lety +10

    Can you please do the same for .net core web api, with stored procedures execution

  • @Latif127
    @Latif127 Před 3 lety

    I think it is the best tutorial on this topic. Thank you.

  • @RaldCodeVBNET
    @RaldCodeVBNET Před rokem

    I love all your video sir, it's really helpful, i gain a lot from your video , continue uploading angular,web api and SQL tutorial , hoping next tutorial is for log in with google auth.

  • @ethiopiantube5091
    @ethiopiantube5091 Před 3 lety

    I can not thank you enough!!!!!!!!You saved me!

  • @stalinev
    @stalinev Před 3 lety

    very very nice video and explanation even speedy move. i enjoyed the video and learnt the Angular , Big thank you :)

  • @tamilvanan1561
    @tamilvanan1561 Před 10 měsíci

    Thank you so much, it is fantastic video, step by step , easy to learn quickly and clearly

  • @dankogulsoy
    @dankogulsoy Před 3 lety

    Definitely awesome. thanks for sharing.

  • @tahaansari5621
    @tahaansari5621 Před 3 lety

    I'm facing an issue in deleting department. Although, it is working in postman but not in angular.
    It says: "No MediaTypeFormatter is available to read an object of type 'Department' from content with media type 'application/octet-stream'."
    please help!

  • @nehemiahlimocheburet1411
    @nehemiahlimocheburet1411 Před 3 lety +1

    how do we integrate these two apps? got a problem publish it to IIS, Someone help

  • @raselkobir2802
    @raselkobir2802 Před 3 lety

    how can solve cors problem when performs delete method . also no error when performs get,post and put method.

  • @imohsimon9762
    @imohsimon9762 Před 4 lety +1

    Very useful tutorial thank you very much sir

  • @karthikkeyan4460
    @karthikkeyan4460 Před 2 lety +2

    Routing : 59:29
    Bootstrap: 1:01:43
    Navigation Menu: 1:02:44
    Show Department Screen: 1:04:50

  • @meirkr
    @meirkr Před 3 lety +77

    Why choosing. Net framework now in the revolution of. Net core and coming release of. Ne5?!

    • @limahlpalmer562
      @limahlpalmer562 Před 3 lety +1

      .net core doesn't need bootstrap, angular, js, jquery etc...best of the best

    • @manulinux
      @manulinux Před 2 lety

      @@limahlpalmer562 Neither does .net framework

  • @nienax97
    @nienax97 Před 3 lety

    the delete didn't work. i've been stuck at cors problem issue.. can i integrate this for mobile app development?

  • @ameltriki2497
    @ameltriki2497 Před 3 lety

    Thank you! Excellent video!

  • @AnjaliGupta-vy8cd
    @AnjaliGupta-vy8cd Před 3 lety

    Very helpful video sir... just one question can I use visual studio 2015 for Web API and some lower version of Angular to build the same application?as the same setup is not available on our development server.
    Thanks in advance
    Awaiting for reply

  • @tendailightmudadi7787
    @tendailightmudadi7787 Před 3 lety

    just what i needed ...thanks

  • @SVSCSENAVINMG
    @SVSCSENAVINMG Před 3 lety

    Bro where did you add the bootstrap js file for model pop up window in my case the model pop up doesn't works

  • @jinyuchan3983
    @jinyuchan3983 Před 2 lety

    32:34 - There are lines of code using inserted in the method. Are they all a shortcut to importing namespaces and declaring at the same time? It is a bit difficult to read.

  • @teey_
    @teey_ Před 3 lety

    I keep on getting this error when trying to save an image "SaveFile()"
    "Message": "The request entity's media type 'multipart/form-data' is not supported for this resource.",
    "ExceptionMessage": "No MediaTypeFormatter is available to read an object of type 'Employee' from content with media type 'multipart/form-data'.",
    Any help would be awesome

  • @TheKeravnos10
    @TheKeravnos10 Před 3 lety

    1:29:54 You write in 'add-edit-emp-component.html' depName.DepartmentName, but since DepartmentName is a variable from add-edit-dep-component.ts' and we are in different class, how is this going to work? I am new to Angular , please help me :)

  • @imadabab
    @imadabab Před 3 lety

    Excellent tutorial. Thanks a lot.

  • @TheDashang007
    @TheDashang007 Před 3 lety +1

    does it include setting up authentication and user registration?

  • @nedegt1877
    @nedegt1877 Před 3 lety +1

    I simply use Python Flask (+ extensions) / Brython(Transpiler to JS) / HTML / CSS (W3CSS Framework)
    It's very easy to learn and you can create all kind of apps in a very short time.
    I know everyone has their preferences, but too many peoples just follow what others
    are doing. JS is very much saturated, so many different flavors. It makes it difficult
    to master the language like one could master C++

  • @vrundanthacker146
    @vrundanthacker146 Před 3 lety

    Hi, I am getting IndexOutOfRange exception when i try to upload files from postman, any idea why?

  • @santiustti
    @santiustti Před 3 lety

    Let me ask I couldnt continue after 31:33 because on cmd argument from new SqlAdapter I get an error message which says: "cannot convert from WebAPI.Controllers.SQLcommand to System.Data.Sqlclient.SqlCommand". I dont find anything accurate on the web. Anyone could explain it?

  • @rajaprasanna4033
    @rajaprasanna4033 Před 3 lety

    What kind of architecture when we are using Angular +webAPI+ SQL server? MVC or MVVM or Single page application?

  • @knowyourworld1958
    @knowyourworld1958 Před 3 lety

    Thanks for Creating this Video 🙌

  • @ymedia746
    @ymedia746 Před rokem

    Thank you so much for this video ❤️very helpful ✌️

  • @jordanferrazza8700
    @jordanferrazza8700 Před 3 lety

    I used slightly quicker things such as using $@ instead of @+ or using the Code terminal instead of the Command Prompt. I would have used a scaffolder to do the modelling but I couldn't be bothered.

  • @thembelanithomas2716
    @thembelanithomas2716 Před 3 lety

    You are amazing. Just one question. If you didn't want to pick a date with datepicker but instead wanted GETDATE() current date how to you go about it in the web api? It works on sql server but gives an error in the api with that string query.

  • @bishoy237
    @bishoy237 Před 3 lety

    brilliant video thanks very much god bless you

  • @AntonyJudes
    @AntonyJudes Před 4 lety +1

    Nice video. Pls continue it

  • @randhirraj9192
    @randhirraj9192 Před 2 lety

    Very nice explanation .Thank you!!!😀😀😀😀😀

  • @prasadtatapudi5259
    @prasadtatapudi5259 Před rokem

    Thank you for the nice tutorial. It helped a lot.

  • @jej515
    @jej515 Před 3 lety

    Your tutorial is perfect!!!

  • @rahathussain9313
    @rahathussain9313 Před 3 lety +2

    I couldn't install CORS in Visual studio 2019.

  • @nasirniaz8282
    @nasirniaz8282 Před 2 lety

    Amazing work Thaks for your time.

  • @yisonsempai7524
    @yisonsempai7524 Před 3 lety

    Thank you my lord. Very good content

  • @hardrockclassico
    @hardrockclassico Před 3 lety

    Thanks a lot !!! This video is a life saver

  • @aleenajoy114
    @aleenajoy114 Před 2 lety

    How to save the voting(count like and dislike) of video in the database in access using angular?

  • @thanhvan3528
    @thanhvan3528 Před 2 lety

    Would you please explain why you add @ character after parameters?

  • @rafysancheztilogica8587

    It is a very good introduction !

  • @subramanianchenniappan4059

    Thanka bro. I am a java developer . But wanted to learn this

  • @thaerkilani5804
    @thaerkilani5804 Před 3 lety

    thank you man , really helpful but why you don't use models instead of any data type ?

  • @riyareni6664
    @riyareni6664 Před 2 lety

    Hi. I have stuck with ng for loop doesn't work in show-dep.component .html, the body tag is doesn't show...

  • @voltexcomputing9232
    @voltexcomputing9232 Před 3 lety

    Hi i am learning through following your video but when I type in da.Fill(table); it gives me the following msg ""Value cannot be null.
    Parameter name: dataSet"" how can I fix this?

  • @diegoalt.1249
    @diegoalt.1249 Před 2 lety +2

    if anyone has problems with the modal:
    "Take attention that in bootstrap 5 changed data-toggle to data-bs-toggle and data-target to data-bs-target"

  • @aswinbalasubramanian5753
    @aswinbalasubramanian5753 Před 2 lety +1

    Im trying to reproduce, but I got stuck in Add department button , the modal is not displaying like the popup at 1:12:12 timestamp

  • @zaryabsohail7966
    @zaryabsohail7966 Před 3 lety

    Hey can anyone help me i cannot upload an image my console show all right data i same code copy from github please anyone help

  • @vijendrasaini4428
    @vijendrasaini4428 Před 2 lety

    hi I am trying to create new angular according to this way but data not showing from service to HTML if I am trying static data then it works and the modal is also not open is there any help

  • @anhminhdiep5848
    @anhminhdiep5848 Před 2 lety

    God bless u my friend, absolutely save me

  • @carlosdourado4483
    @carlosdourado4483 Před 3 lety

    great tutorial ! thank you a lot

  • @gustavolopes5627
    @gustavolopes5627 Před 2 lety

    Hi guys. I followed this tutorial step by step but I'm having issues with the upload Photo funcionality. It's returning the message: Unsupported Media Type. This way, when I select the new Employee photo, the photo don't appear and don't save in the path. Anyone else had the same issue and could help me?

  • @sonalishinde5078
    @sonalishinde5078 Před rokem +1

    very helpful demo sir

  • @mashiyathusain0609
    @mashiyathusain0609 Před 2 lety

    How to display an pricing table in angular thorw sql database

  • @DecentralEyes
    @DecentralEyes Před 2 lety

    Absolutely brilliant

  • @georgetomeh8898
    @georgetomeh8898 Před 3 lety +5

    The delete department did not work

  • @srinivasseshadri3937
    @srinivasseshadri3937 Před 2 lety +1

    How to deploy this application on server with APi and sql database

  • @amitsundaray8359
    @amitsundaray8359 Před 3 lety

    Nice explanation 👍 keep it up.

  • @beyondthenature
    @beyondthenature Před 3 lety +1

    Great course I can't imagine course like this does exist so precise fast & from scratch, I've learned a lot Thanks a lot.......just one thing if any one encounter image upload problem ? I even copy codes from git but image does not appear no error console is also ok....appreciate for help !!!

    • @MoctarAbeidi
      @MoctarAbeidi Před 3 lety

      Hello, you can resolve the problem if you clean cache in your navigator.
      thanks.

  • @xaqilahanuar3618
    @xaqilahanuar3618 Před 3 lety

    i got error for dep = null
    may i know how to solve this

  • @ahsangazi3708
    @ahsangazi3708 Před 3 lety +1

    It is great. Can you make a video using core api and angular10?

  • @mohamaddibassy7557
    @mohamaddibassy7557 Před 2 lety

    I don’t have enough memory to download sql database. Is there an alternative to using a database?

  • @bennasreya4937
    @bennasreya4937 Před 3 lety

    Did anyone else have this problem :
    Property ‘dataITem’ does not exist on type ‘showDepComponent’