Beginning AngularJS

Chapter 3 ■ IntroduCtIon to MVC

Number of Employees: {{ ourEmployees.length}}

{{employee}}

This listing isn’t terribly different from Listing 3-3—there is just one additional line of code. Instead of displaying
only the number of employees who work for us, we now use the ngRepeat directive to display the name of each
employee who works for us.
The ngRepeat directive will repeat the instance of the element upon which it is declared (a paragraph element in
this case) for each item in a collection. As Figure 3-3 shows, this results in a total of four paragraphs: one for each of
the employees in the ourEmployees array. Consider this a teaser. ngRepeat is quite powerful, and you will definitely be
seeing more of it in coming chapters.

Summary

I hope this chapter has started you thinking about the structure and organization of your applications. In the not-so-
distant past, a less formal approach to JavaScript development seemed to work well enough. Scripts were small and
played only a small role in application development, so it just didn’t matter to the extent that it does now.
I started off with a quick discussion about design patterns—just enough to put them on your radar and to let you
know that you are not alone. We then looked at the Model View Controller (MVC) pattern, the pattern predominantly
used when building AngularJS applications.
A quick look at ngRepeat demonstrated that AngularJS isn’t just helping us with the higher-level structural
aspects of our applications. The declarative approach taken with directives also helps us to keep our code clear and
concise.
JavaScript is used to build significant portions of web applications, so it is always important to consider
application design and structure.

Figure 3-3. Introducing ngDirective