View source Improve this doc

ngController
directive in module ng

Description

The ngController directive assigns behavior to a scope. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

MVC components in angular:

  • Model — The Model is data in scope properties; scopes are attached to the DOM.
  • View — The template (HTML with data bindings) is rendered into the View.
  • Controller — The ngController directive specifies a Controller class; the class has methods that typically express the business logic behind the application.

Note that an alternative way to define controllers is via the $route service.

Usage

as attribute
<ANY ng-controller="{expression}">
   ...
</ANY>
as class
<ANY class="ng-controller: {expression};">
   ...
</ANY>

Directive info

  • This directive creates new scope.

Parameters

ParamTypeDetails
ngControllerexpression

Name of a globally accessible constructor function or an expression that on the current scope evaluates to a constructor function. The controller instance can further be published into the scope by adding as localName the controller name attribute.

Example

Here is a simple form for editing user contact information. Adding, removing, clearing, and greeting are methods declared on the controller (see source tab). These methods can easily be called from the angular markup. Notice that the scope becomes the this for the controller's instance. This allows for easy access to the view data from the controller. Also notice that any changes to the data are automatically reflected in the View without the need for a manual update. The example is included in two different declaration styles based on your style preferences.

Source




















Demo



    
Source

























Demo