0

Please do not mark this as a duplicate. I have seen many duplicates of this error posted in stack overflow. But my case is, I have the simplest of the applications posted there, but getting the same error.

I am trying to learn Angular JS. Below is my _Layout.chtml looks like.

<!DOCTYPE html>
<html lang="en" data-ng-app="">
<head>
    <meta charset="utf-8">
    <!-- Title here -->
    <title>@ViewBag.Title - MessageBoard</title>
    <!-- Description, Keywords and Author -->
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your,Keywords">
    <meta name="author" content="ResponsiveWebInc">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Stylesheets -->
    <link href="~/Content/Template/css/bootstrap.min.css" rel="stylesheet">
    <link href="~/Content/Template/css/ddlevelsmenu-base.css" rel="stylesheet">
    <link href="~/Content/Template/css/ddlevelsmenu-topbar.css" rel="stylesheet">
    <link href="~/Content/Template/css/flexslider.css" rel="stylesheet">
    <link href="~/Content/Template/css/prettyPhoto.css" rel="stylesheet">
    <link href="~/Content/Template/css/font-awesome.min.css" rel="stylesheet">
    <link href="~/Content/Template/css/blue.css" rel="stylesheet">
    <link href="~/Content/Template/css/style.css" rel="stylesheet">
    <link href="~/Content/Site.css" rel="stylesheet">
    <!-- Favicon -->
    <link rel="shortcut icon" href="~/Content/Template/img/favicon/favicon.png">
</head>

<body>
    <div class="main">
        <div class="container">
            <div class="row">
                @RenderBody()
            </div>
        </div>
    </div>
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>    
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/easing.js"></script>
    <script src="~/Scripts/ddlevelsmenu.js"></script>
    <script src="~/Scripts/flexslider.js"></script>
    <script src="~/Scripts/jquery.prettyPhoto.js"></script>
    <script src="~/Scripts/respond.min.js"></script>
    <script src="~/Scripts/html5shiv.js"></script>
    <script src="~/Scripts/custom.js"></script>    
    @RenderSection("PageScripts", required: false)
</body>
</html>

My Index.chtml is as below:

@{
    ViewBag.Title = "Home Page";
}
@section PageScripts
{
    <script src="~/js/home-index.js"></script>
}
<div data-ng-controller="homeIndexController">
    <div>Test</div>
</div>

My home-index.js file is as below:

//home-index.js
if (window.console) { console.log("In home-index"); }
function homeIndexController() {
    alert("Inside the home index controller");
}

Also, I see that replacing data-ng-app and data-ng-controller with ng-app and ng-controller do not fix the problem as some of my friends suggested.

In the Console, I see the In home-index is printed, but the function is undefined. I checked the function Name and matched with the controller declaration.

HTML1300: Navigation occurred.
File: localhost:50272
In home-index
Error: [ng:areq] http://errors.angularjs.org/1.3.8/ng/areq?p0=homeIndexController&p1=not%20a%20function%2C%20got%20undefined
   at Qb (http://localhost:50272/Scripts/angular.min.js:19:411)
   at sb (http://localhost:50272/Scripts/angular.min.js:20:1)
   at Anonymous function (http://localhost:50272/Scripts/angular.min.js:76:95)
   at Anonymous function (http://localhost:50272/Scripts/angular.min.js:57:255)
   at s (http://localhost:50272/Scripts/angular.min.js:7:406)
   at v (http://localhost:50272/Scripts/angular.min.js:57:124)
   at g (http://localhost:50272/Scripts/angular.min.js:52:9)
   at g (http://localhost:50272/Scripts/angular.min.js:52:26)
   at g (http://localhost:50272/Scripts/angular.min.js:52:26)
   at g (http://localhost:50272/Scripts/angular.min.js:52:26)
SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.
File: localhost:50272

Any suggestions are welcome.

user007
  • 1,504
  • 2
  • 18
  • 51
  • `Please do not mark this as a duplicate. I have seen many duplicates of this error posted in stack overflow.` Sorry, this is a duplicate.. Please read the answer and it is exactly what your issue as well. – PSL Dec 26 '14 at 19:07

1 Answers1

0

I thought first not to post an answer. Then I thought it would be great for newbies like me to know that many of the simplest angular examples tell about using global controller declaration on the global scope. The technical details about this can be found here. Appreciate PSL's effort to quickly pointing me to the right place.

I provided "app" to ng-app

<html lang="en" data-ng-app="app">

and changed my javascript call as below:

angular.module('app', []).controller('homeIndexController', function homeIndexController($scope) {
    alert("Inside the home index controller");
});
Community
  • 1
  • 1
user007
  • 1,504
  • 2
  • 18
  • 51