OBJECTIVES

• Define MVC and MVVM
• Define and describe AngularJS 
• Discuss what you can do with AngularJS

Why MV*?

MV* are Architecture Patterns

• Separation of concerns
• Reusability
• Easier to reason about
• Design patterns for solved problems

Model

View

Controller

Model View Controller

• Model: Describes data; not the actual data in the database, but a description of the data in your app
• View: Presentation layer; templates and HTML
• Controller: Application logic; connects the Model and View; should be as thin as possible

MVC

Model

View

ViewModel

Model View ViewModel

• AngularJS is an MVVM
• Link MVVM with the idea of two way data binding
• Model: Still describes data
• View: Still the presentation layer
• Controller: Still there...
• ViewModel: A service (object) that "glues" the View to the Model

MVVM

What is AngularJS?

AngularJS

Provides a suite of functionality for common tasks

• Front-end Framework
• Standardized patterns
• Designed to build SPAs

Single Page Application (SPA)

• Loads views based on routes
• Router manages routing
• Can be URL or state driven

Vocabulary

• Module
• Controller
• Routing / Route
• Model
• View 
• Controller
• ViewModel

• Component
• Directive
• Service
• Factory
• Provider
• Dependency Injection

Big Picture

REVIEW

Compare and Contrast MVC and MVVM

What is AngularJS?

What is an SPA?

What is a module?

DEMO