Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

My Angular App is Broken after Upgrading to the Latest Beta

DZone's Guide to

My Angular App is Broken after Upgrading to the Latest Beta

· Java Zone ·
Free Resource

The CMS developers love. Open Source, API-first and Enterprise-grade. Try BloomReach CMS for free.

Introduction

I have been experimenting with AngularJS for a couple of months. After upgrading to 1.3.0-beta.18, I noticed the following code didn't work. I was previously using the latest stable build which is 1.2.22 as shown below:

The HTML File

<!DOCTYPE html>
<html ng-app="">

<head>
  <!--Works with latest Stable Build-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

  <!--Does not work with Latest Beta-->
  <!--UNCOMMENT ME! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>-->


  <script src="script.js"></script>
</head>

<body ng-controller="MainController">
  <h1>Angular Playground</h1>
  {{message}}
  <br />Total Length: {{message.length}}
</body>

</html>

The JavaScript File

var MainController = function($scope) {
    $scope.message = "Hello, Michael";
};

Using 1.2.22, the following is displayed in the browser:

Hello, Michael
Total Length: 14

However, if I use 1.3.0-beta.18, then I get the following error:

Error: [ng:areq] Argument 'MainController' is not a function, got undefined

And the page returns the following:

{{message}}
Total Length: {{message.length}}

The Fix

After a lot of digging, I found several other had asked this question and it turns out that the answer is that with 1.3.x, you can't declare a global constructor and use it with ng-controller as I was doing before. You have to create an angular module and add MainController as a controller as shown below:

(function(angular) {

    function MainController($scope) {
        $scope.message = "Hello, Michael";
    };

    angular.module("app", []).controller("MainController", ["$scope", MainController]);

})(angular);

The only modification needed for the HTML page is to add the name of the angular module as shown below (where before I left it blank):

<html ng-app="app">

Wrap-Up

It is kind of a bummer to know that so many breaking changes are introduced in each version of Angular, but maybe that is just the nature of the beast. Anyways, I hope this post helped someone out there that was struggling like I was.


BloomReach CMS: the API-first CMS of the future. Open-source & enterprise-grade. - As a Java developer, you will feel at home using Maven builds and your favorite IDE (e.g. Eclipse or IntelliJ) and continuous integration server (e.g. Jenkins). Manage your Java objects using Spring Framework, write your templates in JSP or Freemarker. Try for free.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}