3

I am new to Angular so please forgive me if the question is stupid.

This is my HTML:

<body data-ng-app="App"> * * * <div ng-controller="Ctrl"> <p>{{obj.desc}}</p> </div> * * * </body>

app.js

var app = angular.module('App', []);

controller.js

app.controller('Ctrl', [$scope, function($scope) { $scope.obj = [ { intro: "intromessage", desc: "desc" }, { intro: "intromessage2", desc: "desc" } ]; }]);

I am not getting the value from key. In this case I am not receiving anything from desc, just a console error.

EDIT: I have tried everything proposed below. I did put data-ng-app in body, this is the full error I am receiving:

Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=myApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.7%2F%24injector%2Fnomod%3Fp0%3DmyApp%0AO%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A6%3A412%0Ale%2F%3C%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A25%3A72%0Ab%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A24%3A115%0Ale%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A24%3A358%0Ag%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A374%0Ar%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A7%3A353%0Ag%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A39%3A222%0Adb%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A43%3A246%0ABc%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A20%3A359%0ABc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A21%3A163%0Age%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A19%3A484%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A315%3A135%0Ab%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A189%3A161%0ASf%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A37%3A31%0ARf%2Fd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.7%2Fangular.min.js%3A36%3A486%0A a

It's probably something small, but I've spend entire morning trying to figure it out..

EDIT 2: I have resolved this by placing controller in the same file where app is defined - app.js. When placed in separate folder it is not working. I do not know why at this point.

Improve this question

    5 Answers 5

    Reset to default
    1

    You just made a boo boo here, a beginner mistake but not a big one.

    1. Mistake

    The big stack error you see in console is because of this below line where you injected scope in array in a wrong way.

    app.controller('Ctrl', [$scope, function($scope) {

    just change it to like this app.controller('Ctrl', ['$scope', function($scope) { by simply adding it in single quotes.

    This kind of dependency injection is followed while writing a better controller and this is a good practice when you want to minify your JS.

    2. Mistake

    $scope.obj is an array so you cant access items in it by simply doing {{obj.desc}} what you need is {{obj[0].desc}} but if you want to access all objects in the data you can use ng-repeat like below

    <p ng-repeat="item in obj track by $index">

    Below is the working code snippet.Hope this helps you !

    var app = angular.module('App', []); app.controller('Ctrl', ['$scope', function($scope) { $scope.obj = [{ intro: "intromessage", desc: "desc1" }, { intro: "intromessage2", desc: "desc2" }]; } ]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body data-ng-app="App"> <div ng-controller="Ctrl"> <!-- If you just want to access first object --> <p>{{obj[0].desc}}</p> <!-- If you just want to access all objects --> <p ng-repeat="item in obj track by $index"> {{item.intro}} ---- {{item.desc}} </p> </div> </body>

    Improve this answer
    1
    • Thanks, you've put a lot of effort into this. :)
      – tholo
      CommentedNov 7, 2016 at 9:34
    1

    To fix the error:

     <!-- REPLACE this <body data-ng-controller="App"> --> <!-- WITH this --> <body ng-app="App">

    To show the data use the ng-repeat directive

    <div ng-controller="Ctrl"> <div ng-repeat="item in obj"> <p>{{item.intro}}</p> <p>{{item.desc}}</p> </div> </div>
    Improve this answer
    0
      0

      You are dealing with an array of object so you have to iterate over it. So you need to do an Angular forEach loop.

      <div ng-controller="Ctrl" ng-repeat="desc in obj"> <p>{{desc}}</p> </div>

      ng-repeat

      also saw this

      The app should have the same capitalization as the var that you have declared when you initialized your application. Also you do not declare the scope in square brackets the way you have it. I think I fixed it below.

      app.controller('Ctrl', function($scope) { $scope.obj = [ { intro: "intromessage", desc: "desc" }, { intro: "intromessage2", desc: "desc" } ]; });
      Improve this answer
      3
      • Yes. But only because that is the way it was declared in angular.module('App', []);
        – andre mcgruder
        CommentedNov 4, 2016 at 0:35
      • I'm receiving the same error message. Check my edited question, please.
        – tholo
        CommentedNov 4, 2016 at 0:57
      • I made a change to the app capitalization. Check that out. Did you change the way you define your obj on the scope?
        – andre mcgruder
        CommentedNov 4, 2016 at 1:21
      0

      The issue here is that you are trying to get obj.desc but obj is an array of objects. So, either you need to use ng-repeat or provide an index. Also, you were missing ng-app="appName" (usually written with body)

      Here's the working example

      Improve this answer
      1
      • @tholo read your last edit. You were having their links in <script> inside your HTML properly?
        – tanmay
        CommentedNov 4, 2016 at 9:35
      0

      Seems like you have not instantiated the angular application. Hence, you are a getting a module error. Please bootstrap the application using ng-app and then provide controllers and directives of ng-repeat. If you are using ng-route then you have to add a ngRoute file apart from angularjs.min.js file. 

      <html ng-app="angularjs-injection"> <head> ...... </head> <body ng-controller="MainCtrl"> <h1 ng-repeat="text in name">Hey! {{text.intro}} - {{text.desc}}</h1> <div class="changeIt"></div> </body>

      Please check the code here as an example - http://plnkr.co/edit/5RVhNcO9F81Q3WeesySu

      If you still face the issue then please put a simple plunker it will help identify the actual problem.

      Improve this answer
      2
      • 1
        I have resolved this by placing controller in the same file where app is defined - app.js. When placed in separate folder it is not working. I do not know why at this point. Ah modular code or segregated code does not mean broken framework rules. AngularJS is a single page application and the definitions have to be in a single html page. Else it will not work unless you are using just tag templates with routes. Have a look at the my plunkr as an example.
        – Gary
        CommentedNov 4, 2016 at 16:45
      • 1
        You need to learn AngularJS step by step and understand the documentation correctly or ask specific questions. I do not understand your point/
        – Gary
        CommentedNov 5, 2016 at 10:59

      Start asking to get answers

      Find the answer to your question by asking.

      Ask question

      Explore related questions

      See similar questions with these tags.