AngularJS 初学者:ng-controller 不工作
AngularJS beginner: ng-controller not working
我只是想了解 AngularJS 的基础知识。我尝试编写一个简单的 MVC 应用程序,但控制器似乎无法正常工作。该文件可以找到刚刚找到的 angular 库,我已经通过排除 'ng-controller' 进行了测试。
<!DOCTYPE html>
<html ng-app>
<head>
<script src='js/lib/angular.js'></script>
<script>
// controller
function MyFirstCtrl($scope) {
// model
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher
Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
}
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<!-- view -->
<h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>
编辑:
错误日志内容如下:
Uncaught SyntaxError: Unexpected token ILLEGAL , line 9
Uncaught SyntaxError: Unexpected token { , line 19
Error: [ng:areq] Argument 'MyFirstCtrl' is not a function, got undefined
EDIT2:我将代码更改为:
<!DOCTYPE html>
<html ng-app='MVCExample'>
<head>
<script src='js/lib/angular.js'></script>
<script>
var app = angular.module('MVCExample', []);
// controller
app.controller("MyFirstCtrl", function($scope) {
// model
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
});
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<!-- view -->
<h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>
事实证明,我的 'employees' 数组是非法的,因为我将一个字符串条目分成两行。以上作品。我正在使用的入门书一定是过时的,这很不幸。
我没看到你是如何初始化 angularjs 应用程序的,不知道它是否已经包含在你链接的 js 文件中,但原则上,你应该有这样的东西:
var app = angular.module("appName", []).controller("ControllerName", function ($scope){
//your controller code here
});
然后在您的 HTML 代码中加入如下内容:
<html ng-app="appName">
如果您使用的是 angularjs 1.3+
版本,那么您不能像上面那样声明全局控制器。
你应该像下面这样初始化。
<div ng-app="appname" ng-controller="MyFirstCtrl">
var app = angular.module('appname', []);
app.controller('MyFirstCtrl',function(){
//controller code here
});
将控制器添加到 angular 应用程序模块
.module('LogIn')
.controller('LoginController', LoginController)
我只是想了解 AngularJS 的基础知识。我尝试编写一个简单的 MVC 应用程序,但控制器似乎无法正常工作。该文件可以找到刚刚找到的 angular 库,我已经通过排除 'ng-controller' 进行了测试。
<!DOCTYPE html>
<html ng-app>
<head>
<script src='js/lib/angular.js'></script>
<script>
// controller
function MyFirstCtrl($scope) {
// model
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher
Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
}
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<!-- view -->
<h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>
编辑: 错误日志内容如下:
Uncaught SyntaxError: Unexpected token ILLEGAL , line 9
Uncaught SyntaxError: Unexpected token { , line 19
Error: [ng:areq] Argument 'MyFirstCtrl' is not a function, got undefined
EDIT2:我将代码更改为:
<!DOCTYPE html>
<html ng-app='MVCExample'>
<head>
<script src='js/lib/angular.js'></script>
<script>
var app = angular.module('MVCExample', []);
// controller
app.controller("MyFirstCtrl", function($scope) {
// model
var employees = ['Christopher Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
});
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<!-- view -->
<h2>Number of employees: {{ourEmployees.length}}</h2>
</body>
</html>
事实证明,我的 'employees' 数组是非法的,因为我将一个字符串条目分成两行。以上作品。我正在使用的入门书一定是过时的,这很不幸。
我没看到你是如何初始化 angularjs 应用程序的,不知道它是否已经包含在你链接的 js 文件中,但原则上,你应该有这样的东西:
var app = angular.module("appName", []).controller("ControllerName", function ($scope){
//your controller code here
});
然后在您的 HTML 代码中加入如下内容:
<html ng-app="appName">
如果您使用的是 angularjs 1.3+
版本,那么您不能像上面那样声明全局控制器。
你应该像下面这样初始化。
<div ng-app="appname" ng-controller="MyFirstCtrl">
var app = angular.module('appname', []);
app.controller('MyFirstCtrl',function(){
//controller code here
});
将控制器添加到 angular 应用程序模块
.module('LogIn')
.controller('LoginController', LoginController)