Angular MVC Architecture: Angular App

MVC Architecture 

Model View Controller or MVC architecture is one of the design patterns used in the development of web applications. The MVC design pattern separates model, view and controller. 


It supports application data management. Model receives requests from view and instructions from controller and then updates itself accordingly.  


View is a user interface that displays data and also allows the user to modify data. 


Controller controls the model-views relationship. It receives user input, performs validations and then modifies data after performing business operations. 

MVVM Architecture 

MVVM is another software design pattern that improves source code readability and maintainability. It divides the code into three sections including: 

  • Model 
  • View 
  • ViewModel 



It exposes data to the view after receiving from Model. 

Let’s talk about both MVC and MVVM approaches.


Architecture Blueprint


The model part of the MVC architecture consists of the business end of the application. It is a simple data for CRUD applications. You can see the model holding data in the following example:


import { Injectable } from ‘@angular/core’;

import { BehaviorSubject, Observer } from ‘rxjs’;

export class Note {

  id: number;

  title: string;

  text: string;



  providedIn: ‘root’


export class NotesService {

  private notes: Note[];

  private nextId = 0;

  private notesSubject = new BehaviorSubject<NoteInfo[]>([]);

  constructor() {

    this.notes = JSON.parse(localStorage.getItem(‘notes’)) || [];

    for (const note of this.notes) {

      if ( >= this.nextId) this.nextId =;




  subscribe(observer: Observer<NoteInfo[]>) {



  addNote(title: string, text: string): Note {

    const note = {id: this.nextId++, title, text};



    return note;



export class Note{




The model in this example holds an array of text nodes.


The view is created in .html templates and .css files. One of these templates is already mentioned in src/app/app.component.html.


The ViewModel/Controller is created in the .ts files. Open src/app/app.component.ts


How to Install

Open terminal and run the following commands to install Angular CLI and set up your application.

  • npm install -g @angular/cli@7.2.1
  • ng new AppName
  • cd AppName
  • ng serve

 Inputdecorator The following table shows some of the common Angular commands: 

Creating a component ng generate component component_name
Creating a service ng generate service service_name
Creating a module ng generate module module_name
Creating a directive ng generate directive directive_name


Click the link below to learn about all generate commands:


Data Sharing

Data Sharing Between Components

Parent to Child

You can use @Input decorator .[] for parent to child data sharing. This is known as property binding.


Child to Parent

You can use @Output decorator for child to parent data sharing.

Data Sharing Between Unrelated Component

Use services to store data and make HTTP calls to retrieve, post, update and delete data.

Lazy Loading in Angular

Take the following steps for lazy loading in angular:

Step 1: Create a Module

Create one more module file with the name Lazy for loading on demand. Use the following command:

ng g module Lazy

Create one component file with the name employee. Use the following command:

ng g component Lazy/employee

Step 2: Add Lazy Loading Module 

  • Open app.routing.ts file
  • Import Routes
  • Import RouterModule from @angular/router

Add the following code snippet in the app-routing.module.ts file.


Step 3: Add Routing of Lazy Module Component

  • Open lazy.module.ts file
  • Define components in routes
  • Use RouterModule.forchild with your child routes array

Use the following code snippet for lazy.module.ts file.


Step 4: Add Lazy Loading Module

  • Open app.module.ts file
  • Import AppRoutingModule

This is how the code will look like:


And also add

Import {LazyModule} from ‘./lazy/lazy.module ;






Avatar photo

Rahul Vij

Co-founded WebSpero solutions about a decade ago. Having worked in web development- I realized the dream of transforming ideas sketched out on paper into fully functioning websites. Seeing how that affected the customers’ generation of leads and conversions, I wanted to delve deeper into the sphere of digital marketing. At Webspero Solutions, handling operations and heading the entire Digital Marketing Field – SEO, PPC, and Content are my core domains. And although we as a team have faced many challenges, we have come far learning along and excelling in this field and making a remarkable online reputation for our work. Having worked in building websites and understanding that sites are bare structures without quality content, the main focus was to branch into optimizing each website for search engines. Investing in original, quality content creation is essential to SEO success in the current search climate. Succeeding in this arena ensures the benefits of producing visitor-friendly content. Directing all our teams to zoom in on these factors has been a role that I have thoroughly enjoyed playing throughout these years. linkedin