Disclaimer - These are my understandings, written in plain, simple words to understand the basics.
1. SOC - Separation of Concerns - to enable modularity.
2. TDD - Test Driven Development - if test cases are successful, you write your application.
Before MVC was introduced, how was the designing done?
It used to be n-tier architecture. Example - 3 tier - Presentation Layer, Business Layer and Data Access Layer.
Now what is the difference between a Tier and a Layer?
Tier - is a physical separation - some different servers.
Layer - logical separation - same machine.
n-tier solved SOC but we couldn't have TDD.
Presentation Layer is the combination of UI and UI Logic. To separate UI Logic, we have MVC, MVP and MVVM.
MVC - Model ( data entity that represents your data) , View ( representation of records display in bar/pie/table etc) and Controller ( the connector between the model and View - the one who passes the data). MVC is used for web applications where there is Client Server Architecture. We get HTTP Request-> it calls the web server -> the controller processes the request and the event handler shown in the view and the controller pushes the data to the view.
MVP - Model View Presenter . View has reference of presenter and vice-versa. MVP is used for Thick Client Presenters.
MVPM - Model View Presenter Model. Here the view has reference of presenter. Presenter Model pushes the data to the view with the help of the commands and it does the data binding.
Combination of all the above forms MVVM - Model View View Model. It has commands and data binding which are on view.
Angular JS => It has both data binding as well as controller, thus MV* pattern. It separates UI and UI Logic, thus easy to test. It is the structured client side JS Framework. It extends HTML by adding directives so that you can do data binding.