Mastering Web Application

(Rick Simeone) #1
Chapter 1

The AngularJS team takes a very pragmatic approach to the whole family of MVC
patterns, and declares that the framework is based on the MVW (model-view-
whatever) pattern. Basically one needs to see it in action to get the feeling of it.


Bird's eye view

All the "Hello World" examples we've seen so far didn't employ any explicit layering
strategy: data initialization, logic, and view were all mixed together in one file.
In any real-world application, though, we need to pay more attention to a set of
responsibilities assigned to each layer. Fortunately, AngularJS provides different
architectural constructs that allows us to properly build more complex applications.


All the subsequent examples throughout the book omit the
AngularJS initialization code (scripts inclusion, ng-app
attribute, and so on) for readability.

Let's have a look at the slightly modified "Hello World" example:


<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="name"><br>
<h1>Hello, {{name}}!</h1>
</div>

The ng-init attribute was removed, and instead we can see a new ng-controller
directive with a corresponding JavaScript function. The HelloCtrl accepts a rather
mysterious $scope argument as follows:


var HelloCtrl = function ($scope) {
$scope.name = 'World';
}

Scope


A $scope object in AngularJS is here to expose the domain model to a view
(template). By assigning properties to scope instances, we can make new
values available to a template for rendering.


Scopes can be augmented with both data and functionality specific to a given
view. We can expose UI-specific logic to templates by defining functions on a
scope instance.

Free download pdf