AngularJS not displaying controller

Question

I have the following code:

Trips.cshtml:

@section Scripts{
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="~/js/app-trips.js"></script>
    <script src="~/js/tripsController.js"></script>
}
<div class="row" ng-app="app-trips">
<div >{{"Two plus two : " + (2+2)}}</div>
  <div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3">
      {{ vm.name }}
   </div>
  </div>

app-trips.js:

   (function () {
   "use strict";
   angular.module("app-trips", []);
  })();

tripsController.js:

(function () {
    "use strict";
    angular.module("app-trips")
        .controller("tripsController", tripsController);
    function tripsController() {
        var vm = this;
        vm.name = "jaka";
    }
})();

In my .cshtml I get "2+2" = 4 shown in angular, but I don't get my vm.name called. Does anyone know what might be the problem?

Sajeetharan · Accepted Answer · 2017-07-31 18:36:54Z

1

You have not closed the div,

<div class="row" ng-app="app-trips">
<div >{{"Two plus two : " + (2+2)}}</div>
  <div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3">
      {{ vm.name }}
  </div>
</div>

DEMO

 angular.module("app-trips", []).controller("tripsController", tripsController);
 function tripsController() {
        var vm = this;
        vm.name = "jaka";
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row" ng-app="app-trips">
<div >{{"Two plus two : " + (2+2)}}</div>
<div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3">
      {{ vm.name }}
</div>

edited Jul 31, 2017 at 18:36

answered Jul 31, 2017 at 18:35

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

jaka mojster Over a year ago

My bad, it is closed, I just didn't add that here.

jaka mojster Over a year ago

Wow... But for real, it is not working at my project. "vm.name" (not jaka) shows for 0.5 seconds and than disappears .

Sajeetharan Over a year ago

Then it must be something wrong with your project setup

jaka mojster Over a year ago

do you have any suggestions what might cause this problems in my setup?

Sajeetharan Over a year ago

check the scripts loading order and also console error

|

Himesh Suthar · Accepted Answer · 2017-07-31 18:37:10Z

1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
    <!-- <link href="Styles.css" rel="stylesheet" /> -->
   <script>
 (function () {
   "use strict";
   angular.module("app-trips", []);
  })();
  (function () {
    "use strict";
    angular.module("app-trips")
        .controller("tripsController", tripsController);
    function tripsController() {
        var vm = this;
        vm.name = "jaka";
    }
})();
   </script>
</head>
<body >
   <div class="row" ng-app="app-trips">
<div >{{"Two plus two : " + (2+2)}}</div>
  <div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3">
      {{ vm.name }}
  </div>
</body>
</html>

answered Jul 31, 2017 at 18:37

Himesh Suthar

5724 silver badges14 bronze badges

3 Comments

jaka mojster Over a year ago

Wow this works... But for real, it is not working at my project. "vm.name" shows for 0.5 seconds and than disappears.

Himesh Suthar Over a year ago

try to place internal js as i did. and check..does it working or not. because i checked your code . there is nothing wrong about it .. or remove function and declare global variable for debugging

jaka mojster Over a year ago

I think I found the solution. I had Nugget package Angular installed as well as Angular in bower.json file. I uninstalled Angular, deleted package in /wwwroot/lib folder and added it to the bower again. Now it works.

Collectives™ on Stack Overflow

AngularJS not displaying controller

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related