Angular.js "No object" error when adding ng-app name

Question

I cannot figure out why Angular throws an error when I include a name for the ng-app attribute.

The error is "uncaught object" in Chrome, on line 36 of angular.js function minErr(module) {

I am using the minified angular library from googleapis.

If I simply have <html ng-app>, there is no error. As soon as I do <html ng-app="app">, Angular doesn't work anymore.

EDIT: Adding my code.

HTML

```

<html lang='en' ng-app=''>
  <head>
    <title>Show</title>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="OTLcsbbFM0FzoPfIWnn8SDke6kTDnVSTG+EuP8SjQC0=" name="csrf-token" />

    <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />

    <!-- Touch icon (uncomment if needed) -->
    <!-- %link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' } -->
    <!-- Placed at the top of the document 'cause of turbolinks -->
    <script data-turbolinks-track="true" src="/assets/i18n.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/i18n/translations.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/turbolinks-spinner.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/twbs.js?body=1"></script>
    <script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <!--[if lte IE 8]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <script src="/assets/respond.js"></script>
    <![endif]-->
  </head>
 <div class='container' id='main-container'>
      <!-- <script src="/sortable.js" /> -->
      <script>
        function PlansCtrl($scope){
          $scope.plan = {"id":1,"name":"Sample plan — four days a week","plan_blocks":[{"id":1,"name":"Monday","set_templates":[{"id":3,"exercise_id":14,"exercise_name":"Power Clean","weight":100,"reps":2},{"id":7,"exercise_id":14,"exercise_name":"Power Clean","weight":10,"reps":5},{"id":4,"exercise_id":17,"exercise_name":"Hang Clean","weight":100,"reps":2},{"id":5,"exercise_id":19,"exercise_name":"Push Up","weight":2,"reps":2},{"id":6,"exercise_id":21,"exercise_name":"Pull Up","weight":5,"reps":5}]},{"id":15,"name":"Tuesday","set_templates":[]}]}
        }
      </script>

      <p id="notice"></p>

      <h3>Sample plan — four days a week
      <br /><small>There are 2 blocks in this plan.</small>
      </h3>

      <p>
        <a href="/plans/1/plan_blocks/new">
        <button type="button" class="btn btn-default">Add a block</button>
      </a></p>
      <hr />
      <div ng-controller="PlansCtrl">

        <a ng-repeat-start="block in plan.plan_blocks" href="/plan_blocks/{{block.id}}">{{block.name}}</a>
          <a href="/plan_blocks/{{block.id}}/set_templates/new">
            <button type="button" class="btn btn-default">Add a set</button>
          </a>
          <div class="table-responsive" ng-repeat-end>
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>Exercise</th>
                  <th>Weight</th>
                  <th>Reps</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-if="block.set_templates.length == 0"><td colspan=3>No sets</td></tr>
                <tr ng-repeat="set_template in block.set_templates">
                  <td>{{set_template.exercise_name}}</td>
                  <td>{{set_template.weight}} kg</td>
                  <td>{{set_template.reps}}</td>
                </tr>
              </tbody>
            </table>
          </div>

      </div >

```

Would you be able to share the code of your HTML page & Angular app Javascript file? — Matt
– Matt, Commented Jul 13, 2014 at 8:46

Peter Aron Zentai · Accepted Answer · 2014-07-13 10:17:12Z

2

You need to create an appModule in order to use named apps.

<html ng-app="App">
  <head>
  <script>
    var app = angular.module('App',[]);
    app.controller("PlansCtrl", function($scope) {
     $scope.plan = {"id":1,"nam ....
    });
   </script>
   </head>
   <body ng-controller="PlansCtrl"></body>
</html>

edited Jul 13, 2014 at 10:17

answered Jul 13, 2014 at 9:12

Peter Aron Zentai

11.8k6 gold badges43 silver badges72 bronze badges

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

2 Comments

Ben Over a year ago

I guess the bug is because I tried referencing 'angular.module' instead of 'ng.module'?

Peter Aron Zentai Over a year ago

sorry, that was a typo, corrected. it is angular.module. If you cant see the angular.module method (undefined) then angular is not loaded.

Liad Livnat · Accepted Answer · 2014-07-13 09:04:47Z

0

I suggest to add a break point on angular.js file in line 78

return new Error(message);

and have a look on the message to see what is the error.

also you can use F12 on chrome console to see if there are errors thrown.

In addittion make sure you change app name in app.js

second line:

 angular.module('App',

answered Jul 13, 2014 at 9:04

Liad Livnat

7,49517 gold badges62 silver badges98 bronze badges

2 Comments

Ben Over a year ago

Liad, this is quite odd. The code that I posted will work as-is, with the controller being just a named function "PlansCtrl". The instant I use ng-app="App", there is an error.

Liad Livnat Over a year ago

you don't have to use ng-app if you define on each div element ng-controller, but if you don't define any controller, and you would like to use just app-name you can do that by setting the partials from the angular-js, i suggest you to download angular-seed and use it.

Collectives™ on Stack Overflow

Angular.js "No object" error when adding ng-app name

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related