Learn Angular 10, Python Django & SQLite by creating a full stack app from scratch

Related Tutorials:
--------------------
React JS + Python Django + SQLite full-stack app
--------------------
React JS + .NET Core Web API + Microsoft SQL full stack app
--------------------
.NET Core API + Vue JS + Microsoft SQL full-stack web app
--------------------
ASP .NET Core Web API + Microsoft SQL CRUD APIs
--------------------
ASP .Net Core Web API + MySQL | CRUD APIs Tutorial
--------------------
.NET Core Web API + PostgreSQL | CRUD APIs
--------------------
.Net Core Web API + MongoDB CRUD APIs
--------------------
Python Django + SQLite | REST APIs
--------------------
Python Django + PostgreSQL | REST API Tutorial
--------------------
Python Django + MySQL CRUD API Tutorial
--------------------
Python Django + MongoDB CRUD API Tutorial
--------------------
Python Django + Microsoft SQL Server CRUD API Tutorial
--------------------

In this video, you will learn how to develop a web application from scratch using popular technologies such as
* SQLite for database.
* Python Django for backend web development.
* And the latest Angular 10 for frontend web development.
We will first start with installing and setting up the environment needed for development.
Then start creating models and tables needed for our app.
Then develop API end points using Django rest framework.
Finally we will be using Angular 10 to design the front end part of our App.
-You will learn how to create the navigation menu and tables using bootstrap.
-Add routing to our Angular App.
-Add modal pop up windows with dropdowns and date pickers.
-And also add upload profile picture functionality and store it in our app.
-We will also learn how to add custom filtering and sorting features without using any third party packages.

1:28 : Install Visual Studio Code.
2:37 : Install POSTMAN.
3:24 : Install Node JS.
4:24 : Install Angular 10.
5:42 : Install Python.
7:03 : Virtual Environments.
9:18 : Install Django REST Framework.
10:08 : Create Django Project.
12:47 : Exploring SQLite DB File.
14:19 : Enable CORS.
16:24 : Create Django App and Models.
20:51 : Add Serializer Classes.
22:34 : API for Department Screen : GET, POST, PUT and DELETE.
31:48 : APIs for Employee Screen : GET, POST, PUT and DELETE.
35:40 : Upload Photo API.
40:10 : Angular Project Intro.
41:42 : Create Angular 10 Project.
45:25 : Generate Components and Services in the Angular Project.
47:43 : Add Service methods to consume APIs.
52:38 : Routing in Angular.
54:49 : Add Bootstrap to our Angular App.
55:52 : Navigation Menu using Bootstrap.
57:58 : Show Department Screen with Bootstrap Table.
1:01:55 : Modal Pop Up Window using Bootstrap.
1:05:42 : Add and Edit Pop Up Screen for Department.
1:10:29 : Delete Department.
1:12:20 : Show Employee Screen with Bootstrap table.
1:15:38 : Upload Photo, Add and Edit Employee Details Pop Up Screen.
1:24:07 : Custom Sorting and Filtering to our Bootstrap table.

[eleazar]

00:00 - 10:05, Introduction + installing tools, dependencies, etc. + virtual environment
10:06, Create Django Project
12:46, Exploring SQLite DB File
14:20, Enable CORS
16:25, Create Django App and Models
20:50, Add Serializers
22:33, APIs for Department Screen: GET, PUT, POST & DELETE
31:48, APIs for Employee Screen: GET, PUT, POST & DELETE
35:40, API method to Upload Photo
40:08, Introduction to Angular Project
41:41, Create Angular 10 Project
45:25, Generate Components and Services
WIP

[Algo_Guru]

Enjoyed it. Completed it in one shot. Great work and lots of love.

[leandroleveron]

If you are receiving an error while using the "PUT" method it's probably because Django is not receiving data for all required fields. Use "blank=True" in your model's fields if you want to send partial data and still update the entry.

[ishankhosla]

If your department data table is not showing up on the department screen, make sure to add one line above the last </div> tag to the file named app.component.html

[kurapati]

Subscribed and liked it first and will watch the video over the weekend.

[mushkho]

It is a great video. Thank you. Hope to see you in a future work like this one.

[railnation]

I keep getting "Can't bind to 'dep' since it isn't a known property of 'app-add-edit-dep' Same for 'emp'.
Why did you not have to do this?

[mrbuslov]

Extremely cool video, got a lot of new even from Django!)

[mrasim]

Great. I'm looking this kind of video for a long time. thanks alot.

[JoaoMiguel-mwrm]

thank, i'm watched in brazil!!! thank for contents disponibilized free!!

[matthewbutler]

I had an issue where using URL wasn't working. I switched my urls.py files to from django.urls import re_path and switched my url() function calls to re_path() function calls. worked like a charm.

[upcomng]

This is a great tutorial if you already know fundamental of the code otherwise just no use to you copying his code. Easily trick into thinking I know how to code but not.

[rezagh]

thanks i was looking for this kind of course for a days . thanks alot

[viktoryeshchenko]

This was awesome! Thank you very much!

[Himanshu_Yaduvanshi]

This video is excellent to build an app. It will be great if you can share some tutorials to learn angularjs.

[mrasim]

Would you plz make a video of how to send an email using django rest framework and angular?

[vinaytandel]

Thank you for making such wonderful video. I learned a lot from here. I was following your instructions but got stuck when I got an error "'TenderSerializer' object has no attribute 'is_vaid''" while testing PUT and POST methods of my API. GET and DELETE works absolutely fine. My model is different than shown in the tutorial. May I request your assistance, please? Thank you.

[sathishkomakul]

It's nice video but I'm beginner to angular and web api please make videos for beginners to learn angular and web api tutorial, thank you so much.

[WeberOficial]

Just a tip: never create a id fiel in Django because it is created in any model in makemigrations! the Autofield is not for that!!

[sapnagupta]

I wrote same code as u have but 2 features are not working as expected
1. Image preview after selecting it.
2. Filter option (after typing department ID in textbox doesn't show any records)
If anyone can suggest me solution it would be very grateful to me
And if anybody have other errors than share with me if i'll able to help than surely I will 😊