CODEWITHSUNDEEP
angularjs
sathish_at_madison
sathish_at_madison

Reputation: 833

Angular controller not loading and no errors in rails app

I have a simple rails application., Hoping to get some input for this block of code that is not working. 

<div ng-contoller="myappMyController as myController">
        Hello {{ myController.greet() }}
      </div>

I have a controller defined in angular amp.js. Here is the source code for that js file

var MyController= function() {
    console.log("AM getting here");
    var controller=this;
    var greet = function () {
        return "howdy";
    }
    controller.greet=greet;
}
angular.module('myapp',[]).controller('MyController', MyController);

Here is the html file where am calling this method

<div ng-app>
  <p id="notice"><%= notice %></p>
  <h1>Listing Users</h1>
  <p>The value is {{1+1}}</p>
  <input ng-model="firstName" ng-model-options="{updateOn: 'blur'}"/>
  <p>Hi {{firstName}}</p>
  <div ng-contoller="myappMyController as myController">
    Hello {{ myController.greet() }}
  </div>
</div>

The copy of the application layout html file is

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="assets/favicon.ico">

  <title>AngularVenkat</title>

  <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

  <%= csrf_meta_tags %>


  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>-->
</head>
<body>

<%= yield %>

</body>
</html>

Any recommendations or things I have not addressed.

Upvotes: 0

Views: 64

Answers (1)

Lex
Lex

Reputation: 7194

Here you have defined your controller as MyController:

angular.module('myapp',[]).controller('MyController', MyController);

Here you are trying to reference it as myappMyController (plus you have a typo on ng-controller):

<div ng-contoller="myappMyController as myController">

You need to change one or the other so they both match either MyController or myappMyController.

Upvotes: 1

Related Questions