Angularjs 没有从控制器提供数据答案

【问题标题】：Angularjs is not giving data from controllerAngularjs 没有从控制器提供数据
【发布时间】：2016-04-20 17:28:06
【问题描述】：

我是 AngularJS 的新手。

我关注MEAN Stack Intro: Build an end-to-end application

我有一个简单的 html 文件来测试 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;
                });

但是当我尝试运行它时，它没有给出。

用户数 {{ userCounts }}

计数中不是10。

我正在使用gulp 和gulp-connect 来运行开发服务器。

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

使用firefox45.0.2 查看此页面。

【问题讨论】：

您能提供一个带有控制器逻辑的 jsFiddle 吗？
使用包文件更新问题

标签： angularjs gulp gulp-connect firefox javascript angularjs firefox model-view-controller ng-controller

【解决方案1】：

那是因为你只提供了一个函数，并没有提供完整的控制器。

试试这样的：

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

您需要一个由 angular.module() 函数创建的模块（我在您的示例中将其命名为 userListApp）。第二个参数是依赖项（空数组表示无）。在该模块上，您可以构建一个控制器。您必须将 $scope 作为参数传递给控制器函数才能在您的示例中使用它。在控制器中，您可以像在上一个函数中尝试的那样分配引用的变量。

【讨论】：

如果我将脚本移动到 js 文件并将该 js 包含在 head 部分中，那么它将停止工作:(。你知道为什么会这样吗？
它应该仍然有效。唯一重要的是在角度导入下方添加新的脚本引用。控制台中有错误消息吗？
我更新了我的问题，控制台没有错误
不再引用 Angular（在您更新的 html 文件中）。在另一个脚本标签上方插入您的 Angular 脚本标签：<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
我不是指您用于 gulp 构建的控制台，我指的是 Web 控制台。这取决于您的弓箭手，但在大多数情况下，您可以通过按 f12 键来打开控制台。

【解决方案2】：

您没有在脚本中的任何地方实例化 AngularJS 应用程序。您需要在body 标记中将应用程序名称作为参数提供给ng-app，并同时修改script。

函数userListController 需要使用app.controller 附加到AngularJS 控制器。

请参考以下工作小提琴：

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

【讨论】：