Developing applications in JavaScript is always a challenge. Due to its malleable nature and lack of type checking, building a decent size application in JavaScript is difficult. Moreover, we use JavaScript for all types of processes such as User Interface (UI) manipulation, client server interaction, and business processing/validations. As a result, we end up with spaghetti code that is difficult to maintain and test.
Libraries such as jQuery do a great job of taking care of various browser quirks and providing constructs that can lead to an overall reduction in lines of code. However, these libraries lack any structural guidance that can help us when the codebase grows.
This is where architectural patterns such as Model View Controller (MVC) and frameworks such as AngularJS come into the picture. This chapter is dedicated to understanding the concept behind MVC architecture and learning how to put these principles into practice while we build a simple app using AngularJS.
The topics that we will cover in this chapter are as follows:
MVC basics: We will talk in brief about each of the components of the Model-View-Controller pattern.
Building our first AngularJS app: We will build a small game, Guess the Number! in AngularJS.
Understanding the Model, View, and Controller components: We will dissect the game that we built to understand the MVC components of AngularJS.
Working with scopes: AngularJS scopes are an important concept to understand. This chapter will introduce us to scopes and the role they play in the framework.
An introduction to some AngularJS constructs: We will introduce some new constructs such as expressions, directives, and interpolations that we used to build the Guess the Number! app.
App initialization: We will talk about the app initialization process in AngularJS; this is also known as App bootstrapping.
Lastly, we will provide some resources and tools that will come in handy during AngularJS development and debugging.
So let's get started with our first topic: MVC.