The data being retrieved from the controller in AngularJS is not displaying as expected

Question

The data being retrieved from the controller in AngularJS is not displaying as expected

Just started learning AngularJS.

Currently following this MEAN Stack Intro: Build an end-to-end application

Created a basic html file to test angularjs.

index.html

<html>

    <head>
        <meta charset="utf-8">
        <title>Stack POC</title>
        <script type="application/javascript" src="app/scripts/controllers/user_controller.js"></script> 
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>
    <body ng-app="userListApp">
        <div ng-controller="userListController">
            <h1>Total users: {{userCounts}}</h1>
        </div>
    </body>
</html>

app/scripts/controllers/user_controller.js

angular.module('userListApp', []).controller('userListController', function($scope){ 
                $scope.userCounts = 10;
                });

However, upon running the code, I don't see:

Total users: {{ userCounts }}

Instead of displaying the count as 10.

Using gulp and gulp-connect for development server setup.

gulpfile.js

var gulp = require('gulp'),
    connect = require('gulp-connect');

gulp.task('serve', function() {
    connect.server({
        root: '.',
        port: 8888
    }); 
}); 

gulp.task('default', ['serve']);

package.json

{
  "name": "poc",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-connect": "^3.2.2"
  }
}

Viewing the page on firefox 45.0.2 browser.

javascript angularjs firefox model-view-controller ng-controller

Answer 1

Answer №1

The reason you're encountering an issue is because you're only providing a single function and not a complete controller.

You can try something similar to the following code:

<html>
    <head>
        <meta charset="utf-8">
        <title>Stack POC</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
        <script>
        angular.module('userListApp', []).controller('userListController', function($scope){
            $scope.userCounts = 10;
        });
        </script>
    </head>
    <body ng-app="userListApp">
        <div ng-controller="userListController">
            <h1>Number of users: {{ userCounts }}</h1>
        </div>
    </body>
</html>

In this example, you need to create a module (here named userListApp) using the angular.module() function. The second parameter should be an array of dependencies (empty if there are none). Within this module, you can define a controller. Remember to include $scope as a parameter in the controller function so that it can be used within your code. Inside the controller, you can assign values to variables, just like in your previous attempt.

Answer 2

The reason you're encountering an issue is because you're only providing a single function and not a complete controller.

You can try something similar to the following code:

<html>
    <head>
        <meta charset="utf-8">
        <title>Stack POC</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
        <script>
        angular.module('userListApp', []).controller('userListController', function($scope){
            $scope.userCounts = 10;
        });
        </script>
    </head>
    <body ng-app="userListApp">
        <div ng-controller="userListController">
            <h1>Number of users: {{ userCounts }}</h1>
        </div>
    </body>
</html>

In this example, you need to create a module (here named userListApp) using the angular.module() function. The second parameter should be an array of dependencies (empty if there are none). Within this module, you can define a controller. Remember to include $scope as a parameter in the controller function so that it can be used within your code. Inside the controller, you can assign values to variables, just like in your previous attempt.

Answer 3

Answer №2

Make sure to include the AngularJS app instantiation in your script. Remember to pass the application name as an argument to ng-app in the body tag and update the script accordingly.

Don't forget to link the function userListController to the AngularJS controller using app.controller.

For a reference, check out this working fiddle:

https://jsfiddle.net/akonchady/7kfv4ssk/1/

Answer 4

Make sure to include the AngularJS app instantiation in your script. Remember to pass the application name as an argument to ng-app in the body tag and update the script accordingly.

Don't forget to link the function userListController to the AngularJS controller using app.controller.

For a reference, check out this working fiddle:

https://jsfiddle.net/akonchady/7kfv4ssk/1/

The data being retrieved from the controller in AngularJS is not displaying as expected

Answer №1

Answer №2

Similar questions

ng-view or controller appears to be malfunctioning

Input form and select form collide in conflict when the "Enter" key is activated

Having trouble with table sorting in Jquery?

What method is most effective for duplicating objects in Angular 2?

The VueJS component fails to load on the webpage

The website on iPad automatically zooms in upon opening and then increases the zoom level even further when a specific button is tapped

Adjust the visibility of components depending on the width of the screen

Selecting a directive's scope

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Middleware in Express not producing results

Exploring the world of Next.js version 9.3 and beyond with the exciting addition

What methods are typically used for testing functions that return HTTP observables?

Can VueJS support multiple v-slots in a component?

Is it universally compatible to incorporate custom attributes through jquery metadata plugin in all web browsers?

Creating a zebra-striped list using CSS can be done by styling even and odd list items differently

Having trouble with JQuery Ajax when trying to send multiple data at once?

Navigating directly to a page in ReactJS and Redux without needing to login if a token is found in the local storage

Insert a Facebook like button within a designated div

Tips for building a carousel-style transition using React Router

dynamic variable to store user input (Meteor)