My "Hello world" Angular Program is not working in 1.3.14 version

Question

I am new in angularjs. i have created a helloworld program. for angular reference i used CDN. but the problem is the program is working on version 1.0.8 version but not working in 1.3.14 version. I can not say what is the problem. My code is given bellow:

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8"/>
</head>
<body>
<header>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script type="text/javascript">
    function HelloWorldCtrl($scope) {
        $scope.helloMessage = "Hello World from Nasir Uddin";
    }
</script>
</body>
</html>

Same thing happens if I download the angular 1.0.8 version and put it in my project folder then it's working but if i download the 1.3.14 and put it my project folder then it's not working. Please help me to find the solution.

http://stackoverflow.com/questions/26943306/changes-in-angularjs-1-3/26945257#26945257. This is one of the breaking changes for Angular 1.3; you can't declare controllers globally anymore. — Claies, Jul 01 '15 at 08:29

RIYAJ KHAN · Accepted Answer · 2015-07-01T09:37:15.703

Well you can achieve this with new version in this way.

 <!DOCTYPE html>
<html ng-app="myModule">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<header>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>

<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">

    angular.module('myModule',[]).config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);    

    function HelloWorldCtrl($scope) {
        $scope.helloMessage = "Hello World from Nasir Uddin";
    }
</script>
</body>
</html>

You can read more here

EDIT CODE-

In header use like this

 <h1 ng-controller="HelloWorldCtrl" ng-bind="helloMessage"></h1>

to avoid HTML fluctuation

gr3g · Answer 2 · 2015-07-01T08:38:53.460

This is a better practice of syntax for the new version

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8"/>
</head>
<body>
<header>
    <h1 ng-controller="HelloWorldCtrl as ctrl">
        <span ng-bind="ctrl.helloMessage"> </span>
    </h1>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
<script type="text/javascript">

   (function(){
     angular.module('app', [])

    .controller('HelloWorldCtrl', [function(){
        var self = this;
        self.helloMessage = "HEllo World from Nasir Uddin";

     }]);

    })();
</script>
</body>
</html>

It is not recommended, since version 1.2.7, to use scope. Because scope are made in every controller or directive (ng-repeat for example). Knowing from which scope comes the data we'll be easier to maintain

score 1 · Answer 3 · answered Jul 01 '15 at 09:20

Due to restrictions imposed in angular 1.3 regarding global controllers, you can no longer use global controllers. Refer: https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018

You need to have your controller defined within a module, which is the best practice for doing so.

Refer this code snippet for updated variation of your code which works with angular-1.3

<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <header>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
  </header>

  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script type="text/javascript">
    var app = angular.module('myApp', []);

    app.controller('HelloWorldCtrl', function($scope) {
      $scope.helloMessage = "Hello World from Nasir Uddin";
    });
  </script>
</body>

</html>

score 1 · Answer 4 · answered Jul 01 '15 at 10:27

There are improvements in AngularJs 1.3.14 and Angular 1.4.0

Now if we are using these versions then we have to create a global variable with main angular module first then create contoller with that variable and then we can use it

var app = angular.module('app', []);

And we will create controller like this with the app variable

 app.controller('Ctrl', function($scope) {
    ....
    });

My "Hello world" Angular Program is not working in 1.3.14 version

4 Answers4

Linked