k.c.
k.c.

Reputation: 1835

angular javascript not working in visual studio 2015 asp.net 5 project when using Bower

I just started with VS2015 ASP.Net5 using Angular. I get an error when using the angular retrieved by Bower:

Error: [ng:areq] Argument 'TextController' is not a function, got undefined http://errors.angularjs.org/1.4.3/ng/areq?p0=TextController&p1=not%20a%20function%2C%20got%20undefined

This is my html code:

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
    <p>{{SomeText}}</p>
    <!--does not work-->
    <script src="lib/angular/angular.js"></script>
    <!--works-->
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">                              </script>-->    
    <script>
        function TextController($scope) {
            $scope.SomeText = "Go";
        }
    </script>
</body>

When I use the Angular Google provides it works like a charm. Below is a what a picture of what was generated using Bower in VS

partial project view

What am I missing?

UPDATE This is the working version thanks to Claies:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
    <p>{{SomeText}}</p>
    <!--does not work-->
    <script src="lib/angular/angular.js"></script>
     <script>
        angular.module('myApp', []).controller('TextController', function ($scope) {
            $scope.SomeText = "Go";
        });
    </script>
 </body>
 </html>

Upvotes: 2

Views: 1950

Answers (1)

link
link

Reputation: 1676

Your controller cannot be global in the latest release of Angular, and, even if it should, you should try to modularise your design anyway.

Declare a module:

angular.module('myApp', [])

and register the controller onto the module:

angular.module('myApp')
   .controller('TextController', function() { /*...*/ })

Finally, add the module to the ng-app directive:

<html ng-app="myApp">

Upvotes: 2

Related Questions