CODEWITHSUNDEEP
javascriptruby-on-railsangularjscoffeescript
Billy Logan
Billy Logan

Reputation: 2520

Error: [ng:areq] Argument is not a function, got undefined

I was attempting to make a simple app with Angular and I've stumbled upon

enter image description here

The error pops up when the page is loaded. What have I done wrong?

views/raffle/index.html.erb

<h1>Raffler</h1>

<div ng-controller="RaffleCtrl">
  <form>
    <input type="text" ng-model="newEntry.name">
  </form>

  <ul>
    <li ng-repeat="entry in entries">
     {{entry.name}}
    </li>
  </ul>
</div>

assets/javascript/raffle.js.coffee

@RaffleCtrl = ($scope) ->
  $scope.entries = [
    {name: "Larry"}
    {name: "Curly"}
    {name: "Moe"}
  ]

views/layouts/application.html.erb

<!DOCTYPE html>
<html ng-app>
<head>
  <title>AngularTestProject</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>

<body>
  <div id="container">
    <%= yield %>
  </div>
</body>

</html>

Upvotes: 0

Views: 80

Answers (1)

Deepak Ingole
Deepak Ingole

Reputation: 15742

You can do,

<div ng-app="myApp">
     <h1>Raffler</h1>

    <div ng-controller="RaffleCtrl">
        <form>
            <input type="text" ng-model="newEntry.name">
        </form>
        <ul>
            <li ng-repeat="entry in entries">{{entry.name}}</li>
        </ul>
    </div>
</div>

angular.module('myApp', []).controller("RaffleCtrl", function ($scope) {
    $scope.entries = [{
        name: "Larry"
    }, {
        name: "Curly"
    }, {
        name: "Moe"
    }];

});

DEMO

Upvotes: 1

Related Questions