Trouble with a basic Angular demonstration

Question

Trouble with a basic Angular demonstration

After replicating an angular example from w3schools (found here), I encountered some issues with it not functioning correctly. Despite my efforts, the code appears to be accurate. Can anyone spot what might be going wrong?

To provide more context, here is a link to a Plunker showcasing my implementation: Plunker Experiment

Below are snippets of the Angular JS and HTML code used:

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
    $scope.things = [
       {title: 'my title 1', content: 'my Content 1'},  
        title: 'my title 2', content: 'my Content 2'}, 
        title: 'my title 3', content: 'my Content 3'}, 
        title: 'my title 4', content: 'my Content 4'},  
        title: 'my title 5', content: 'my Content 5'},
        title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
       {title: 'my 2nd title 1', content: 'my Content 1'},  
        title: 'my 2nd title 2', content: 'my Content 2'}, 
        title: 'my 2nd title 3', content: 'my Content 3'}, 
        title: 'my 2nd title 4', content: 'my Content 4'},  
        title: 'my 2nd title 5', content: 'my Content 5'},
        title: 'my 2nd title 6', content: 'my Content 6'}
];
});

HTML Structure:

<!DOCTYPE html>
<html>

  <head>

     <!-- CSS  -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">

    <!-- JS  -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  </head>

<body>  

    <div ng-app="myApp" ng-controller="thingsCtrl">
        <h1>Hello Plunker!</h1>



      <div class="container">   
          <div class="row">

            <div class="col-sx-6"><h4>My Subtitle</h4>
                <div ng-repeat="x in things"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

            <div class="col-sx-6"><h4>My Subtitle 2</h4>
                <div ng-repeat="x in things2"> 
                    <div class="col-sx-6 col-sm-4 col-md-2">
                  <div class="cube">
                    <b>{{x.title}}</b> </br> {{x.content}}

                  </div>                
                    </div>  
                </div>
            </div>

          </div>
      </div> 

    </div>     

    <script src="script.js"></script>     

      </body>

    </html>

javascript angularjs twitter-bootstrap

Answer 1

Answer №1

Incorrect controller was mentioned in the markup. Please make the following correction:

<div ng-app="myApp" ng-controller="myCtrl">

Change it to:

<div ng-app="myApp" ng-controller="thingsCtrl">

Answer 2

Incorrect controller was mentioned in the markup. Please make the following correction:

<div ng-app="myApp" ng-controller="myCtrl">

Change it to:

<div ng-app="myApp" ng-controller="thingsCtrl">

Answer 3

Answer №2

Make sure to properly structure your key/value arrays when working with lists.

    {name: 'item 1', description: 'description 1'}, 
    name: 'item 2', description: 'description 2'},

Consider using the following approach:

angular.module('myApp', []).controller('itemsCtrl', function($scope) {
    $scope.items = [
       {name: 'item A', description: 'description A'},  
        {name: 'item B', description: 'description B'}, 
        {name: 'item C', description: 'description C'}, 
        {name: 'item D', description: 'description D'},  
        {name: 'item E', description: 'description E'},
        {name: 'item F', description: 'description F'}
        ];

    $scope.otherItems = [
       {name: 'other item A', description: 'description A'},  
       {name: 'other item B', description: 'description B'}, 
       {name: 'other item C', description: 'description C'}, 
       {name: 'other item D', description: 'description D'},  
       {name: 'other item E', description: 'description E'},
       {name: 'other item F', description: 'description F'}
        ];
});

Don't forget to review any console errors:

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

Ensure that your myApp controller is set up correctly.

Answer 4

Make sure to properly structure your key/value arrays when working with lists.

    {name: 'item 1', description: 'description 1'}, 
    name: 'item 2', description: 'description 2'},

Consider using the following approach:

angular.module('myApp', []).controller('itemsCtrl', function($scope) {
    $scope.items = [
       {name: 'item A', description: 'description A'},  
        {name: 'item B', description: 'description B'}, 
        {name: 'item C', description: 'description C'}, 
        {name: 'item D', description: 'description D'},  
        {name: 'item E', description: 'description E'},
        {name: 'item F', description: 'description F'}
        ];

    $scope.otherItems = [
       {name: 'other item A', description: 'description A'},  
       {name: 'other item B', description: 'description B'}, 
       {name: 'other item C', description: 'description C'}, 
       {name: 'other item D', description: 'description D'},  
       {name: 'other item E', description: 'description E'},
       {name: 'other item F', description: 'description F'}
        ];
});

Don't forget to review any console errors:

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

Ensure that your myApp controller is set up correctly.

Answer 5

Answer №3

