我正在学习Angular.js,我无法弄清楚这个简单代码有什么问题。它似乎看起来很好,但给我跟随错误。
**Error**: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
在添加ng-app="app"
之前(我只是将其保留为ng-app
),它给了我以下错误。那是为什么?
Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:19:510)
at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:20:78)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:75:331)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:57:65
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:408)
at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:56:443)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:299)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:316)
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="name">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<script>
var Ctrl = function($scope)
{
$scope.age = 24;
};
</script>
</body>
</html>
答案 0 :(得分:15)
禁用AngularJS 1.3版全局控制器函数声明后
您需要先创建一个AngularJS模块&amp;然后将所有组件附加到该特定模块。
<强> CODE 强>
function Ctrl($scope) {
$scope.age = 24;
}
angular.module('app', [])
.controller('Ctrl', ['$scope', Ctrl]);
特别针对您的情况,AngularJS存在一些问题 1.3.14
(将其降级为 1.3.13
正常工作)。虽然我更喜欢你使用 angular 1.2.27 AngularJS 1.6.X,这是更稳定的版本&amp;最新版本的AngularJS。
<强>更新强>
您可以通过允许angular.config
内的全局控制器声明将当前代码设置为工作状态。但这不是运行角度应用程序的正确方法。
function Ctrl($scope) {
$scope.age = 24;
}
angular.module('app', [])
.config(['$controllerProvider',
function ($controllerProvider) {
$controllerProvider.allowGlobals();
}
]);
答案 1 :(得分:7)
我自己被困在这个问题上一段时间了。按顺序检查以下内容: -
angular.js脚本的路径是正确的(无论您是从本地源还是作为外部资源在HTML中调用它)。
接下来,一旦您的angular.js正确,请检查您的应用是否已初始化。
var app=angular.module('app',[])
//在app.js文件中
<body ng-app="app">
//在您的HTML中
接下来使用应用程序注册您的控制器并传递所有必要的注射
app.controller('myCtrl',function(){});
在您的html文件中调用您的javascript文件
<script src="app.js"></script>
答案 2 :(得分:6)
您必须定义控制器
var app = angular.module('app', []);
app.controller('Ctrl', ['$scope',function($scope) {
$scope.age = 24;
}]);
答案 3 :(得分:0)
请确保ng-app="app_name"
定义必须与
var app=angular.module(
'app_name'
,[])
<html ng-app="myApp">
<body>
<div ng-controller="Ctrl">
<input ng-model="name">
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</div>
<script>
var app = angular.module('myApp',[]); // same to the above define appName
app.controller('Ctrl',function($scope){
$scope.age=24; // initialize age by injecting scope
});
</script>
</body>
<html>
有关更多详细信息,请访问Here
答案 4 :(得分:0)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="app.js"></script>