AngularJS Essentials
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
Chapter 1<br />
Architectural concepts<br />
It's been a long time since the famous Model-View-Controller (MVC) pattern<br />
started to gain popularity in the software development industry and became one of<br />
the legends of the enterprise architecture design.<br />
Basically, the model represents the knowledge that the view is responsible for<br />
presenting, while the controller mediates the relationship between model and view.<br />
However, these concepts are a little bit abstract, and this pattern may have different<br />
implementations depending on the language, platform, and purpose of the application.<br />
After a lot of discussions about which architectural pattern the framework follows,<br />
its authors declared that from now on, <strong>AngularJS</strong> would adopt Model-View-<br />
Whatever (MVW). Regardless of the name, the most important benefit is that the<br />
framework provides a clear separation of the concerns between the application<br />
layers, providing modularity, flexibility, and testability.<br />
In terms of concepts, a typical <strong>AngularJS</strong> application consists primarily of a view,<br />
model, and controller, but there are other important components, such as services,<br />
directives, and filters.<br />
The view, also called template, is entirely written in HTML, which provides a great<br />
opportunity to see web designers and JavaScript developers working side by side. It<br />
also takes advantage of the directives mechanism, which is a type of extension of the<br />
HTML vocabulary that brings the ability to perform programming language tasks<br />
such as iterating over an array or even evaluating an expression conditionally.<br />
Behind the view, there is the controller. At first, the controller contains all the<br />
business logic implementation used by the view. However, as the application grows,<br />
it becomes really important to perform some refactoring activities, such as moving<br />
the code from the controller to other components (for example, services) in order to<br />
keep the cohesion high.<br />
The connection between the view and the controller is done by a shared object<br />
called scope. It is located between them and is used to exchange information<br />
related to the model.<br />
The model is a simple Plain-Old-JavaScript-Object (POJO). It looks very clear and<br />
easy to understand, bringing simplicity to the development by not requiring any<br />
special syntax to be created.<br />
[ 9 ]<br />
www.it-ebooks.info