Angularjs is not giving data from controller

Question

I am new to AngularJS.

I am following MEAN Stack Intro: Build an end-to-end application

I have simple 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>No of users {{userCounts}}</h1>
        </div>
    </body>
</html>

app/scripts/controllers/user_controller.js

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

But when I try to run this, its not giving.

No of users {{ userCounts }}

Instead of 10 in count.

I am using gulp and gulp-connect to run dev server.

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"
  }
}

Using firefox 45.0.2 to view this page.

Could you provide a jsFiddle with your controller logic?

Iain J. Reid
– Iain J. Reid

2016-04-20 17:35:33 +00:00
Commented Apr 20, 2016 at 17:35 — Iain J. Reid
– Iain J. Reid, Commented Apr 20, 2016 at 17:35
updated question with package file

NPatel
– NPatel

2016-04-20 17:39:04 +00:00
Commented Apr 20, 2016 at 17:39 — NPatel
– NPatel, Commented Apr 20, 2016 at 17:39

Darkmiller · Accepted Answer · 2016-04-20 17:43:15Z

1

That's because you are just providing a single function and don't provide a full controller.

Try something like this:

<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>No of users {{ userCounts }}</h1>
        </div>
    </body>
</html>

You need a module (I named it userListApp in your example) which is created by the angular.module() function. The second parameter would be the dependencies (empty array means none). On that module you can build up a controller. You have to pass $scope as an argument to the controller function to use it in your example. In the controller you could assign the referred variable like you tried it in the previous function.

answered Apr 20, 2016 at 17:43

Darkmiller

507 bronze badges

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

5 Comments

NPatel Over a year ago

If i move script to js file and include that js in head section, then it stop working :(. Do you have any idea why it is like so ?

Darkmiller Over a year ago

It should still work. The only important thing is to add the new script reference below the angular import. Is there an error message in the console or something?

NPatel Over a year ago

I updated my question, there is not error in console

Darkmiller Over a year ago

There is no reference to angular anymore (in your updated html file). Insert your angular script tag above the other script tag: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Darkmiller Over a year ago

And I don't mean the console which you use for your gulp build, I mean the web console. It's depending on your bowser but in most cases you can open the console by pressing the f12 key.

Adarsh Konchady · Accepted Answer · 2016-04-20 17:41:41Z

1

You are not instantiating AngularJS app anywhere in your script. You need to provide the application name as an argument to ng-app in body tag and modify the script as well.

The function userListController needs to be attached to AngularJS controller using app.controller.

Please refer the following working fiddle:

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

answered Apr 20, 2016 at 17:41

Adarsh Konchady

2,7375 gold badges32 silver badges52 bronze badges

Collectives™ on Stack Overflow

Angularjs is not giving data from controller

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related