Your object array syntax seems to be incorrect as it is missing a curly brace before each object.

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
  $scope.things = [
   {title: 'my title 1', content: 'my Content 1'},  
    {title: 'my title 2', content: 'my Content 2'}, 
    {title: 'my title 3', content: 'my Content 3'}, 
    {title: 'my title 4', content: 'my Content 4'},  
    {title: 'my title 5', content: 'my Content 5'},
    {title: 'my title 6', content: 'my Content 6'}
    ];

  $scope.things2 = [
   {title: 'my 2nd title 1', content: 'my Content 1'},  
    {title: 'my 2nd title 2', content: 'my Content 2'}, 
    {title: 'my 2nd title 3', content: 'my Content 3'}, 
    {title: 'my 2nd title 4', content: 'my Content 4'},  
    {title: 'my 2nd title 5', content: 'my Content 5'},
    {title: 'my 2nd title 6', content: 'my Content 6'}
    ];
});

Answer 6

Your object array syntax seems to be incorrect as it is missing a curly brace before each object.

angular.module('myApp', []).controller('thingsCtrl', function($scope) {
  $scope.things = [
   {title: 'my title 1', content: 'my Content 1'},  
    {title: 'my title 2', content: 'my Content 2'}, 
    {title: 'my title 3', content: 'my Content 3'}, 
    {title: 'my title 4', content: 'my Content 4'},  
    {title: 'my title 5', content: 'my Content 5'},
    {title: 'my title 6', content: 'my Content 6'}
    ];

  $scope.things2 = [
   {title: 'my 2nd title 1', content: 'my Content 1'},  
    {title: 'my 2nd title 2', content: 'my Content 2'}, 
    {title: 'my 2nd title 3', content: 'my Content 3'}, 
    {title: 'my 2nd title 4', content: 'my Content 4'},  
    {title: 'my 2nd title 5', content: 'my Content 5'},
    {title: 'my 2nd title 6', content: 'my Content 6'}
    ];
});

Answer 7

Answer №4

To properly define the order of dependencies in Angular, you must specify which services need to be injected. For instance, if you require the $scope and $q services, your controller declaration should look like this:

.controller('thingsCtrl', ['$scope', '$q', function($scope, $q) { ... }]);

This code snippet demonstrates the correct implementation.

angular.module('myApp', [])
.controller('thingsCtrl', ['$scope', function($scope) {
    $scope.things = [
        {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
        {title: 'my 2nd title 1', content: 'my Content 1'},  
        {title: 'my 2nd title 2', content: 'my Content 2'}, 
        {title: 'my 2nd title 3', content: 'my Content 3'}, 
        {title: 'my 2nd title 4', content: 'my Content 4'},  
        {title: 'my 2nd title 5', content: 'my Content 5'},
        {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
}]);

Answer 8

To properly define the order of dependencies in Angular, you must specify which services need to be injected. For instance, if you require the $scope and $q services, your controller declaration should look like this:

.controller('thingsCtrl', ['$scope', '$q', function($scope, $q) { ... }]);

This code snippet demonstrates the correct implementation.

angular.module('myApp', [])
.controller('thingsCtrl', ['$scope', function($scope) {
    $scope.things = [
        {title: 'my title 1', content: 'my Content 1'},  
        {title: 'my title 2', content: 'my Content 2'}, 
        {title: 'my title 3', content: 'my Content 3'}, 
        {title: 'my title 4', content: 'my Content 4'},  
        {title: 'my title 5', content: 'my Content 5'},
        {title: 'my title 6', content: 'my Content 6'}
        ];

    $scope.things2 = [
        {title: 'my 2nd title 1', content: 'my Content 1'},  
        {title: 'my 2nd title 2', content: 'my Content 2'}, 
        {title: 'my 2nd title 3', content: 'my Content 3'}, 
        {title: 'my 2nd title 4', content: 'my Content 4'},  
        {title: 'my 2nd title 5', content: 'my Content 5'},
        {title: 'my 2nd title 6', content: 'my Content 6'}
        ];
}]);

Trouble with a basic Angular demonstration

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can you ensure in Typescript that a function parameter belongs to a specific set of enumerated values?

Is there a way to detect when the browser's back button is clicked?

Tips for incorporating a page route with an HTML extension in Next.js

Is it permissible to enclose useEffect hooks within an IIFE?

Building a time series collection in MongoDB with Node.js

Maximizing the efficiency of Java Script code

Condition-based React state counter starts updating

Implementing ajax functionality for a form component in vuejs

Steps for resetting the Redux Reducer to its initial state

Tips for sending an array of "FormData" through ajax and retrieving it in a Laravel controller

Updating radio button based on selection change in jQuery

How to trigger a component programmatically in Angular 6

Easily load events into a responsive calendar widget with w3widgets. No

Exploring the distinction and connection between the $scope provided in a controller and the $scope provided in a directive

What could be the reason for this JSON being considered "invalid"?

Adding quotes is optional when using the append function

The inefficiency of Angular's ng-show directive when used with an empty string

adding a touch of flair to a form input that doesn't quite meet the

Welcome to the launch of OpenWeatherMap!

The animation feature on the slideshow is dysfunctional