Angular.js没有从控制器提供数据

Question

I am new to AngularJS. 我是AngularJS的新手。

I am following MEAN Stack Intro: Build an end-to-end application 我正在关注MEAN Stack Intro：构建端到端应用程序

I have simple html file to test angularjs . 我有简单的html文件来测试angularjs 。

index.html 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 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 }} 用户数{{userCounts}}

Instead of 10 in count. 而不是10 。

I am using gulp and gulp-connect to run dev server. 我正在使用gulp和gulp-connect运行开发服务器。

gulpfile.js 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 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. 使用firefox 45.0.2查看此页面。

Answer 1

You are not instantiating AngularJS app anywhere in your script. 您不会在脚本中的任何地方实例化AngularJS应用。 You need to provide the application name as an argument to ng-app in body tag and modify the script as well. 您需要在body标签中提供应用程序名称作为ng-app的参数，并修改script 。

The function userListController needs to be attached to AngularJS controller using app.controller . 需要使用app.controller将功能userListController附加到AngularJS控制器。

Please refer the following working fiddle: 请参考以下工作提琴：

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

Answer 2

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. 您需要一个由angular.module（）函数创建的模块（在示例中，我将其命名为userListApp ）。 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. 您必须将$scope作为参数传递给控制器函数，才能在示例中使用它。 In the controller you could assign the referred variable like you tried it in the previous function. 在控制器中，您可以像在上一个函数中尝试的那样分配引用的变量。

Angular.js没有从控制器提供数据

问题描述

2 个解决方案

解决方案1
1 2016-04-20 17:41:41

解决方案2
1 已采纳 2016-04-20 17:43:15

Angular.js没有从控制器提供数据

问题描述

2 个解决方案

解决方案1 1 2016-04-20 17:41:41

解决方案2 1 已采纳 2016-04-20 17:43:15

解决方案1
1 2016-04-20 17:41:41

解决方案2
1 已采纳 2016-04-20 17:43:15