chapter 12 Angular Js

(function () {
var app = angular.module("atTheMovies", []);
}());
The angular variable is the global Angular object. Just like the jQuery API is available
through a global $ variable, Angular exposes a top-level API through angular. In the previous
code, the module function creates a new module named atTheMovies, whereas the
second parameter, the empty array, declares dependencies for the module (technically this
module depends on the core Angular module “ng”, but you don’t need to list it explicitly
and you’ll see examples of other dependencies later in the chapter).

 Also modify the Index view to include the new script:
@section scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Client/Scripts/atTheMovies.js"></script>
}
<div ng-app="atTheMovies">
</div>
Notice the div element in the code now specifi es a value for the ng-app directive. The markup
instructs Angular to load atTheMovies as the application module. This allows you to configure
additional components into the module that are initialized when Angular bootstraps the application.
The application needs these additional components to achieve the first goal...


Creating Controllers, Models, and Views
Angular controllers are objects you use to govern a section of the DOM and set up a model. Angular
controllers are stateful and live as long as their associated area of the DOM is still on display. This
behavior makes controllers in Angular a little different from their counterparts in ASP.NET MVC,
where controllers process a single HTTP request and then go away

(function(app) {
var ListController = function() {
};
app.controller("ListController", ListController);
}(angular.module("atTheMovies")));
The preceding code defi nes a ListController function

The function is registered with Angular as a constructor by
calling the application module’s controller method. The first parameter is the name of the controller
(Angular looks up the controller using this name), and the second parameter is the constructor function associated with the name. Although the controller doesn’t perform any interesting behavior yet, the markup inside the Index view can now put the controller in charge of a section of the DOM (after including the new ListController.js script).

@section scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Client/Scripts/atTheMovies.js"></script>
<script src="~/Client/Scripts/ListController.js"></script>
}
<div ng-app="atTheMovies">
       <div ng-controller="ListController">
      </div>
</div>
The ng-controller directive attaches the ListController to a div inside the application. Angular
finds the controller by name and creates the controller. By adding an Angular template to the
markup, you’ll see a controller, view, and model:

<div data-ng-app="atTheMovies">
      <div ng-controller="ListController">
               {{message}}
      </div>
</div>
The controller is the ListController, the view is the HTML, and the view wants to display a piece
of information from the model using a template with the expression message inside. Making the
message available is the controller’s responsibility, which requires some additional code:

(function(app) {
        var ListController = function($scope) {
              $scope.message = "Hello, World!";
        };
       app.controller("ListController", ListController);
}(angular.module("atTheMovies")));

The $scope variable is an object constructed by Angular and passed as a parameter to the controller
function. The controller’s responsibility is to initialize $scope with data and behavior, because

$scope is ultimately the model object consumed by the view.

➤ Controllers are responsible for putting together a model by augmenting the $scope variable.
Controllers avoid manipulating the DOM directly. Instead, changes in the UI are propagated
by updating information in the model that the view consumes.
➤ The model object is unaware of the view and controller. The model is only responsible for
holding state as well as exposing some behavior to manipulate the state.
➤ The view uses templates and directives to gain access to the model and present information.
This separation of concerns in an Angular application is closer to the Model View View
Model (MVVM) design pattern in XAML-based applications than it is to a true MVC design
pattern. Some additional abstractions are still available with Angular, including the concept of services. The ListController must use a service to retrieve the movies from the server.