MVC or MVVC Pattern In Angular

MVC or MVVC Pattern In Angular


MVC - Model - View - Controller

1. In Angular every component will follow MVC pattern. 
2. MVC indicate's - Model - View - Controller.
3. Model is the raw data or the data from remote.  
4. View indicate's look and feel.
5. Controller acts as the mediator between Model and View. 
7. In angular view can be achieved by HTML and CSS , Model indicates the object
   Controller indicates data transmission between View and Model. 
8. In Angular each component will have all Model, View, Controller. So Angular
   is called Component based MVC. 
9. In Angular it follow's two way binding i.e.. Data transmission between 
  Model - view - view - controller hence it is also called as MVVC.
10. So angular can be called as MVC or MVVC.

Files Indicating MVC in Angular.

Model - component.model.ts
View - component.html , component.css 
Controller - component.ts, component.service.ts





Note
There is still a dilama and debet weather angular is an MVC or MVVC.

Comments

Post a Comment

Popular posts from this blog

Angular 6 Template Driven Form Validations

Angular 6 Template Driven Form Validations 1. Create a form component. 2. Create an Angular Form  3. Validating Email and Password 1. Create Form Component Command : ng generate component templateForms --spec=false         The above command generate's following file's  1. template-forms.component.html 2. template-forms.component.ts 3. template-forms.component.css  Create one more file in the same folder as model file  4. template-forms.model.ts Now in the model file do the following  export class LoginForm { emailVal: string; passwordVal: string; } Description 1. In this model we are using 2 form input's which we need to send as a request 2. In model we define name of model and type of model if we don't have default Values. In template-forms. component.ts do the following <form #loginForm="ngForm" (ngSubmit)="login(loginForm)"> Email <br> ...
Read more

7. Class Binding

Image
Class Binding When we want to bind CSS classes either from typescript or class OR based on conditionals we can go with the concept of Class Binding. Class binding in angular can be defined in as follows : <element [ngClass]="condition or ternary or multiple CSS classes"> </element> ng class can be used in many different ways in angular which are as follows: 1. ngClass with ternary operator:  <element [ngClass]="condition ? 'class1' : 'class2'"> </element> from above when condition is true 'class1' will be applied to the element else 'class2' will be applied. 2. ngClass with condition in object format: <element [ngClass]="{'className': condtion}"> </element> When we have only one condition and one class to be applied we can use above syntax. 3. ngClass with multiple conditions in object format <element [ngClass]="{'class1': condition1, 'class...
Read more