Angularjs 没有提供来自控制器的数据
Angularjs is not giving data from controller
我是 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 and 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"
}
}
使用 firefox 45.0.2 查看此页面。
您没有在脚本中的任何地方实例化 AngularJS 应用程序。您需要在 body
标记中将应用程序名称作为参数提供给 ng-app
,并同时修改 script
。
函数 userListController
需要使用 app.controller
附加到 AngularJS 控制器。
请参考以下工作fiddle:
那是因为你只提供了一个功能,并没有提供完整的控制器。
尝试这样的事情:
<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
)。第二个参数是依赖项(空数组表示 none)。在该模块上,您可以构建一个控制器。您必须将 $scope
作为参数传递给控制器函数才能在您的示例中使用它。在控制器中,您可以像在上一个函数中尝试的那样分配引用的变量。
我是 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 and 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"
}
}
使用 firefox 45.0.2 查看此页面。
您没有在脚本中的任何地方实例化 AngularJS 应用程序。您需要在 body
标记中将应用程序名称作为参数提供给 ng-app
,并同时修改 script
。
函数 userListController
需要使用 app.controller
附加到 AngularJS 控制器。
请参考以下工作fiddle:
那是因为你只提供了一个功能,并没有提供完整的控制器。
尝试这样的事情:
<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
)。第二个参数是依赖项(空数组表示 none)。在该模块上,您可以构建一个控制器。您必须将 $scope
作为参数传递给控制器函数才能在您的示例中使用它。在控制器中,您可以像在上一个函数中尝试的那样分配引用的变量。