Simple example AngularJS

Question

An example of displaying data with AngularJS when a button is pushed is

<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<script>
function Display($scope){
    $scope.show_date = function(){
        $scope.show=new Date();
    }       
}   
 </script>
</head>
<body  ng-controller="Display">
<button ng-click="show_date()">Show date!</button>
<div ng-message="required"> {{show}} </div>
</body>
</html>

Where I was wrong in this code?

Your declaration of the controller is using an outdated syntax — tymeJV, Oct 10 '16 at 16:08
what is the problem in reading documentation and seeing the basic? — Navoneel Talukdar, Oct 10 '16 at 16:09
You could refer [this answer](http://stackoverflow.com/a/28728380/2435473), you are just following old way of doing it like @tymeJV said — Pankaj Parkar, Oct 10 '16 at 16:10

Sajeetharan · Answer 1 · 2016-10-10T16:11:23.023

0

You are using angular version above 1.3, Basically from there on global controller function declaration is not supoorted

Change your controller as below,

var myApp = angular.module("myModule", [])
 myApp.controller("Display", function ($scope) 
 {
    $scope.show_date = function(){
    $scope.show=new Date();
  }     
 );

DEMO

edited Oct 10 '16 at 16:11

answered Oct 10 '16 at 16:08

Sajeetharan

216,225
63
350
396

Basically 1.3+ remove global declaration of controller, checkout [this answer](http://stackoverflow.com/a/28728380/2435473) – Pankaj Parkar Oct 10 '16 at 16:11

score 0 · Answer 2 · answered Oct 10 '16 at 16:17

Two things:

You just need to define an instance of your app module:

angular.module('app', [])

And then you need to register your controller will this app module:

.controller('DisplayCtrl', DisplayCtrl);

Click on Run code snippet to see your code working.

function DisplayCtrl($scope){
    $scope.show_date = function(){
        $scope.show=new Date();
    }       
}   

angular.module('app', [])
    .controller('DisplayCtrl', DisplayCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="DisplayCtrl">
  <button ng-click="show_date()">Show date!</button>
  <div ng-message="required"> {{show}} </div>
</div>

Simple example AngularJS

2 Answers2