AngularJS ng-Controller Directive

The AngularJS ng-controller directive is used to attach a controller class to the view.

Syntax1 : Define Controller

function CustomerController($scope) {
  $scope.customer = { name: "Jimi Scott" };
}

Syntax2 : Define Controller

var app = angular.module('myApp', []);
    app.controller('CustomerController', function($scope) {
      $scope.customer = { name: "Jimi Scott" };
    });

AngularJS ng-Controller Directive Example1

<html>
<head>
<title>My first AngularJS ng-controller Directive code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining Controller Using Standard Javascrip Object Constructor
function CustomerController($scope) {
  $scope.customer = { name: "Jimi Scott", address: "12-13-283/A1", email: "Jimi@yahoo.com" };
}
</Script>
</head>
<body>
<div ng-app="">
<div ng-controller="CustomerController"> 
<p>Customer Name : {{ customer.name }}</p>
<p>Customer Name : {{ customer.address }}</p>
<p>Customer Name : {{ customer.email }}</p>

</div>
</div>
</body>
</html>

See Live Example

AngularJS ng-Controller Directive Example2

<html>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining Controller Using AngularJS Module
var app = angular.module('myApp', []);
    app.controller('CustomerController', function($scope) {
        $scope.customer = { name: "Jimi Scott", address: "12-13-283/A1", email: "Jimi@yahoo.com" };
    });
</Script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="CustomerController"> 
<p>Customer Name : {{ customer.name }}</p>
<p>Customer Name : {{ customer.address }}</p>
<p>Customer Name : {{ customer.email }}</p>

</div>
</div>
</body>
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Controller Directive

AngularJS ng-Controller Directive Example1

AngularJS ng-Controller Directive Example2

Recent Articles