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
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?
What are the first two steps to start an Angular app?
* HINT: One goes into an app.js and another goes into an index.html
What is the controller's main purpose?
What does a route do?
QUESTIONS?
Intro to AngularJS
By Elana
Intro to AngularJS
- 518