Why doesn't angularjs code render when controller is referenced?

Question

I've created a new asp.net MVC app in VS.NET 2013. In _Layout.cshtml, I have a reference to the angularjs library (Google developer site). I also define a controller called "con1" and create a variable.

_Layout.cshtml:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script type="text/javascript">
   function con1($scope) {
     $scope.somestring = "some string";
   }
</script>

Index.cshtml:

<div>
{{1+1}}
</div>

The above works fine and renders the result of "2".

When I change the div to the following and start trying to access the somestring variable in the controller, I get the actual AnguarJS code rather than the result.

<div ng-controller="con1">
{{1+1}}
</div>

Output: "{{1+1}}"

Any idea why adding the controller reference breaks it? This seems to be VS.NET specific. I have a jsfiddle here that works fine: http://jsfiddle.net/jpswdzxu/. That is basically the output from the VS.NET project.

Global controllers are not supported since 1.3. See this SO post stackoverflow.com/questions/25679182/… — Chandermani
– Chandermani, Commented Nov 29, 2014 at 8:16

Beartums · Accepted Answer · 2014-11-29 06:44:23Z

1

You need to define the Angular Application, or it won't work:

<script type="text/javascript">
    var myApp = angular.module('myApp',[])

    .controller('myAppCtrl', function($scope) {

        $scope.somestring = 'teststring';
    });
</script>

Then, the HTML should be:

<body ng-app="myApp">

    <div ng-controller="myAppCtrl">
        {{somestring}}
    </div>
</body>

Or, using your jsfiddle, it would be:

<div ng-app="myApp" ng-controller="myAppController">
    {{1+1}}
    <br>
    {{somestring}}
</div>

and:

angular.module('myApp',[])

.controller('myAppController', function ($scope) {
    $scope.somestring = "some string";
});

Good Luck!

answered Nov 29, 2014 at 6:44

Beartums

1,3501 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

4thSpace Over a year ago

Excellent! This works. I have a couple of question: 1.) I've seen many examples where <html lang="en" ng-app> works fine. Why was that not the case here? 2.) I was following the example here xombe.com/2014/02/17/combine-angular-js-with-asp-net-mvc. Maybe he left out a few steps? Thanks!

Beartums Over a year ago

4thSpace, glad this helped. In answer to 1) I'm not sure of the questions. <html lang="eng" ng-app> is, i think, allowed in some versions, but I've never found a need to exclude the name. As Chandermani says in the comment above, global controllers are not supported since version 1.3. as for 2) It looks like the author is using an earlier version or simply left out the ng-app directive part of the page. Personally I've always defined the app in the html tag and the javascript, so I'm not sure of the details of that particular usage.

Collectives™ on Stack Overflow

Why doesn't angularjs code render when controller is referenced?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related