CODEWITHSUNDEEP
angularjsasp.net-mvc
jaka mojster
jaka mojster

Reputation: 13

AngularJS not displaying controller

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?

Upvotes: 0

Views: 39

Answers (2)

Himesh Suthar
Himesh Suthar

Reputation: 562

<!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>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

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>

Upvotes: 1

Related Questions