JS-401-Angular
  • Introduction
  • Part 1: TypeScript Overview
    • 1.1: Types
    • 1.2: Classes
    • 1.3: Interfaces
  • Part 2: Angular Architecture
    • 2.1: MVC
    • 2.2: Modules
    • 2.3: Components
  • Part 3: Lifecycle Hooks
    • 3.1: Overview
  • Part 4: Data Binding
    • 3.1: String Interpolation
    • 3.2: Property Binding
    • 3.3: Event Binding
    • 3.4: Two-Way Data Binding
  • Part 4: Directives
    • 4.1: ngIf and ngFor
    • 4.2: Attribute Directives
    • 4.3: Structural Directives
  • Part 5: Pipes
    • 5.1: Overview
  • Part 6: Observables and RxJS
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Part 7: Dependency Injection and Services
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Eleven Fifty Style Guide
Powered by GitBook
On this page
  • Part 2.1 -ANGULAR ARCHITECTURE
  • MVC
  • NEXT SECTION
  1. Part 2: Angular Architecture

2.1: MVC

PreviousPart 2: Angular ArchitectureNext2.2: Modules

Last updated 7 years ago

Part 2.1 -ANGULAR ARCHITECTURE

Angular is a front-end framework. What's the difference between a library and a framework? Think of libraries as how it is named, a library. It is a collection of objects and functions/methods, that your application links to in order to be used.

Frameworks include everything needed for your application to work. It will bring in libraries, scripts, package managers...basically all the necessary items to create your app. Another way of looking at the differences would be with a library you call the code to make it work. With a framework, it defines how it will work...meaning it calls YOUR code.

MVC

Before we get into the basic building blocks, let's take a look at the main design paradigm of Angular, Model-View-Controller(MVC).

  • Model - Contains the pure data for the application. It can be used to create interfaces for classes or communicate with the database. When a model changes its state, the view is then automatically updated.

  • View - Presents the model's data to the user. It also displays the app's UI.

  • Controller - The interface between the Model and the View. It responds to events triggered by the view and activates the reaction based on the triggered event. Typically, the reaction is method call on the model. The controller either renders a view template or communicates with model.

image from Wikipedia

Angular uses a component based approach to achieve MVC architecture. First, the Model is represented through the services that are injected into the component class through Dependency Injections. Second,the Controller is shown through the Component class using TypeScript. Lastly, the View is bound to the Controller by the HTML file. Don't worry, all of this will make more sense as we move forward.

NEXT SECTION

2.2: Modules